Table Cells 1 - Space and Alignment

<table cellpadding="pixels" cellspacing="pixels"> ...</table> <td align="position" valign="position"> ...</td>

Padding around cell content Spacing in between table cells Horizontal alignment of cell content Vertical alignment of cell content

A fine degree of control over the display of tables can be attained by applying certain attributes which not only affect the table as a whole but specifically affect the table cells, either collectively or individually. These attributes define how cells are arranged with respect to one another, the amount of blank space that wraps around cell content and the alignment of cell content.

The cellspacing and cellpadding attributes are used in the <table> tag and apply to all cells in the respective table. The align and valign attributes are used in individual <td> tags and apply respectively to that particular table data cell.

All these attributes are described in more detail below:

• cellpadding="length in pixels" ~ The cellpadding attribute, used in the <table> tag, specifies how much blank space to display in between the content of each table cell and its respective border. The value is defined as a length in pixels. Hence, a cellpadding="10" attribute-value pair will display 10 pixels of blank space on all four sides of the content of each cell in that table. (See Example 1)
• cellspacing="length in pixels" ~ The cellspacing attribute, also used in the <table> tag, defines how much blank space to display in between adjacent table cells and in between table cells and the table border. The value is defined as a length in pixels. Hence, a cellspacing="10" attribute-value pair will horizontally and vertically separate all adjacent cells in the respective table by a length of 10 pixels. It will also offset all cells from the table's frame on all four sides by a length of 10 pixels.
  
  Example 1 clearly illustrates the difference between cellpadding and cellspacing:
  
  
  
  Example 1 - (cellpadding="10" cellspacing="10")
  
  
  
  Example 1 - Legend
  
  
   
  Cell content
  
  
   
  Cellpadding
  
  
  .....
  Cell border
  
  
   
  Cellspacing
  
  
   
   
  Table border
  
  
  
• align="left, center or right" ~ When the align attribute is used in a <td> tag as opposed to a <table> tag, it produces a slightly different effect. When used in a <td> tag, the align attribute will set the horizontal alignment of that respective cell's content. The value can be left, right, center or justify. (Please see Aligning Text for a full description of the resulting effects.)
• valign="top, middle, or bottom" ~ The valign attribute can be used in a <td> tag to set the vertical alignment of that respective cell's content. The values that can be used are top, middle, or bottom and will produce the following effects respectively:
  
  
  • top ~ The content is aligned flush with the top of the table cell (taking cellpadding into consideration).
  • middle ~ The content is aligned in the vertical center of the table cell (default value).
  • bottom ~ The content is aligned flush with the bottom of the table cell (taking cellpadding into consideration).
  
  
  Example 2A - SOURCE CODE (Default vertical alignment)
  
  <table border="3" bordercolor="#c86260" bgcolor="#ffffcc" width="50%" cellspacing="2" cellpadding="3">

  <tr><td><b>Breakfast</b></td><td>Orange juice<br>Toast<br>Black coffee</td></tr>
<tr><td><b>Lunch</b></td><td>Tuna sandwich<br>Apple</td></tr>
<tr><td><b>Dinner</b></td><td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td></tr>

  </table>
  
  
  
  Example 2A - RESULT (Default vertical alignment)

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

  
  
  
  Example 2B - SOURCE CODE (valign="top" set for left-hand cells)
  
  <table border="3" bordercolor="#c86260" bgcolor="#ffffcc" width="50%" cellspacing="2" cellpadding="3">

  <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 2B - RESULT (valign="top" set for left-hand cells)

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

  
  

Even more control can be established over the display of your table cells by defining how many rows or columns each table cell will spread over or span...

<~BACK

TOP

NEXT~>