HTML Tables - Spanning More than One Row or Column
(Page 3 of 7 )
It's possible to span data across more than one row or column. The code below shows how to do so:
<html>
<body>
<h2>Creating a Cell that Spans Two Columns:</h2>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Sons</th>
<th colspan="3">Daughters</th>
</tr>
<tr>
<td>Bruce Lee</td>
<td>Ug Lee</td>
<td>Brandon Lee</td>
<td>Sara</td>
<td>Tara</td>
<td>Farrah</td>
</tr>
</table>
<h2>Creating a Cell that Spans Two Rows:</h2>
<table border="1">
<tr>
<th>Name:</th>
<td>Bruce Lee</td>
</tr>
<tr>
<th rowspan="2">Sons:</th>
<td>Ug Lee</td>
</tr>
<tr>
<td>Brandon Lee</td>
</tr>
</table>
</body>
</html>
This is how the code will appear on the users browser:
Creating a Cell that Spans Two Columns:
Name | Sons | Daughters |
|---|
Bruce Lee | Ug Lee | Brandon Lee | Sara | Tara | Farrah |
Creating a Cell that Spans Two Rows:
Name: | Bruce Lee |
|---|
Sons: | Ug Lee |
|---|
Brandon Lee |
Next: Using Tags Inside of Tables >>
More HTML Articles
More By James Payne
