Table tips

HTML

<h2><code>[col|row]span=&quot;0&quot;</code></h2>

<p>This basically means &lsquo;span the rest of the cells <strong>to the right/below</strong>&rsquo;</p>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th colspan="100%">Skills</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Harry</td>
            <td>21</td>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>15</td>
            <td>Sausage making</td>
            <td>Harp</td>
        </tr>
        <tr>
            <td>Lisa</td>
            <td>68</td>
            <td rowspan="100%">BMX</td>
            <td>Stone masonry</td>
        </tr>
        <tr>
            <td>Ted</td>
            <td>40</td>
            <td>Baking</td>
        </tr>
    </tbody>
</table>


<h2><code>[col|row]span=&quot;100%&quot;</code></h2>

<p>This basically means &lsquo;span the <strong>entire table</strong>&rsquo;</p>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th colspan="100%">Skills</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="100%">Data accurate as of 2011</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Harry</td>
            <td>21</td>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>15</td>
            <td>Sausage making</td>
            <td>Harp</td>
        </tr>
        <tr>
            <td>Lisa</td>
            <td>68</td>
            <td rowspan="100%">BMX</td>
            <td>Stone masonry</td>
        </tr>
        <tr>
            <td>Ted</td>
            <td>40</td>
            <td>Baking</td>
        </tr>
    </tbody>
</table>

CSS

html{
    font:0.75em/1.5 "Helvetica Neue", Arial, sans-serif;
}
table{
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
}
th,
td{
    padding:5px;
    border:1px solid #ccc;
}
[rowspan="0"],
[colspan="0"]{
    background:#ffc;
}
[rowspan="100%"],
[colspan="100%"]{
    background:#cff;
}