3 Table Designs Based on CSS

This article comes in handy because it will provide you some examples showing how you can style tables with CSS. There are 3 examples of CSS table designs that I like to show you in the current post:

View Demo

Let’s start with talking about the general XHTML code of each table:
HTML


<!-- Table markup-->

<table id="...">

<!-- Header -->

<thead>
<tr>
<th scope="col">...</th>
...
</tr>
</thead>



<!-- Body of the Table -->

<tbody>
<tr>
<td>...</td>
...
</tr>
...
</tbody>

</table>

Example 1

We simply play with borders, padding, colors, backgrounds, and hover effects of the table cells. When you hover over every row, this row becomes clearly apparent.
CSS

#table1
{
font-size: 12px;
margin: 50px;
width: 500px;
text-align: left;
border-collapse: collapse;
border: 1px solid #99CCFF
}
#table1 th
{
padding: 20px 10px 10px 10px;
font-weight: normal;
font-size: 16px;
color: #99CCFF;
}
#table1 tbody
{
background: #F5F39F;
}
#table1 td
{
padding: 10px;
color: #3E3E3E;
border-top: 1px dashed #F7AE65;
}
#table1 tbody tr:hover td
{
color: #fff;
background: #CCE6FF;
}

Example 2

This is a nice design which you can customize in order to let colors (of borders and of cells) mach with your site colors.
Here is the CSS:
CSS

#table2
{
font-size: 12px;
margin: 50px;
width: 500px;
text-align: center;
border-collapse: collapse;
border-top: 7px solid #99CCFF;
border-bottom: 7px solid #99CCFF;
}
#table2 th
{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: #FFF5F2;
border-right: 1px solid #99CCFF;
border-left: 1px solid #99CCFF;
color: #767676;
}
#table2 td
{
padding: 8px;
background: #CCE6FF;
border-right: 1px solid #99CCFF;
border-left: 1px solid #99CCFF;
color: #767676;
}

Example 3

This is a zebra table. The aim is to alternate background color to make things more clear for people reading table data. Simply add class="select" to every tr tag that you want to be colored like the following:
HTML


    <tr class="select">
        <td>Mohammed</td>
        <td>52</td>
        <td>2</td>
        <td>V</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Samir</td>
        <td>25</td>
        <td>2</td>
        <td>V</td>
        <td>1</td>
    </tr>

The CSS will be defined like this:
CSS

#table3
{
font-size: 12px;
margin: 50px;
width: 500px;
text-align: left;
border-collapse: collapse;
}
#table3 th
{
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
color: #767676;
}
#table3 td
{
padding: 10px;
color: #767676;
}
#table3 .select
{
  background: #CCE6FF;
}