Learning and understanding the practical applications of <table> tags provides the Web Page Designer the ultimate in control over page layout with XHTML. Imagine a grid laid upon your web page in order to better visualize how an XHTML <table> works then consider the following:

A <table> is made up of one or more cells (or table data). These cells can be thought of as containers that hold text, graphics, empty space, or even a whole page of XHTML. We can further control the placement of data within these cells by applying attributes of alignment and dimension.

This is an example of the simplest <table> (one cell):

This is an example of a much more complicated <table>:

<table> </table> - Creates a new Table
<tr> </tr> - Creates a new row
<td> </td> - Creates a new "cell"

Example Code:
<table border="1">
 <tr>
   <td>A simple one cell table</td>
 </tr>
</table>

Note two things:

• Data to be displayed within the <table> is entered between the <td> and </td> tags
• The whole <table> sizes itself around the data

Example Code:
<table border="1">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
  <tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
    <td>Row 3, Cell 3</td>
  </tr>
</table>

The Result:

Attributes:
<table border="x"
       width="% | x">

<tr align="left | center | right"
    valign="top | middle | bottom"
    height="% | x"
    width="% | x">

<td align="left | center | right"
    valign="top | middle | bottom"
    height="% | x"
    width="% | x">

Example Code:
<table border="1">
  <tr>
    <td align="left">ALIGN=left</td>
    <td align="center">ALIGN=center</td>
    <td align="right">ALIGN=right</td>
  </tr>
  <tr>
    <td valign="top">VALIGN=top</td>
    <td valign="middle">VALIGN=middle</td>
    <td valign="bottom">VALIGN=bottom</td>
  </tr>
  <tr>
    <td align="left" valign="top" >Now is the time for all good men to come to the aid of their country.</td>
    <td align="center" valign="middle" >Now is the time for all good men to come to the aid of their country.</td>
    <td align="right" valign="bottom">Now is the time for all good men to come to the aid of their country.</td>
  </tr>
</table>

The Result:

The Result (with no border):

The Result (with graphics and no border):

Adding Graphics

Top of Page

Navigation