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!

<style type=”text/css”>
.special table{color:#000;}
.special th{color:#FFF;background-color:#090;}
.special tr{width:400px;}
.special td{width:100px;}
.special tr:nth-child(even){background-color#FFF;}
.special tr:nth-child(odd){background-color:#CCC;}
</style>

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:

<table class=”special” cellpadding="0" cellspacing="0">

<tr>

<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
</tr>
<tr>

<td>Row1 Col1</td>
<td>Row1 Col2</td>
<td>Row1 Col3</td>
<td>Row1 Col4</td>
</tr>
<tr>

<td>Row2 Col1</td>
<td>Row2 Col2</td>
<td>Row2 Col3</td>
<td>Row2 Col4</td>
</tr>
<tr>

<td>Row3 Col1</td>
<td>Row3 Col2</td>
<td>Row3 Col3</td>
<td>Row3 Col4</td>
</tr>
</table>

References

• Official Styling Table Documentation (w3)
• HTML Tables with CSS Styles (TextFixer)
• CSS Table Examples (DesignShack)
• CSS Table Compatibility (QuirksMode)