Merging Cells

Contact Us or call 1-877-932-8228
Merging Cells

Merging Cells

In HTML tables, all table rows must span the same number of columns and all table columns must span the same number of rows. To illustrate, take the following table, which has two rows:Table with Two Rows

Note that the second table row has only two cells; however, it spans all three columns. In HTML, this is accomplished by adding a colspan attribute to any table cell that spans more than one column. The following code would create a table like the one above:

Code Sample:

Tables/Demos/MergingCols.html
---- C O D E   O M I T T E D ----
<table>
<tr>
	<td>a</td>
	<td>b</td>
	<td>c</td>
</tr>
<tr>
	<td>d</td>
	<td colspan="2">e</td>
</tr>
</table>
---- C O D E   O M I T T E D ----

Spanning rows works in the same way:Table Row Span

Note that the second table column has only one cell; however, it spans both rows. This is accomplished with the rowspan attribute as shown in the code below:

Code Sample:

Tables/Demos/MergingRows.html
---- C O D E   O M I T T E D ----
<table>
<tr>
	<td>a</td>
	<td rowspan="2">b</td>
	<td>c</td>
</tr>
<tr>
	<td>c</td>
	<td>e</td>
</tr>
</table>
---- C O D E   O M I T T E D ----

We have added the deprecated border and width attributes to the table tag to make the merged cells more visible; however, we don't recommend you use those attributes in practice. Again, it's better to learn to use CSS.

Next