Sample Tables

• 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 usedalign="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><tdrowspan="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

  
  

• Background and Border Color

   

  <table border="number in pixels" bordercolor="color" bordercolorlight="color" bordercolordark="color" bgcolor="color"> ...</table>

  Width of table border Table border color Top/left side border color Bottom/right side border color Background color

  You are not obliged to settle for the default color used by web browsers to draw the borders of your HTML tables. Using various attributes in the<table> tag, you can specify your table's border color and even create a simple 3D effect. You can also define your table's background color. These attributes are detailed below:
  
  
  
  • border="width in pixels" ~ To recap from the previous page, you can use the border attribute to specify the width of your table's border in pixels. The number of pixels desired for the width is used as the value.
  • bordercolor="color definition*" ~ The bordercolor attribute can be used to define the color of your table's border. You may use anylegal color definition as the value. The final effect on your web page will vary from browser to browser. Internet Explorer will use your selected color to display one solid colored frame around your table. Gecko-based browsers, such as Firefox, will create a 3D lighting effect using a light version of your color on the top and left sides and a dark version of your color on the bottom and right sides.
  • bordercolorlight="color definition*" ~ Thebordercolorlight attribute can be used to define the border color on the top and left sides of your table. Although any legal color definition can be used as the value, the intent is to allow web authors to specify light colors in order to create a 3D lighting effect on your table's border. (This attribute is not supported in Netscape or Mozilla since thebordercolor attribute already accomodates the resulting effect.)
  • bordercolordark="color definition*" ~ Thebordercolordark attribute can be used to define the border color on the bottom and right sides of your table. Although any legal color definition can be used as the value, the intent is to allow web authors to specify dark colors in order to create a 3D lighting effect on your table's border. (This attribute is not supported in Netscape or Mozilla since thebordercolor attribute already accomodates the resulting effect.)
  • bgcolor="color definition*" ~ Using the bgcolor attribute, you can specify the background color of your table which includes the background in between table cells and background inside table cells. You may use any legal color definition as the value.
    
    A background color may also be applied to an individual table data cell by using the bgcolor attribute in the <td> tag. The selected background color will thus only apply to that particular cell.
    
    *(Please see Font Color for a description of all legal color definitions.)
  
  
  Example 1 - SOURCE CODE
  
  <table border="5" bordercolor="maroon" bgcolor="silver">
   <tr><td>Cell content...</td><td>Cell content...</td></tr>
   <tr><td>Cell content...</td><td>Cell content...</td></tr>
   <tr><td>Cell content...</td><td>Cell content...</td></tr>
</table>
  
  
  
  Example 1 - RESULT

  Cell content...	Cell content...
  Cell content...	Cell content...
  Cell content...	Cell content...

  
  
  
  
  Example 2 - SOURCE CODE
  
  <table border="5" bordercolor="#8080cc" bordercolorlight="#8080c0" bordercolordark="#400080" bgcolor="#ffffcc">
   <tr><td>Cell content...</td><td>Cell content...</td></tr>
   <tr><td>Cell content...</td><td>Cell content...</td></tr>
   <tr><td>Cell content...</td><td>Cell content...</td></tr>
</table>
  
  
  
  Example 2 - RESULT

  Cell content...	Cell content...
  Cell content...	Cell content...
  Cell content...	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 valignattributes 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 displayin 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, acellspacing="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

<td  width="pixels or percentage" height="pixels or percentage"> ...</td>

Web browsers will automatically set the dimensions of the rows and columns in your web page table according to how much content your table cells contain. Since cells are displayed in a grid-like pattern then the cell containing the most content will typically set the width and height of all cells adjacent to it and hence establish the width and height of related rows and columns in your table. 

You can, however, apply the width and height attributes to your <td> tags to explicitly set the dimensions of your table cells and thus exercise control over the width and height of rows and columns.

These attributes are described in more detail below:

• width="pixels or percentage" ~ Using the width attribute in your<td> tags, you can explicitly set the width of your table data cells. This will have the effect of setting not only the width of that particular cell but will also set the width of the entire column in which that cell resides. You may define either a fixed width in pixels or a relative width (recommended) which is equal to a percentage of the table width.
  
  NOTE: In the case where the width attribute is set in more than one cell in the same column, the largest width is the one that is applied. Likewise, if the content in any table cell in that column (such as a graphic) outsizes a specified width, the width of the content will establish the width of the cell and the column it resides in.
  
  Example 1 below renders a table that is 500 pixels wide and has two columns. The width of the first table data cell is set to 25% which then sets the width of all the cells in Column 1 at 25% or 125 pixels (25% of 500 = 125). The width of all the cells in Column 2 default to the remainder of table's width (75%):
  
  
  Example 1 - SOURCE CODE
  
  <table width="500" border="5">
   <tr><td width="25%">Column 1</td><td>Column 2</td></tr>
   <tr><td>Column 1</td><td>Column 2</td></tr>
   <tr><td>Column 1</td><td>Column 2</td></tr>
</table>
  
  
  
  Example 1 - RESULT

  Column 1	Column 2
  Column 1	Column 2
  Column 1	Column 2

  
  
• height="pixels or percentage" ~ Using the height attribute in your <td> tags, you can explicitly set the height of your table data cells. This will have the effect of setting not only the height of that particular cell but will also set the height of the entire row in which that cell resides. You may define either a fixed height in pixels (recommended) or a relative height which is equal to a percentage of the table's height.
  
  NOTE: In the case where the height attribute is set in more than one cell in the same row, the largest height is the one that is applied. Likewise, if the content in any table cell in that row (such as a graphic) outsizes a specified height, the height of the content will establish the height of the cell and the row it resides in.
  
  Example 2 renders a table that is 500 pixels wide and has two rows. The height of the first table cell in Row 1 is set to 100 pixels which then sets the height of all cells in Row 1 to 100 pixels. The height of Row 2 is not affected by the height specification in Row 1.
  
  
  Example 2 - SOURCE CODE
  
  <table width="500" border="5">
  

  <tr><td height="100">Row 1</td><td>Row 1</td><td>Row 1</td></tr>
<tr><td>Row 2</td><td>Row 2</td><td>Row 2</td></tr>

  </table>
  
  
  
  Example 2 - RESULT

  Row 1	Row 1	Row 1
  Row 2	Row 2	Row 2