HomeОбразованиеRelated VideosMore From: Full Stack Coding Tutorials

CSS Table Border Tutorial - Better Than HTML Table Borders

26 ratings | 3897 views
CSS Table Border Tutorial - Better Than HTML Table Borders https://youtu.be/WrmjwNIThW0 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.
Html code for embedding videos on your blog
Text Comments (6)
Allisons Apothecary (2 months ago)
Why waste time and go through what you dont want?
Jamai Wirodikromo (6 months ago)
border-bottom: 1px solid........$1000
micha mimicha (8 months ago)
I need your help plzzzz
Anirban Ghosh (1 year ago)
you can use border-collapse
Good tip Anirban, thanks for sharing!
John Boyd (1 year ago)
Bjorn, you forgot to add the code to the bottom of this tutorial. Thanks for the information. I have had these kind of issues in the past, and this will be very beneficial in the future.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.