Use Of Colspan And Rowspan In Tables Html

Colspan

Colspan is an attribute of TD or TH tags used to make data cells and header cells in an HTML table. We can use Colspan to expand / span a cell on many columns. For example, in the following table, the first header cell spans two columns, so here we use <th colspan="2">Marks</th> to get the required result in the displayed html table.
Marks | |
---|---|
Maths | Computer |
100 | 87 |
<table border="1">
<tr> <th colspan="2">Marks</th> </tr>
<tr> <th>Maths</th><th>Computer</th></tr>
<tr> <td>100</td><td>87</td> </tr>
</table>
Rowspan
Rowspan attribute is used to expand or span a cell to multiple rows. For example, in the following table example, the first TH cell (Marks) spans on two rows. We use <th rowspan="2">Marks</th> for this purpose.Marks | Maths | Computer |
---|---|---|
100 | 87 |
The complete HTML coding of the table is as follows:
<table border="1">
<tr> <th rowspan="2">Marks</th>
<th>Maths</th><th>Computer</th></tr>
<tr><td>100</td><td>87</td></tr>
</table>
