Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Gregg Staley
501 PointsQuestion for HTML tables styled with CSS
I couldn't find a similar question so here goes. I'm refreshing and updating my skills up to html 5 and CSS 3 from Html 1 and CSS 1. I'm wondering for styling tables through CSS if you can control multiple aspects of th, td, and tr styling under one heading as apposed to table, th, td and then th, td. - I only need one table style for the entire site and was hoping to handle that with CSS as opposed to all HTML code.
i.e is A different from B
A: table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left;
}
B:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: left;
}
Thank you in advance as any help would be appreciated.
8 Answers
Steven Parker
231,521 PointsIf you want to apply the same styles to several elements it makes perfect sense to combine the selectors for a single rule. It makes sense because they are not different.
glasscheck
7,302 Pointsyes they are different
you have applied padding to the table element, whereas in A, only to the tables children
To see the effect, make 2 tables with A, then two tables with B, and the two A tables will be closer to each other since they do have padding surrounding unlike B
Gregg Staley
501 PointsThank you for your answer,
I have been getting the same result whether its in one bracket (as in B) table, th, tr, td verses being separated (as in A). I do see what you are getting at with the padding. Since my tables will have the same styling i wanted to make sure that keeping them all under table, th, tr, td { would be a best-practice as opposed to keeping the code separate. Since I wouldn't need to apply separate padding to say th and td.
Gregg Staley
501 PointsTo Clarify - Both examples were examples of combining the code under a global table heading. I understand how both A or B would produce different results as the padding is applied to different elements. My question is concerning whether doing that (combining under 1 global table) is good practice or if it even makes sense if the the th, tr, and td are not different.
so the current code stands as:
table, th, tr, td { border: 1px transparent; border-spacing: 0px; border-collapse: collapse; background-color: transparent; padding: 2px; text-align: center; }
glasscheck
7,302 Pointsnot sure I get what you mean but to answer your original question, if they are different
glasscheck
7,302 Pointsgoing on what Steve said, in this case you would be better to apply classes, one class that you add to all elements that you want to apply those styling rules to
Steven Parker
231,521 PointsClasses would make sense if you want to apply the styling to some of the tables but not all.
Gregg Staley
501 PointsThank you both, those combined answer the original question magnificently! I wouldn't need to add classes if there is just one type of table present on the site correct? as it stand the way the site is setup there is one table and it will be the same style of table on all the pages in the site; just with slightly different content inside the table on each page.
Steven Parker
231,521 PointsExactly right. There's no need to distinguish any using classes if they are all to be handled the same way.
Gregg Staley
501 PointsThank you very much both of you, I do believe that solves all my questions. Steven, you reply hadn't shown up before I asked my last question so I apologize for the double post.