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:Two-Row Table

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 border="1" width="100%">
<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 ----

Code Explanation

Spanning rows works in the same way:Two-Row Table Column Spanned

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 border="1" width="100%">
<tr>
	<td>a</td>
	<td rowspan="2">b</td>
	<td>c</td>
</tr>
<tr>
	<td>d</td>
	<td>e</td>
</tr>
</table>
---- C O D E   O M I T T E D ----

Next