Tables & CSS

by Amy L

HTML

<!-- ADDED CLASS 'container' TO TOP LEVEL TABLE TO STYLE IT -->
<table class="container">
    <tr>
        <td>
            <!-- ADDED CLASS 'innerContainer' TO INNER TABLE TO STYLE IT -->
            <table class="innerContainer">
                <tr>
                    <td>
                        <!-- ADDED DIV BOX -->
                        <div class="off box" onmouseover="this.className='on box'" onmouseout="this.className='off box'">
                            <!-- ADDED CLASS 'light' TO THE GOOGLE LINK TO MAKE IT WHITE --> <a href="http://www.google.com" class="light">valid google link</a>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- ADDED DIV BOX -->
                        <div class="off box" onmouseover="this.className='on box'" onmouseout="this.className='off box'">
                            <!-- ADDED CLASS 'light' TO THE YAHOO LINK TO MAKE IT WHITE --> <a href="http://www.yahoo.com" class="light" target="_blank">valid yahoo link</a>

                        </div>
                    </td>
                </tr>
            </table>
        </td>
        <!-- ADDED CLASS 'bordered' TO THE TABLE CELL TO STYLE THE BORDER -->
        <td class="bordered"> <a href="http://www.msn.com">valid msn.com link</a>

            <p>plain test - no link</p>
        </td>
    </tr>
</table>

CSS

table.container {
    /* styles the outermost table */
    border: 10px solid black;
    border-collapse: collapse;
    text-align: center;
    width: 600px;
}
table.innerContainer {
    /* styles table holding the boxes and google & yahoo links */
    border: 0;
}
td {
    /* create 10px padding around all <td> elements */
    padding: 10px;
}
.off {
    background: #223C66
}
.on {
    background: #2d2dff
}
td.bordered {
    /* create black border around the MSN link & plain test section */
    border: 1px solid black;
    border-collapse: collapse;
}
.innerContainer .box {
    /* sets the box size for the google & yahoo links */
    height: 40px;
    width: 200px;
    vertical-align: middle;
    display: table-cell;
}
a {
    text-decoration:none
}
a:hover {
    text-decoration:underline
}
td a.light {
    /* makes all links with class 'light' to display as white font color */
    color: white;
}