Sub-Table Bodies Example

by Matthew Marcus

HTML

<table>
    <thead>
        <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
            <tr class="sub">
                <th>scol1</th>
                <th>scol2</th>
                <th>scol3</th>
            </tr>
            <tr class="sub">
                <td>sd1</td>
                <td>sd2</td>
                <td>sd3</td>
            </tr>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
            <tr class="sub">
                <th>scol1</th>
                <th>scol2</th>
                <th>scol3</th>
            </tr>
            <tr class="sub">
                <td>sd1</td>
                <td>sd2</td>
                <td>sd3</td>
            </tr>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width:100%;
}
th {
    text-align:left;
}
tr.sub th {
    color:#666;
    padding-left:20px;
}
tr.sub td {
    color:#666;
    padding-left:20px;
}