Style Attribute To And Tags? - Codecademy

<td> and <th> inherit from <tr> so yes, it does work. By rights, though, we should apply the style rule to the container that holds the text, not its parent. TR does not have any children other than TH and TD. It is they that should receive the style rule since it is their children that can be text or other elements wrapping text.

th, td { color: red; }

Every child element of every TH and every TD will inherit this foreground color.

On the other hand, background-color could be applied to <tr> and <td> set to transparent, so it shows through, rather than being covered up by the inherited color.

Try this out for size:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TABLE, TR or TH/TD</title> <style> table { width: 100%; } tr { background-color: #def; } th { background-color: #cba; } td { width: 30%; height: 30px; color: red; background: transparent; } </style> </head> <body> <!-- very basic table for illustration only --> <table> <tr> <th>Lorem</th> <th>Ipsum</th> <th>Dolor</th> </tr> <tr> <td>Lorem column text</td> <td>Ipsum column text</td> <td>Dolor column text</td> </tr> <tr> <td>Lorem column text</td> <td>Ipsum column text</td> <td>Dolor column text</td> </tr> </table> </body> </html>

Anyway, the point is to apply a rule to the most specific selector you can to keep from interfering with other rules. The higher up the inheritance chain the more child elements that can be affected, which may not be such a good thing in some cases.

Notice above that we do not have to change the TR rule for TH, only give TH its own background-color. It will override the TR background-color. But likewise, we don’t have to create a special rule for TH is we wish to have the same background as TD.

There are so many in’s and out’s it is impossible to say that any one method is better than another. Keep it simple, adhere to the cascade and specificity model and keep an eye on what inherits from what.

This can take years to get well grounded in, so don’t try to hurry yourself. Just stick with it and read as much as you can bear, then test it, push the envelope, then apply what is most stable. It really does get easier with time and work.

Từ khóa » Th Tr