To span cell to multiple columns, you use the colspan
attribute.
The values assigned to the colspan
must be integers.
You also have to remove the cell elements that the expanded cell will cover.
<!DOCTYPE HTML>
<html>
<head>
</head><!--from w ww . ja va 2 s. c o m-->
<body>
<table border='1'>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>2nd Favorite:</th>
<td>HTML</td>
<td>HTML</td>
<td>Oracle</td>
<td>MySQL</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>XML</td>
<td colspan="2" rowspan="2">This is a test.</td>
<td>203</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 java2s.com Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
To span cell to multiple rows, you can use the rowspan
attribute.
The value you assign to this attribute is the number of rows to span.
The values assigned to the rowspan
must be integers.
If you want one cell in the middle column to span all three rows,
you apply the rowspan
attribute to cell 2.
You also have to remove the cell elements that the expanded cell will cover.
The following code expands a Cell to Cover Multiple Rows.
<!DOCTYPE HTML>
<html>
<head>
<style>
td {<!--from w w w . java2 s .c o m-->
border: thin solid black;
padding: 5px;
font-size: x-large
}
</style>
</head>
<body>
<table border='1'>
<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>