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.