CSS Table Border Tutorial - Better Than HTML Table Borders • CSS Table Border Tutorial - Better Th...
CSS code from the video:
td {
border:1px solid green;
border-right:none;
border-bottom:none;
}
td:nth-last-child(1) {
border-right:1px solid green;
}
table {
border-bottom:1px solid green;
}
CSS table border sets a border for your tables. You can set a table order right in the HTML as well, but it's not as versatile and doesn't look as good.
The options available using table borders is the same as setting borders on any other elements. But adding border's to tables can be a little tricky. By that I mean you have add borders to some table cells and table rows.
For example, if you just add border:1px solid black; to all table cells you will have a double border in the internal cells and a single border around the outside. So you have to instead apply border:1px solid block;border-right:none;
This will ensure that you don't have double borders, but then there won't be a border on the right side of the table. So you'll have to add border-right to just the last cells on the right of the table. It's a bit of a pain to add borders to table and it takes a bit of work, but it's well worth it.
So you have a lot flexibility with table borders.
A couple things are important to keep in mind.
1. Proper border order.
2. The different border styles you can apply to each side independently using the same order as in point 1.
3. The ability to add border color to each side independently using the same order as in point 1.
That's all there is to it. I hope this video helps you! If you have any questions, please leave them in the comments below. And before you go, subscribe and like :)
If you're into Wordpress, check out my WPLearningLab channel to learn more about WordPress so you can earn more for yourself, for your clients or for your business.
On this page of the site you can watch the video online CSS Table Border Tutorial - Better Than HTML Table Borders with a duration of hours minute second in good quality, which was uploaded by the user Full Stack Coding Tutorials 17 April 2017, share the link with friends and acquaintances, this video has already been watched 24,255 times on youtube and it was liked by 186 viewers. Enjoy your viewing!