Merge HTML Table Cells Vertically with Rowspan
Define high table cells that span two or more rows using the colspan attribute. Similarly to the colspan attribute, we can assign this HTML tag attribute to th header and td cell tags in the body and footer.
Syntax
<th rowspan="3"> </th>
<td rowspan="3"> </td>
Rowspan has to be a number, greater than the default 1, that shows how many rows spans the cell towards the bottom.
Rowspan Examples
<table> <thead> <tr> <th>A head</th> <th rowspan="2">B head</th> </tr> <tr> <th>C head</th> </tr> </thead> <tbody> <tr> <td rowspan="2">X</td> <td>Y</td> </tr> <tr> <td>Z</td> </tr> </tbody> </table>
| A head | B head |
|---|---|
| C head | |
| X | Y |
| Z |
A table with 2 header and 2 tbody rows with two enlarged cells.
<table> <thead> <tr> <th>⏰</th><th>Jeff</th> <th>Elon</th><th>Bill</th> <th>Warren</th> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan="5">1-5</td> <td rowspan="3">1-3</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td rowspan="3">2-4</td> <td>2</td> </tr> <tr> <td>3</td> <td rowspan="3">3-5</td> </tr> <tr> <td>4</td><td>4</td> </tr> <tr> <td>5</td><td>5</td><td>5</td> </tr> </tbody> </table>
| ⏰ | Elon | Jeff | Bill | Warren |
|---|---|---|---|---|
| 1 | 1-5 | 1-3 | 1 | 1 |
| 2 | 2-4 | 2 | ||
| 3 | 3-5 | |||
| 4 | 4 | |||
| 5 | 5 | 5 |
A timetable visualizing work shifts with highlighted and enlarged cells.
Adding Rowspan To An Existing Table
Most visual HTML table generators don't support setting the rowspan easily. Usually you need to create the code for a plain X×Y table, then using some WYSIWYG HTML editor, you have to manually add the rowspan attribute, and remove the unwanted cells that are pushed out by the enlarged cell.
Warning thrown by W3 HTML Validator for incorrect rowspan declaration.
Dealing with rowspans is a little harder than adding colspans because increasing a colspan you just have to delete the next cell(s) in the same row. Adding rowspan however you need to calculate exactly which cell has to be removed in the next row.
Adding rowspan="2" to the E cell pushes out the I cell which has to be removed.
<table> <tr> <td>A</td><td>B</td><td>C</td> </tr> <tr> <td>D</td> <td rowspan="2">E</td> <td>F</td> </tr> <tr> <td>G</td> <td>H</td> <td class="brick">I</td> </tr> <tr> <td>J</td><td>K</td><td>L</td> </tr> </table>
Which cell has to be removed exactly?
When we set the rowspan of a cell to 2, we have to delete a cell in the next row (demonstrated above)
When we set the rowspan of a cell to 3, we have to delete a cell in 2 rows below.
<table> <tr> <td>A</td><td>B</td><td>C</td> </tr> <tr> <td>D</td> <td rowspan="3">E</td> <td>F</td> </tr> <tr> <td>G</td> <td>H</td> <td class="brick">I</td> </tr> <tr> <td>J</td><td>K</td> <td class="brick">L</td> </tr> </table>
Rowspan in the last row of the table
Increasing the rowspan of a table cell in the last row would push the bottom of the table down, making the cell to stick out. Doing this is incorrect and the W3 Validator throws the following error.
<table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td rowspan="2">C</td> <td>D</td> </tr> </table>
Colspan and Rowspan For Table Cells
Rowspan is used to extend a cell to the bottom. We can also use the colspan attribute to spread out to the right. You can combine the rowspan and colspan to create complex tables. Learn more about colspan on its dedicated page.
<table> <tbody> <tr> <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td> </tr> <tr> <td>F</td> <td colspan="3" class="brick">Colspan=3</td> <td>G</td> </tr> <tr> <td>G</td> <td rowspan="3" class="brick">Row<br>span<br>=3</td> <td>H</td><td>I</td><td>J</td> </tr> <tr> <td>K</td><td>L</td><td>M</td><td>N</td> </tr> <tr> <td>O</td><td>P</td><td>Q</td><td>R</td> </tr> <tr> <td>S</td><td>T</td><td>U</td><td>W</td> </tr> </tbody> </table>
| A | B | C | D | E |
| F | Colspan=3 | G | ||
| G | Row span =3 |
H | I | J |
| K | L | M | N | |
| O | P | Q | R | |
| S | T | U | W | |
A 5×6 table with two separate cells spanning 3 widths horizontally and vertically.
Assigning both rowspan and colspan to the same cell will extend it both vertically and horizontally. The exemple below will create a 2×2 cell.
<table> <tr> <td>A</td><td>B</td> <td>C</td><td>D</td> </tr> <tr> <td>E</td> <td colspan="2" rowspan="2" class="brick"> 2x2 </td> <td>F</td> </tr> <tr> <td>G</td><td>H</td> </tr> <tr> <td>I</td><td>J</td> <td>K</td><td>L</td> </tr> </table>
| A | B | C | D |
| E | 2x2 | F | |
| G | H | ||
| I | J | K | L |
Colspan For Div Tables
HTML tables can be replaced by structured <div> tags. Unfortunately we can't just simply add rowspan="x" to a Div table cell. Rowspan and colspan attributes can be added to td and th cells only.
The best way to extend table cells in a div table is to use nested tables, but each case might be different. We are going to present an increased colspan in a div table through an example.
Let's say we have a 3×3 div table, where we need to push the highlighted E cell to the bottom to annex it to the H cell.
<div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell">A</div> <div class="divTableCell">B</div> <div class="divTableCell">C</div> </div> <div class="divTableRow"> <div class="divTableCell">D</div> <div class="divTableCell brick">E</div> <div class="divTableCell">F</div> </div> <div class="divTableRow"> <div class="divTableCell">G</div> <div class="divTableCell">H</div> <div class="divTableCell">I</div> </div> </div> </div>
<div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell">A</div> <div class="divTableCell">B</div> <div class="divTableCell">C</div> </div> <div class="divTableRow"> <div class="divTableCell">D<br>G</div> <div class="divTableCell brick">E<br>H</div> <div class="divTableCell">F<br>I</div> </div> </div> </div>
G
H
I
Next, we add 1×2 small tables in the cells that share the same row with the hightlighted tall cell.
There's a small gap (2px) between the cells and the nested tables. Reducing this padding in the cells containing the smaller tables will make it invisible that there are in fact tables in the table.
<div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell">A</div> <div class="divTableCell">B</div> <div class="divTableCell">C</div> </div> <div class="divTableRow"> <div class="divTableCell"> <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell">D</div> </div> <div class="divTableRow"> <div class="divTableCell">G</div> </div> </div> </div> </div> <div class="divTableCell brick">E<br>H</div> <div class="divTableCell"> <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell">F</div> </div> <div class="divTableRow"> <div class="divTableCell">I</div> </div> </div> </div> </div> </div> </div> </div>
H
Using nested tables we can set rowspan in div tables using a similar strategy.
Rowspan Generator Online
The online HTML table generator is the best tool to create markup with just a couple of clicks. Unfortunately, there's no option to assign rowspan attributes to the tags. You will need to set them manually in the source editor adding rowspan="x" to a cell. Finally, you'll have to remove the outstanding cells from the source that have been pushed out by the enlarged cell. Learn how to remove pushed out cells under the Adding Rowspan To An Existing Table subtitle.
