HTML Table: Spanning or merging table cells

This entry is part 8 of 16 in the series HTML Table

In HTML, as in using Excel spreadsheet, you can span or merge two or more adjacent cells so that one cell spans multiple rows and/or columns.

This technique is useful for centering text across several columns.

To merge a cell into adjacent cells to its right, use the colspan attribute and specify the number of columns to be spanned.

<td colspan='2'>

To merge a cell into adjacent cells below it, use the rowspan attribute and specify the number of rows to be spanned.

<td rowspan='2'>

Here a simple example on using the colspan.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='80%'>
    <tr>
        <th>ID</th>
        <th colspan='2'>Artiste</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>David Bowie</td>
    </tr>
</table>

</body>
</html>


Merging Table Cells

Series Navigation<< HTML Table: Specifying the width of a column
HTML Table: An example on using rowspan >>