Table Rowspan And Colspan In HTML Explained (With Examples)

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>

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>

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>

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 Wood

Adam is a technical writer who specializes in developer documentation and tutorials.