Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
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
220,416 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,301 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,301 Pointsnot sure I get what you mean but to answer your original question, if they are different
glasscheck
7,301 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
220,416 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
220,416 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.