Creating a Table with Cells that Span Multiple Columns or Multiple Rows
You learned how to use the start and end table heading tags (<th></th>) and start and end table data tags (<td></td>) to create cells in a table. You also learned how to set the width and height attributes in a <th> tag or a <td> tag to specify a cell’s dimensions. If you define the cells in a table without using the cellspan attribute or the rowspan attribute, all cells in a row will have the same height, and all cells in a column will have the same width.
Sometimes, however, you want cells that span multiple rows and/or multiple columns. HTML provides two attributes (colspan and rowspan) you can use to specify the width and/or height of a cell as a number of columns and/or rows of adjacent cells.
To specify a cell that spans multiple rows set the rowspan attribute in the cell’s <td> tag or <th> tag. For the current example, in which the cell spans two rows, you would write the cell’s definition as follows:
<td rowspan="2">Row 1 & 2, Col 1</td>
If the cell spanned three rows, you would set the value of the rowspan attribute to “3”, and so on. One important thing to remember is that if you set the rowspan attribute for a cell to “2”, you must type one less set of <td></td> tags between the next set of start and end table row tags (<tr></tr>) in the table definition, because the “next” row has one less column. For example, row 2 in the following 3-row, 2-column table has only one set of start and end table data tags (<td></td>) because the first cell from row 1 extends into the second row:
<table>
<tr><td rowspan=2>r1&2,c1</td><td>r1,c2</td></tr>
<tr><!--- no cell needed --> <td>r2,c2</td></tr>
<tr><td>r3,c1</td> <td>r3,c2</td></tr>
</table>
Similarly, if you want to create a cell that spans multiple columns set the colspan attribute in the cell’s <td> tag or <th> tag. For the current example, in which the cell spans two columns, you would write the cell’s definition as follows:
<td colspan="2">Row 4, Col 2 & 3</td>
If the cell spanned three columns, you would set the value of the colspan attribute to “3”, and so on. Remember, if you set the colspan attribute for a cell to “2”, you must type one less set of <td></td> tags or <td></td> tags between the start and end table row tags (<tr></tr>) for the current row, because the row has one less than the normal number of cells (or columns). For example, row 2 in the following 3-row, 3-column table has only two sets of start and end table data tags (<td></td>) because the first cell in the row is two cells wide:
<table>
<tr><td>r1,c1</td><td>r1,c2</td><td>r1,c3</td></tr>
<tr><td colspan=2>r2,c1&2</td> <td>r2,c2</td></tr>
<tr><td>r3,c1</td><td>r3,c2</td><td>r3,c3</td></tr>
</table>
Finally, you can create a cell that spans both multiple rows and multiple columns by setting both the rowspan and colspan attributes in the cell’s <td> tag or <th> tag. For the current example, in which the cell spans two rows and two columns, you would write the cell’s definition as follows:
<td rowspan="2" colspan="2">Row 1 & 2, Col 3 & 4</td>
Perhaps the easiest way to lay out a table with cells that span multiple columns and/or rows is to draw the table on paper and then type its definition into your text editor. If you add descriptive text you can easily correct errors in the table’s definition. (One such error that numbering the cells will let you find and easily correct is typing too many sets of <td></td> tags between the start and end table row tags [<tr></tr>] for the row below the one in which you created a cell that spans two rows).