How to combine or merge cells in an HTML table
You can merge two or more table cells in a column using the colspan attribute in a <td> HTML tag (table data). To merge two or more row cells, use the rowspan attribute. On this page, we provide examples and information on using these attributes and show you how they display in the browser.
How to use colspan attribute
In the code below is a table with three rows and three columns. If we wanted to combine the first two cells in the first column, we could use the colspan="2" attribute in the first <td> tag. The number represents how many cells to use (merge) for the <td> tag.
Example HTML table
<table> <tr> <td colspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>
The code above, rendered in a web browser, produces a table similar to the table below. As shown, the first cell spans the width of two columns.
To use all three cells on the top of the table, increase the colspan value to 3 since there are three columns. Increasing the value to 3 gives you a table similar to the example below.
Make sure that when expanding a <td> column, any remaining <td> tags are removed. In the example above, because we are using all three columns, we have only one <td> in the <tr> (table row).
How to use rowspan attribute
In the code below is a table with three rows and three columns. If we wanted to combine the first two cells in the first column into one cell, we could use the rowspan="2" attribute in the first <td> tag. The number represents how many cells to use for the <td> tag.
Example HTML table
<table> <tr> <td rowspan="2"> </td> <td> </td>
<td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>
The code above, rendered in a web browser, produces a table similar to the table below. As shown, the first cell spans the height of two rows.
To use all three cells in the first column, increase the rowspan value to 3 since there are three rows. Increasing the value to 3 gives you a table similar to the example below.
Make sure that when you expand a <td> row, you remove <td> tags from the other <tr> (table rows). In the example above, because we are using all three rows, we have only two <td> tags in the other two <tr> tags.
Using "0" as the number in colspan and rowspan
All modern browsers treat a "0" (zero) in the colspan and rowspan as the maximum rows or columns. For example, instead of counting a table's rows, use rowspan="0" to expand the row to the end of the table.
Using "0" is helpful for big tables and for dynamic tables where the number of rows and columns may change frequently.
Merging cells using a WYSIWYG editor
You can also use the WYSIWYG (what you see is what you get) editor to merge cells. To merge a cell in a WYSIWYG editor, highlight two or more cells, right-click the cells, and choose the option to merge cells. Below are additional steps on doing this in Adobe Dreamweaver and Microsoft Expression Web.
Merging cells using Dreamweaver
- Highlight two or more cells in your table.
- Right-click the highlighted cells.
- Click Table and select Merge Cells.
or
- Highlight two or more cells in your table.
- Press the keyboard shortcut Ctrl+Alt+M.
Merging cells using Expression Web
- Highlight two or more cells in your table.
- Right-click the highlighted cells.
- Click Modify and select Merge Cells.