CSS Tables: Simple table

by Shankar

HTML

<table class="zui-table">
    <thead>
        <tr>
            <th>Select<input type="checkbox"></th>
            <th>Grp1<input type="checkbox"></th>
            <th>Grp2<input type="checkbox"></th>
            <th>Grp3<input type="checkbox"></th>
            <th>Grp4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>C
                        </td>
            <td>6'11"</td>
            <td>08-13-1990</td>
            <td>$4,917,000</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>PG</td>
            <td>5'9"</td>
            <td>02-07-1989</td>
            <td>$473,604</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>SG</td>
            <td>6'5"</td>
            <td>02-11-1993</td>
            <td>$2,895,960</td>
        </tr>
       
    </tbody>
</table>

CSS

.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}