Styling Tables With CSS

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

Styling dinner tables in not so easy unlike HTML tables. Using CSS to style a table is easy, and greatly simplifies the markup. Seriously, for the first time it looks a bit hard, but it's just too easy. At times it seems that tables are a little misunderstood in modern web development. A have one suggestion for you, "don't use tables" "don't use tables for layout."

Anyways, Before we dive into the CSS, let’s consider the key structural elements of tables you will need to style clearly:

• Table headings
• Table data cells

Here is our basic HTML mark-up:

<table>
<tbody>

<tr>
<th>Name</th>
<th>Nickname</th>
<th>Finisher</th>
</tr>

<tr>
<td>John Cena</td>
<td>The Champ</td>
<td>Attitude Adjustment</td>
</tr>
<tr>
<td>CM Punk</td>
<td>Best In The World</td>
<td>Go To Sleep</td>
</tr>
<tr>
<td>The Undertaker</td>
<td>Dead Man</td>
<td>Tombstomb Piledriver</td>
</tr>
<tr>
<td>Shawn Michaels</td>
<td>HBK</td>
<td>Sweet Chin Music</td>
</tr>
<tr>
<td>Edge</td>
<td>Rated R Superstar</td>
<td>Spear</td>
</tr>

</tbody>
</table>

Without CSS, it will something like this:

Name	Nickname	Finisher
John Cena	The Champ	Attitude Adjustment
CM Punk	Best In The World	Go To Sleep
The Undertaker	Dead Man	Tombstomb Piledriver
Shawn Michaels	HBK	Sweet Chin Music
Edge	Rated R Superstar	Spear

The first decision is how wide to make the table. The browser default is the same as setting table { width: auto; }, which results in the table extending to the width of the content. Our tables are going to be 500px. Here is first design:

Name	Nickname	Finisher
John Cena	The Champ	Attitude Adjustment
CM Punk	Best In The World	Go To Sleep
The Undertaker	Dead Man	Tombstomb Piledriver
Shawn Michaels	HBK	Sweet Chin Music
Edge	Rated R Superstar	Spear

Above style is very simple and stylish. Our table has black background with 500px width, td has 5px padding, here is full CSS of above table:

table {
    background:black;
    width:500px;
}

td {
    padding:5px;
}

th {
    background:grey;
    color:white;
}

tr {
    background:whitesmoke;
}

It was simple... :) Now it's time for second style:

Name	Nickname	Finisher
John Cena	The Champ	Attitude Adjustment
CM Punk	Best In The World	Go To Sleep
The Undertaker	Dead Man	Tombstomb Piledriver
Shawn Michaels	HBK	Sweet Chin Music
Edge	Rated R Superstar	Spear

The simplest way to accomplish zebra stripes is to add a class to alternate table rows, then use a contextual CSS selector to style the cells in those rows. First, the classes "odd" and "even" are added to the table rows, like so:

  ...

<tr class="odd">

  ...

<tr class="even">

  ...

But wait, Beben Koben shared a great way (in comments) to style even/odd elements without changing our mark-up. We're going to use :nth-child(even) and :nth-child(odd) to style them:

Here is full CSS of this table:

table{
    width:500px;
    border:2px black solid;
}

td {
    padding:5px;
}

th {
    background:grey;
    color:white;
}

table tr:nth-child(even) {
    background-color: whitesmoke;
}

table tr:nth-child(odd) {
    background-color: lightgrey;
}

It's time for our final table, which is not created by me. It's from W3Schools. Here we go:

Name	Nickname	Finisher
John Cena	The Champ	Attitude Adjustment
CM Punk	Best In The World	Go To Sleep
The Undertaker	Dead Man	Tombstomb Piledriver
Shawn Michaels	HBK	Sweet Chin Music
Edge	Rated R Superstar	Spear

It looks awesome, isn't it? W3 Schools chose some great colors to create this table. Here is our CSS:

table{
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(195, 195, 195);
    border-collapse: collapse;
    width: 500px;
}

th {
    background-color: rgb(229, 238, 204);
    border: 1px solid rgb(195, 195, 195);
    padding: 3px;
    vertical-align: top;
    text-align: left;
    font: 14px/20px Arial,Verdana;
}

td {
    border: 1px solid rgb(195, 195, 195);
    padding: 3px;
    vertical-align: top;
}

That's it for this time...hope it was helpful :) And I just realized that thumbnail of this article is not featuring our second table (Fixed IT). Also, just wanted to inform you that I used WWE related names and all in table because I'm a huge fan.

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.