HTML Nested Tables Example

by Matthew Marcus

HTML

<table>
    <thead>
        <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
            <td>cell4</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
            <td>cell4</td>
        </tr>
        <tr class="sub-table-wrp">
            <td colspan="4">
                <table>
                    <thead>
                        <tr>
                            <th>sub-col1</th>
                            <th>sub-col2</th>
                            <th>sub-col3</th>
                            <th>sub-col4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>sub-cell1</td>
                            <td>sub-cell2</td>
                            <td>sub-cell3</td>
                            <td>sub-cell4</td>
                        </tr>
                        <tr>
                            <td>sub-cell1</td>
                            <td>sub-cell2</td>
                            <td>sub-cell3</td>
                            <td>sub-cell4</td>
                        </tr>
                        <tr>
                            <td>sub-cell1</td>
                            <td>sub-cell2</td>
                            <td>sub-cell3</td>
                            <td>sub-cell4</td>
                        </tr>
                        <tr>
                            <td>sub-cell1</td>
                            <td>sub-cell2</td>
                            <td>sub-cell3</td>
                            <td>sub-cell4</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>cell1</td>
           ...

CSS

table th{
    text-align:left;
}
.sub-table-wrp table th,
.sub-table-wrp table td{
    opacity: .7;
    padding-left: 5px;
}