Tables

HTML tables by themselves are boring, but not when you add CSS styling to them. We will be focusing on how to use the table selectors and a cool odd and even effect on the table rows to make them more readable. I can’t tell you how many times I go to a website and am sitting there glaring at a table in a fit of anger. Why am I so angry you may ask? Because I keep losing my spot! They didn’t bother to use borders, or distinguish one row from another. Let’s try to be better than that.

CSS Table Selectors

Technically, we will just be dealing the standard HTML tags as selectors with no sub class. Essentially, we have 4 tags to discover and manipulate. Those tags are:

  • table – the whole table
  • tr – the rows in the table
  • th – the table headers
  • td – the table columns

I am going to attempt to knock this out with one single example. I will also show you some neat CSS rules to differentiate one row from its neighbors. Bring out the example, please!

Example

Result
Heading 1 Heading 2 Heading 3 Heading 4
Row1 Col1 Row1 Col2 Row1 Col3 Row1 Col4
Row2 Col1 Row2 Col2 Row2 Col3 Row2 Col4
Row3 Col1 Row3 Col2 Row3 Col3 Row3 Col4

You might have noticed that I left the HTML code for the table out. That’s simply because it would make them example massive, and I will include it at the bottom. I gave all of the tables a special class so that it won’t affect how to print these pages. With the table CSS selector, we set the all the font in the table to the color #000. Next, we set our table headers (th) selectors apart from the td selectors. This gives us that solid green background and white font color at the top of the table. We only use the tr selector to set the width, which could have actually been done in the table, but I lacked a good example. After that, we set the width of our columns by using the td. Onto the cool alternating background color rows…

Different Style Rows

Fortunately, the w3 guys gave rise to CSS rules for developers to better customize the stylesheets. One of those “rules” is attains a numerical order of the table rows in a table. These implemented in a comparable manner to links by using a colon after the selector. Here, we used nth-child(even) to set all even rows’ background to #FFF. Alternatively, we employed nth-child(odd) to change all odd rows’ background to #CCC. See, that wasn’t too bad. Now as I promised:

Example

References

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.