htmlhtml-table

How do you use colspan and rowspan in HTML tables?


I don't know how to merge rows and columns inside HTML tables.

Example

Can you please help me with making such a table in HTML?


Solution

  • I'd suggest:

    table {
        empty-cells: show;
        border: 1px solid #000;
    }
    
    table td,
    table th {
        min-width: 2em;
        min-height: 2em;
        border: 1px solid #000;
    }
    <table>
        <thead>
            <tr>
                <th rowspan="2"></th>
                <th colspan="4">&nbsp;</th>
            </tr>
            <tr>
                <th>I</th>
                <th>II</th>
                <th>III</th>
                <th>IIII</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
             </tr>
        </tbody>
    </table>

    References: