The rowspan attribute
The rowspan attribute controls the spanning of rows in an HTML table. Applies to the th and td tags.
Accepted value: integer starting from 1.
How to use: add this attribute to any cell td or th. If, for example, you set rowspan to 2, then the cell to which you set this will take up two rows along the height of the table. At the same time, the cells from the row below will not go anywhere, our expanded cell will displace them and the table will fall apart. To prevent this from happening, you need to delete one of the cells from the row below. See the examples for a better understanding.
Example . Table without joins
Let's look at the table without joins that we'll be working with next:
<table>
<tr>
<td>cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
<tr>
<td>cell7</td>
<td>cell8</td>
<td>cell9</td>
</tr>
</table>
table, td, th {
border: 1px solid black;
}
:
Example . Let's expand the cell into two rows
Now let's expand the 1 cell across two rows by giving it a rowspan attribute of 2. We'll see that it pushes out the cells in the row below it, and the table falls apart:
<table>
<tr>
<td rowspan="2">cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
<tr>
<td>cell7</td>
<td>cell8</td>
<td>cell9</td>
</tr>
</table>
table, td, th {
border: 1px solid black;
}
:
Example . Let's expand the cell without breaking the table
To fix the problem with the table falling apart from the previous example, let's try deleting one of the cells from the second row (and it doesn't have to be cell 4, which is directly below our cell 1, you can delete any cell, we'll delete the cell with the number 5):
<table>
<tr>
<td rowspan="2">cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell6</td>
</tr>
<tr>
<td>cell7</td>
<td>cell8</td>
<td>cell9</td>
</tr>
</table>
table, td, th {
border: 1px solid black;
}
:
Example . Expand the cell by 3 rows
And here let's expand our cell not by two rows, but by 3, let's set its rowspan to 3. At the same time, let's delete one of the cells from the third row (cell 7, 8 or 9 - it doesn't matter) so that the table doesn't fall apart:
<table>
<tr>
<td rowspan="3">cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell6</td>
</tr>
<tr>
<td>cell7</td>
<td>cell9</td>
</tr>
</table>
table, td, th {
border: 1px solid black;
}
:
Example . Let's expand by another 2 columns
Let's also expand the 2 cell by 2 columns in addition to the first cell. To do this, add colspan to the 2 cell in the value 2. At the same time, delete the 3 cell so that the table doesn't fall apart:
<table>
<tr>
<td rowspan="3">cell1</td>
<td colspan="2">cell2</td>
</tr>
<tr>
<td>cell4</td>
<td>cell6</td>
</tr>
<tr>
<td>cell7</td>
<td>cell9</td>
</tr>
</table>
table, td, th {
border: 1px solid black;
}
:
See also
-
attribute
colspan,
which combines the columns of a table
