Merging Cells in Tables

Tweet

Merging Cells in HTML gives an additional feature to Tables, for an attractive and neat display of datas. In some situations, the repetition of column data and row data give a poor remark on the table itself. To avoid this, we can use attributes like rowspan and colspan. This feature is most commonly used on headers.

Repetition of Table data

<table border="1">
            <tr>
                <th>Carnivores</th>
                <th>Carnivores</th>
                <th>Habitat</th>
            </tr>
            <tr>
                <th>Cat Family</th>
                <td>Jaguar</td>
                <td>Dense lowland, rainforests</td>
            </tr>
            <tr>
                <th>Cat Family</th>
                <td>Leopard</td>
                <td>Bush and Riverine forests</td>
            </tr>
            <tr>
                <th>Cat Family</th>
                <td>Lion</td>
                <td>Grassy planes and open woodlands</td>
            </tr>
            <tr>
                <th>Dog Family</th>
                <td>Wolves</td>
                <td>Forests, swampy areas, deserts, artic areas and tundars</td>
            </tr>
            <tr>
                <th>Dog Family</th>
                <td>Hyenas</td>
                <td>Savannas, grassland, woodlands, forest edges, subdeserts and mountains 
                to 13,000 feet</td>
            </tr>
</table>

Here, you can see in the above code, the column header Carnivores(1) is repeated two times and the row headers Cat Family(B) and Dog Family(C) repeating three and two times. This unpleasant presentation can be avoided in HTML.

Merging Column Cells

<table border="1">
            <tr>
                <th colspan="2">Carnivores</th>
                <th>Habitat</th>
            </tr>
            <tr>
                <th>Cat Family</th>
                <td>Jaguar</td>
                <td>Dense lowland, rainforests</td>
            </tr>
            
            ......

            ......

            ......

            <tr>
                <th>Dog Family</th>
                <td>Hyenas</td>
                <td>Savannas, grassland, woodlands, forest edges, subdeserts and mountains 
                to 13,000 feet</td>
            </tr>
</table>

By setting the colspan attribute to two, the repetition of column header is merged into one, which gives a clear appearance.

Merging Row Cells

<table border="1">
            <tr>
                <th colspan="2">Carnivores</th>
                <th>Habitat</th>
            </tr>
            <tr>
                <th rowspan="3">Cat Family</th>
                <td>Jaguar</td>
                <td>Dense lowland, rainforests</td>
            </tr>
            <tr>
                <td>Leopard</td>
                <td>Bush and Riverine forests</td>
            </tr>
            <tr>
                <td>Lion</td>
                <td>Grassy planes and open woodlands</td>
            </tr>
            <tr>
                <th rowspan="2">Dog Family</th>
                <td>Wolves</td>
                <td>Forests, swampy areas, deserts, artic areas and tundars</td>
            </tr>
            <tr>
                <td>Hyenas</td>
                <td>Savannas, grassland, woodlands, forest edges, subdeserts and mountains 
                to 13,000 feet</td>
            </tr>
</table>

Now, by the rowspan attribute on the Cat Family(B) and Dog Family(C), the row headers are neatly arranged.

Although the above examples explained on the table headers, these features can be used anywhere within the table cells.