Table Cells 2 - Row and Column Span

<td colspan="columns" rowspan="rows"> ...</td>

Defines how many columns cell will span Defines how many rows cell will span

When constructing an HTML table, the number of rows are established by the number of <tr>...</tr> tag pairs while the number of columns are established by the number of <td>...</td> tag pairs in each row. Typically, the table will be layed out like a grid with each cell's width equal to the width of one column and each cell's height equal to the height of one row. You may, however, have any cell spread over or 'span' the width of multiple rows or columns using special attributes in the <td> tag.

These attributes are described in more detail below:

• colspan="number of columns" ~ By default, the number of columns in a table is defined by the number of table data cells appearing in the table row that contains the most. You would, however, typically place the same number of data cells in each and every table row. If a table row does not contain the requisite number of table cells then it will essentially be in 'error' and will be displayed with a missing cell.
  
  In Example 1A, the first row only contains one table cell whereas all the other rows contain two. Hence the table is defined as having two columns and the first row is displayed with its second cell missing. Let's blow apart the source code so that the table rows are clearly discernable:
  
  
  Example 1A - SOURCE CODE (first table row contains only one cell)
  
  <table border="3" bordercolor="#c86260" bgcolor="#ffffcc" width="50%" cellspacing="5" cellpadding="3">
  
  

  <tr><td>MY DAILY MENU</td></tr>

<tr><td valign="top"><b>Breakfast</b></td><td>Orange juice<br>Toast<br>Black coffee</td></tr>

<tr><td valign="top"><b>Lunch</b></td><td>Tuna sandwich<br>Apple</td></tr>

<tr><td valign="top"><b>Dinner</b></td><td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td></tr>

  
  </table>
  
  
  
  
  Example 1A - RESULT (first table row contains only one cell)

  MY DAILY MENU
  Breakfast	Orange juice Toast Black coffee
  Lunch	Tuna sandwich Apple
  Dinner	Hamburger steak Mashed potatoes Green beans Jello

  <~Missing table cell
  
  
  This situation can be remedied using the colspan attribute whose value defines how many columns a table cell will span. Hence, a <td> tag using a colspan="2" attribute-value pair will specify that that particular cell will stretch over the equivalent of two columns worth of space:
  
  
  Example 1B - SOURCE CODE (cell spans two columns)
  
  <table border="3" bordercolor="#c86260" bgcolor="#ffffcc" width="50%" cellspacing="5" cellpadding="3">
  
  

  <tr><td align="center" colspan="2">MY DAILY MENU</td></tr>

<tr><td valign="top"><b>Breakfast</b></td><td>Orange juice<br>Toast<br>Black coffee</td></tr>

<tr><td valign="top"><b>Lunch</b></td><td>Tuna sandwich<br>Apple</td></tr>

<tr><td valign="top"><b>Dinner</b></td><td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td></tr>

  
  </table>
  
  
  
  
  Example 1B - RESULT (cell spans two columns)

  MY DAILY MENU
  Breakfast	Orange juice Toast Black coffee
  Lunch	Tuna sandwich Apple
  Dinner	Hamburger steak Mashed potatoes Green beans Jello

  
  Note that, as well as using colspan="2" in the 'MY DAILY MENU' table cell to make it span two columns, we also used align="center" to center the content.
  
  
  
• rowspan="number of rows" ~ The rowspan attribute works just like the colspan attribute except that you may find the situation a little more difficult to visualize when working with the source code. But once again the principle is the same. By using the rowspan attribute, you can force a table cell to span the number of rows specified by the respective value.
  
  In the following example, the 'MONDAY' table cell spreads over three table rows:
  
  
  Example 2 - SOURCE CODE (cell spans three rows)
  
  <table border="3" bordercolor="#c86260" bgcolor="#ffffcc" width="50%" cellspacing="5" cellpadding="3">
  
  

  <tr><td align="center" colspan="3">MY DAILY MENU</td></tr>

<!-- FIRST CELL IN THIS ROW SPANS THE NEXT 3 ROWS --> <tr><td rowspan="3">M<br>o<br>n<br>d<br>a<br>y</td><td valign="top"><b>Breakfast</b></td><td>Orange juice<br>Toast<br>Black coffee</td></tr>

<tr><td valign="top"><b>Lunch</b></td><td>Tuna sandwich<br>Apple</td></tr>

<tr><td valign="top"><b>Dinner</b></td><td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td></tr>

  
  </table>
  
  
  
  
  Example 2 - RESULT (cell spans three rows)

  MY DAILY MENU
  M o n d a y	Breakfast	Orange juice Toast Black coffee
  	Lunch	Tuna sandwich Apple
  	Dinner	Hamburger steak Mashed potatoes Green beans Jello

  
  

The width and height of all the cells in your HTML table is automatically set by the web browser displaying the page according to how much content is in each cell. You can, however, explicitly set how wide and how high to display your table data cells...

<~BACK

TOP

NEXT ~>