Table Rowspan And Colspan In HTML Explained (With Examples)

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Display
inline
Attribute of
<th> — table header — A header cell in a <table>.
<td> — table data — A data cell in a <table>.
What does colspan= do?
Allows a single table cell to span the width of more than one cell or column.
What does rowspan= do?
Allows a single table cell to span the height of more than one cell or row.
Why use colspan= or rowspan=?
Sometimes it makes sense for a cell to span multiple columns or multiple rows. This might be used for a header cell that titles a group of columns, or a side-bar that groups rows of entries.

Both colspan= and rowspan= are attributes of the two table-cell elements, <th> and <td>. They provide the same functionality as “merge cell” in spreadsheet programs like Excel.

The value of either attribute must be a positive integer (a whole number). The value specifies the number of columns or rows that the cell fills.

colspan= — Code Examples

Using colspan= for multi-column headings

<table>
 <caption>Life Expectancy By Current Age</caption>
 <tr>
  <th colspan="2">65</th>
  <th colspan="2">40</th>
  <th colspan="2">20</th>
 </tr>
 <tr>
  <th>Men</th>
  <th>Women</th>
  <th>Men</th>
  <th>Women</th>
  <th>Men</th>
  <th>Women</th>
 </tr>
 <tr>
  <td>82</td>
  <td>85</td>
  <td>78</td>
  <td>82</td>
  <td>77</td>
  <td>81</td>
 </tr>
</table>
Life Expectancy By Current Age
654020
MenWomenMenWomenMenWomen
828578827781

Using colspan= for single-row titling


<table>
 <caption>Invoice</caption>
 <tr>
  <th>Item / Desc.</th>
  <th>Qty.</th>
  <th>@</th>
  <th>Price</th>
 </tr>
 <tr>
  <td>Paperclips (Box)</td>
  <td>100</td>
  <td>1.15</td>
  <td>115.00</td>
 </tr>
 <tr>
  <td>Paper (Case)</td>
  <td>10</td>
  <td>45.99</td>
  <td>459.90</td>
 </tr>
 <tr>
  <td>Wastepaper Baskets</td>
  <td>2</td>
  <td>17.99</td>
  <td>35.98</td>
 </tr>
 <tr>
  <th colspan="3">Subtotal</th>
  <td>610.88</td>
 </tr>
 <tr>
  <th colspan="2">Tax</th>
  <td>7%</td>
  <td>42.76</td>
 </tr>
 <tr>
  <th colspan="3">Total</th>
  <td>653.64</td>
 </tr>
</table>

Invoice
Item / Desc.Qty.@Price
Paperclips (Box)1001.15115.00
Paper (Case)1045.99459.90
Wastepaper Baskets217.9935.98
Subtotal610.88
Tax7%42.76
Total653.64

rowspan= — Code Example

<table>
 <caption>Favorite and Least Favorite Things</caption>
 <tr>
  <th></th><th></th>
  <th>Bob</th>
  <th>Alice</th>
 </tr>
 <tr>
  <th rowspan="2">Favorite</th>
  <th>Color</th>
  <td>Blue</td>
  <td>Purple</td>
 </tr>
 <tr>
  <th>Flavor</th>
  <td>Banana</td>
  <td>Chocolate</td>
 </tr>
 <tr>
  <th rowspan="2">Least Favorite</th>
  <th>Color</th>
  <td>Yellow</td>
  <td>Pink</td>
 </tr>
 <tr>
  <th>Flavor</th>
  <td>Mint</td>
  <td>Walnut</td>
 </tr>
</table>
Favorite and Least Favorite Things
BobAlice
FavoriteColorBluePurple
FlavorBananaChocolate
Least
Favorite
ColorYellowPink
FlavorMintWalnut

Browser Support for colspan= and rowspan=

All browsers support both elements.

Reasons not to use colspan= or rowspan=

In the past, it was common to use <table> elements to arrange the payout of a web page. Both colspan= and rowspan= attributes were often used to create table cells of various configurations.

This kind of table-based layout is strongly discouraged today.

Related to colspan= and rowspan=

Tags
<th>
<tr>
Other attributes of <th>
scope=
abbr=
headers=
sorted=
Other attributes of <td>
headers=
See also
<table>
Adam is a technical writer who specializes in developer documentation and tutorials.