Recommended Free Tools
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
HTML has no command that splits one <td> into two independent cells. To create two stacked cells, add a second <tr> and put one cell in each row. Use rowspan="2" on neighboring cells that should continue vertically across both rows.
The simplest working example
<table>
<tr>
<td rowspan="2">One continuous cell</td>
<td>Top cell</td>
</tr>
<tr>
<td>Bottom cell</td>
</tr>
</table>The first column contains one cell spanning two rows. The second column contains two separate cells, one in each row. The two cells are independent: they can contain different data, headers, links, or styles.
rowspan versus colspan
| Attribute | Direction | Effect | Example |
|---|---|---|---|
rowspan |
Vertical | Makes one cell occupy multiple rows | <td rowspan="2"> |
colspan |
Horizontal | Makes one cell occupy multiple columns | <td colspan="2"> |
A useful rule is:
- Want two actual cells stacked vertically? Add another
<tr>. - Want a neighboring cell to remain continuous across both rows? Use
rowspan="2". - Want one cell to become wider across columns? Use
colspan="2".
rowspan does not split the cell it is applied to. It does the opposite: it keeps that one cell merged across rows. See MDN’s table basics guide for the underlying table model.
Example with a combined top area
For a six-column arrangement where columns 1, 2, 5, and 6 continue across two rows, while the middle area is divided below, write the structure like this:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<table class="example">
<tbody>
<tr>
<td rowspan="2">Column 1</td>
<td rowspan="2">Column 2</td>
<td colspan="2">Top area</td>
<td rowspan="2">Column 5</td>
<td rowspan="2">Column 6</td>
</tr>
<tr>
<td>Bottom-left</td>
<td>Bottom-right</td>
</tr>
</tbody>
</table>The first row occupies six column positions: 1 + 1 + 2 + 1 + 1. The second row contains only the two new middle cells because the other four positions are already occupied by cells with rowspan="2". Do not repeat those spanning cells in the second row.
How to build the structure
- Identify the column that needs two stacked cells.
- Add a second
<tr>. - Put the upper cell in the first row and the lower cell in the second row.
- Add
rowspan="2"to every neighboring cell that must cover both rows. - Use
colspanonly for horizontal combinations. - Remove any repeated cells from the second row when their first-row counterparts already span it.
Why cells shift into the wrong columns
Browsers place table cells into a two-dimensional grid, accounting for positions already occupied by rowspan and colspan. A row does not necessarily need the same number of written <td> elements as another row; the occupied grid must instead be complete and non-overlapping. The HTML Standard describes this placement model.
Common mistakes include:
- Repeating a cell in the second row even though it already has
rowspan="2". - Using
colspanwhen the required span is vertical. - Giving a row too many cells for the available grid positions.
- Leaving positions unaccounted for when no row-spanning cell occupies them.
- Allowing a span to cross a
<thead>,<tbody>, or<tfoot>boundary. A cell cannot span slots in multiple row groups.
Temporarily outline the grid while debugging:
table,
td,
th {
border: 1px solid red;
}If you only want one cell to look divided
If the two sections are part of one datum rather than separate table cells, keep one <td> and place block elements inside it:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<td class="split-cell">
<div>Top section</div>
<div>Bottom section</div>
</td>.split-cell > div + div {
border-top: 1px solid #91caff;
margin-top: .5rem;
padding-top: .5rem;
}Use this approach when the division is purely visual, both parts belong to the same table value, and neither part needs its own row or column-header relationship. Changing the CSS height of a cell also does not create a second row; it only changes its appearance.
Tables versus CSS layout
Use an HTML table when the content has genuine row-and-column relationships, such as prices, schedules, reports, or measurements. Do not use table markup merely to position cards, panels, headers, or page regions. The HTML Standard advises against tables as general layout aids because assistive technologies may interpret the resulting structure as data.
For a visual component, CSS Grid is usually clearer:
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
<div class="layout">
<div class="left">Left content</div>
<div class="top">Top area</div>
<div class="bottom">Bottom area</div>
<div class="right">Right content</div>
</div>.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto;
}
.left,
.right {
grid-row: 1 / 3;
}
.top,
.bottom {
grid-column: 2;
}CSS Grid or Flexbox is preferable when responsive rearrangement and independent layout control matter. A nested table is valid when its contents are themselves genuinely tabular, but it adds structural and accessibility complexity and should not be used just to draw a visual divider.
Accessibility considerations
Use semantic headers rather than styling ordinary data cells to look like headers:
Best Value
<table>
<caption>Product details</caption>
<thead>
<tr>
<th id="category" rowspan="2">Category</th>
<th id="details" colspan="2">Details</th>
</tr>
<tr>
<th id="name">Name</th>
<th id="value">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Example</th>
<td headers="details name">Item A</td>
<td headers="details value">10</td>
</tr>
</tbody>
</table>For straightforward tables, use scope="col" or scope="row". For complex spanning headers, give header cells IDs and associate data cells with headers. In a native HTML table, use the native rowspan attribute; do not replace it with aria-rowspan. See MDN’s table element reference and its aria-rowspan guidance.
Quick decision guide
| Requirement | Use |
|---|---|
| Two independent cells stacked vertically | Two <tr> elements |
| Neighboring cell continues through both rows | rowspan="2" |
| One cell covers multiple columns | colspan="2" |
| One datum has two visual sections | Nested block elements inside one <td> |
| Page or component layout | CSS Grid or Flexbox |
If you meant Excel or Google Sheets rather than an HTML table, this is a different operation: HTML’s <tr>, <td>, rowspan, and colspan do not apply.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
