You can merge two or more table cells in a column using the colspan attribute in aHTML 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 firsttag. The number represents how many cells to use (merge) for thetag.

  • How to use colspan attribute.
  • How to use rowspan attribute.
  • Using “0” as the number in colspan and rowspan.
  • Merging cells using a WYSIWYG editor.

Example HTML 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.

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 firsttag. The number represents how many cells to use for thetag.

Make sure that when expanding acolumn, any remainingtags are removed. In the example above, because we are using all three columns, we have only onein the(table row).

   
  
   

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.

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.

Make sure that when you expand arow, you removetags from the other(table rows). In the example above, because we are using all three rows, we have only twotags in the other twotags.

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 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 then select Merge Cells.

or

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

Merging cells using Expression Web

  • Highlight two or more cells in your table.
  • Right-click the highlighted cells.
  • Click Modify and then select Merge Cells.
  • See our table, tr, and td tag definitions for further information and related links.
  • HTML and web design help and support.