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.

CSS

Gregg Staley
Gregg Staley
501 Points

Question 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
Steven Parker
220,416 Points

If 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.

yes 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
Gregg Staley
501 Points

Thank 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
Gregg Staley
501 Points

To 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; }

not sure I get what you mean but to answer your original question, if they are different

https://w.trhou.se/q9xb5t7gfs

going 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
Steven Parker
220,416 Points

Classes would make sense if you want to apply the styling to some of the tables but not all.

Gregg Staley
Gregg Staley
501 Points

Thank 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
Steven Parker
220,416 Points

Exactly right. There's no need to distinguish any using classes if they are all to be handled the same way.

Gregg Staley
Gregg Staley
501 Points

Thank 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.