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!
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: