Basic Table Structure:

A table in HTML is defined by the basic command pair: 

Captions, headers and data are set up within tables as follows: 

The table caption (<caption></caption>) and column headers (<th></th>) are optional elements. 

Example:

<table border=1>
   <tr>
     <td>
       Column 1
     </td>
     <td>
       Column 2
     </td>
     <td>
       Column 3
     </td>
   </tr> 
</table>

This basic syntax can produce very complex table structures, but as the complexity increases so does the complexity of the code required to place and define the table.  It is a good idea to map out a table on paper before coding and to check that all table commands are properly paired and placed within the structure. 

Something else to remember is that HTML cannot display a table until all its components have been loaded.  Very large tables can take a long time to load and may confuse or irritate users.  If it is possible, large tables should be broken down into smaller units. 

Note also that some low end browsers cannot display tables at all. 

Table Display and Formatting Parameters:

The table below outlines the various command parameters that can be used within tables to refine display and set formatting: 

<table width=200 border=1>
   <tr>
     <td width=100
      align=right>
        Right
     </td>
     <td width=100
        align=center>
        Center
     </td>
   </tr> 
</table>

<table border=0>
   <tr>
     <td>
       Unbordered
     </td>
     <td>
       Table
     </td>
   </tr> 
</table>

<table border=1>
   <tr>
     <td>
       Bordered
     </td>
     <td>
       Table
     </td>
   </tr> 
</table>

<table width=200 border=1 
cellpadding=20>
   <tr>
     <td width=100>
        Cell 1
     </td>
     <td width=100>
        Cell 2
     </td>
   </tr>
 </table>

<table width=200 border=1 
cellspacing=10>
   <tr>
     <td width=100>
        Cell 1
     </td>
     <td width=100>
        Cell 2
     </td>
   </tr>
</table>

<table width=200 border=1>
   <tr>
     <td width=100>
        Cell 1
     </td>
     <td width=100>
        Cell 2
     </td>
   </tr>
   <tr>
     <td width=200 colspan=2>
        Cell 3 Spans 2 Columns
     </td>
   </tr> 
</table>

<table width=100% border=1>
   <tr>
     <td width=33%>33%</td>
     <td width=66%>66%</td>
   </tr>
</table>

<table width=200 border=1>
   <tr>
     <td nowrap>
       Text here can't wrap<br>
        to multiple lines.
     </td>
   </tr>
   <tr>
     <td>
       Text here can wrap
        to multiple lines.
     </td>
   </tr> 
</table>

<table width=200 border=1>
   <tr>
     <td rowspan=2>
        Cell 1<br>Spans 2
        <br>Rows
     </td>
     <td>Cell 2</td>
   </tr>
   <tr>
     <td>Cell 3</td>
   </tr> 
</table>

<table width=200 border=1>
   <tr>
     <td width=100 height=50
       valign=top>
       Top
     </td>
     <td width=100 height=50
       valign=center>
       Center
     </td>
   </tr>
</table>

Color in Tables:

Some less than admirable webpage designers may use "invisible" tables, that is, tables which contain cells that use the same background and text colors, in order to cram as many keywords onto the end of a website as possible while at the same time concealing them from their users.  Even though the users cannot see the additional text because it is the same color as the background on which it is displayed, they must still wait while it loads.  The WWW search engines, however, can and do read such hidden words.  The aim, of course, is to "beef up" the webpage with a sometimes very lengthy invisible keyword list in the hope of earning a higher hit ranking for the webpage from the search engines.  The practice is dishonest, wasteful of the principal Net resource, bandwith, and exceptionally punitive for Net users with slow dial-up connections.

Tricks with Tables:

Every cell in a table can, and does, contain a complete HTML world.  No text or color formatting can carry over from cell to cell.  Each cell is an island.  A cell can contain another table: 

Note that this can produce double-bordered cells which may be useful for emphasis. 

You can create a web page with two or more columns of text, with or without borders, using a table: 

Perhaps the most useful thing you can do with a table is to center justify a single column of text, or, you're whole WWW page, within a table with only one cell.  At the standard screen resolution of 640X480 your page may display perfectly with all alignments looking good, but if a user comes in at 800X600 then alignments can be disrupted unless the entire page is precisely placed within a single, centered, 600-pixel wide table cell.  The trouble with this is that a table cannot display until all of its components are loaded.  You may wish to place only text and relatively small inline images into centered single-cell tables: 

A Single-Celled Centered Table

The giant panda, a rare and closely protected animal, lives in the cool, damp bamboo forests of mountainous central China, generally at elevations of 1,500 to 4,000 m (5,000 to 13,000 ft).  Its thick, woolly coat is black or brownish black and yellowish white; the darker color forms patches around the eyes, covers the ears, legs, and chest, and forms a band across the shoulders.  Giant pandas grow to 1.5 m (5 ft) long, plus a short tail, and weigh 150 kg (330 lb) or more. Bamboo constitutes most of their diet, but they may also feed on other plants and even an occasional small animal.  Mating takes place in April or May, and one or two young are born, usually in January.