How do you use colspan and rowspan in HTML tables?

html

responsive-design

css

table-structure

byNikita Barsukov·Dec 27, 2024

Horizontally merge cells in a table with colspan, and for vertical merging, use rowspan. This defines the cell's reach across columns or rows.

<table border="1">
  <tr>
    <td rowspan="2">Spans 2*</td>
    <td>Normal cell, move along</td>
  </tr>
  <tr>
    <td colspan="2">Twice the fun!</td>
  </tr>
</table>

*or whatever size you want 😉

Each cell carries weight! Count 'em right to save your table's column structure.

Let's be civilized. Enclose tables within the <table> tag. Use the <thead> and <tbody> tags for sections. For headings, don't be shy with <th> elements. The key to maintaining table structure with rowspan and colspan is the element of surprise... and careful planning!

Playing the architect

Symmetry through dimension

Put on your designer hat, because rowspan and colspan call for visual balance. Define minimum cell dimensions using the CSS properties min-width and min-height.

All eyes on aesthetics

Style merged cells like the masterpieces they are. CSS is your paintbrush here. Padding, borders, or a different background, go wild!

Structure, the magic word

rowspan and colspan aren't just tags, they're a responsibility. With great power comes a need to check for empty rows and ensure that every table cell is labeled clearly with <td> or <th>.

Complexity, bring it on!

Show. Don't hide empty cells

Empty cells need love too! Make them visible with CSS's empty-cells: show;. Or, go rogue with a different background. Emptiness can be chic too!

Nest and rest

Complex tables call for nested merging. Get your practice in to master how colspan and rowspan can cohabit a cell.

Adopt the 2D mindset

Thinking of a table as a two-dimensional array can lift the fog over cell indices. Break down the confusion, one merged cell at a time!

Advanced info and style pointers

Tech-savvy moves up your sleeve

Dive into online references to get an insider look at HTML table elements. Learn with examples!

Style speaks

Take color schemes, consistent cell padding, and other CSS properties for a spin. But remember, balance is key!

Optimizing for smaller screens

Does your table play nice with responsive design? If not, it might be time to re-think the structure or use some <div> voodoo for mobile displays.

explain-codes / Html / How do you use colspan and rowspan in HTML tables?

Linked

Html table tr inside td

Css: how do I create a gap between rows in a table?

How can I truncate table cells, but fit as much as content possible?

Make columns of equal width in ``

How to completely remove borders from HTML table

Setting table row height

Is it valid to use more than one thead or tfoot element in a table?

Playing the architect Complexity, bring it on!Advanced info and style pointers

Linked

Html table tr inside td

Css: how do I create a gap between rows in a table?

How can I truncate table cells, but fit as much as content possible?

Make columns of equal width in ``

How to completely remove borders from HTML table

Setting table row height

Is it valid to use more than one thead or tfoot element in a table?

Was this article helpful?

Was this article helpful?