Table Cell Styling

by kaikemono

HTML

<table width="100%" cellspacing="4" cellpadding="0" border="0">
<tbody>
    <tr>
        <td class="subnav">
            <a href="#"><img src="http://placekitten.com/g/50/50" /></a>
            <a href="#">Computers</a>
        </td>
        <td class="subnav">
            <a href="#"><img src="http://placekitten.com/g/50/50" /></a>
            <a href="#">Computer Accessories</a>
        </td>
        <td class="subnav">
            <a href="#"><img src="http://placekitten.com/g/50/50" /></a>
            <a href="">Monitors</a>
        </td>
    </tr>
    <tr>
        <td class="subnav">
            <a href="#"><img src="http://placekitten.com/g/50/50" /></a>
            <a href="#">Printers</a>
        </td>
        <td class="subnav">
            <a href="#"><img src="http://placekitten.com/g/50/50" /></a>
            <a href="#">Software</a>
        </td>
        <td class="subnav">
            <a href="#"><img src="http://placekitten.com/g/50/50" /></a>
            <a href="">Department Licensing</a>
        </td>
    </tr>
</tbody>
</table>

CSS

table {
    border: none;
    margin: 0;
    padding: 0;
    position: relative;
}

td.subnav {
    background: #fff url('http://dl.dropbox.com/u/90501/forrst/bg.png') repeat-x 0 0;
    border: 2px solid #e8e3c9;
    box-shadow: 5px 5px 10px rgba(000,000,000,0.25); -moz-box-shadow: 5px 5px 10px rgba(000,000,000,0.25); -webkit-box-shadow: 5px 5px 10px rgba(000,000,000,0.25);
    position: relative;
    text-align: center;
    width: 33.33%;
}

/* style fr links insie the cell */
td.subnav a {
    background-color: #fff;
    color: #000;
    display: block;
    font-size: 13px;
    font-weight: bold;
    line-height: 15px;
    margin: 0 30px 30px;
    padding: 20px;
    text-decoration: none;
}

/* style for just the image */
td.subnav > a:first-child {
    margin-bottom: 0;
    margin-top: 30px;
    padding: 20px 0 0;
}