Creating Irregular Tables with colspan and rowspan
To span multiple rows, use the rowspan attribute. rowspan specifies the number of rows to span.
To span multiple columns, you use the colspan attribute. The values assigned to the rowspan and colspan must be integers. You apply the colspan and rowspan attributes to the cell that is the uppermost and leftmost of the part of the grid. You omit the td or tr elements that you would have included normally.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
td {border: thin solid black; padding: 5px; font-size:x-large};
</style>
</head>
<body>
<table>
<tr>
<td>1</td><td rowspan="3">2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>6</td>
</tr>
<tr>
<td>7</td><td>9</td>
</tr>
</table>
</body>
</html>
Another example with both colspan and rowspan:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
[colspan], [rowspan] {font-weight:bold; border: medium solid black}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>A</th><th>B</th><th>C</th><th colspan="2">D</th>
</tr>
</thead>
<tbody>
<tr>
<th>A:</th><td>B</td><td>C</td><td>D</td><td>E</td>
</tr>
<tr>
<th>2</th><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<th>7</th><td>8</td><td colspan="2" rowspan="2">9</td><td>10</td>
</tr>
<tr>
<th rowspan="2">11</th><td>12</td><td rowspan="2">13</td>
</tr>
<tr>
<td>Z</td><td>X</td> <td>Y</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">Line line line</th>
</tr>
</tfoot>
</table>
</body>
</html>