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
65 40 20
Men Women Men Women Men Women
82 85 78 82 77 81

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) 100 1.15 115.00
Paper (Case) 10 45.99 459.90
Wastepaper Baskets 2 17.99 35.98
Subtotal 610.88
Tax 7% 42.76
Total 653.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>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
Bob Alice
Favorite Color Blue Purple
Flavor Banana Chocolate
Least
Favorite
Color Yellow Pink
Flavor Mint Walnut

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>