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 moreDisplayinlineAttribute 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.

Contents

• 1 colspan= — Code Examples
  • 1.1 Using colspan= for multi-column headings
  • 1.2 Using colspan= for single-row titling
• 2 rowspan= — Code Example
• 3 Browser Support for colspan= and rowspan=
• 4 Reasons not to use colspan= or rowspan=
• 5 Related to colspan= and rowspan=

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 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

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>Adam WoodAdam is a technical writer who specializes in developer documentation and tutorials.