How to combine or merge cells in an HTML table

Updated: 04/30/2020 by Computer Hope
merge cells with html

You can merge two or more table cells in a column by 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">&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>

The code above, rendered in a web browser, produces a table similar to the table below. As you can see, 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.

 
     
     
Note

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">&nbsp;</td>
  <td>&nbsp;</td>
<td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>

The code above, rendered in a web browser, produces a table similar to the table below. As you can see, 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.

     
   
   
Note

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 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 how to do this in Dreamweaver and Expression Web.

Merging cells using Dreamweaver

  1. Highlight two or more cells in your table.
  2. Right-click on the highlighted cells.
  3. Click Table and then select Merge Cells.

or

  1. Highlight two or more cells in your table.
  2. Press the keyboard shortcut Alt+Ctrl+M.

Merging cells using Expression Web

  1. Highlight two or more cells in your table.
  2. Right-click on the highlighted cells.
  3. Click Modify and then select Merge Cells.

Additional information