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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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> |
