[HTML]
Tables

   
The table code made of six tags three open tags and three closing tags.
The open tag <table> and it's closing </table> each table have to have one of each at the start of the table <table> and at the end of the table </table>
The row tags <tr> and it's closing </tr>. They are to start and end a row or a line in the table.
The Cell tags <td> and it's closing </td>. The are always between <tr> and </tr>. You can add as much cells inside the row.
Your table content have to be between <td> and </td>.
 
One cell
Two Cells in two Rows
 Two Cells in one Row
<table>
<tr>
<td>cell</td>
</tr>
</table>
one cell
cell
<table>
<tr>
<td>one cell</td>
</tr>
<tr>
<td>one cell</td>
</tr>
</table>
one cell and two rows
one cell
one cell
<table>
<tr>
<td>one cell</td>
<td>one cell</td>
</tr>
</table>
two cells one row
one cell one cell

 
How it looks:
 
Tables can be very useful.
The Code:

<CENTER> <!-- To center the table --> 
<TABLE BORDER=4 >
<!-- To start a table, the number is the thickness of the border, from 0 and up. -->
<TR> <!-- To start a row --> 
<TD> Tables can be very useful. </TD> <!-- To start and end a cell -->
</TR> <!-- To end a row --> 
</TABLE> <!-- To end a table -->
</CENTER> <!-- To end the center action --> 

 Note
You can put a link, or an image in a cell. The cell stretches to the size of it's content. Tables look different to different computers also. Some computers run at different screen resolutions, or they may be using large fonts. Keep this in mind when you try to get picky about how your information is displayed in the cells.
A link in a table cell:
 
Angelfire free home pages
The Code:

<CENTER> <!-- To center the table --> 
<TABLE BORDER=4 >
<!-- To start a table, the number is the thickness of the border, from 0 and up. -->
<TR> <!-- To start a row --> 
<TD> <a href="https://www.angelfire.com/">Angelfire free home pages</a> </TD>
<!-- To start and end a cell -->
</TR> <!-- To end a row --> 
</TABLE> <!-- To end a table -->
</CENTER> <!-- To end the center action --> 

How it looks:
 
Aviation Animation Dave's Page home pages
The Code:

<CENTER>
<TABLE BORDER=4 WIDTH="90%" >
<TR>
<TD><a href="https://www.angelfire.com/mi/jself/"> jim's page</a></TD>

<TD><a href="https://www.angelfire.com/wi/dalleh/"> Dave's Page</a></TD>

<TD>home</TD>

<TD>pages</TD>
</TR>
</TABLE>
</CENTER>


 
How it looks:
 
Angelfire freeeee home pages
Don't Worry Be Happy
. .. ... ....
The Code:

<CENTER>
<TABLE BORDER=4 WIDTH="100%" BGCOLOR="#FFFF00">
<!-- The first row starts here -->
<TR>
<TD>Angelfire</TD>

<TD>freeeee</TD>

<TD>home</TD>

<TD>pages</TD>
</TR>
<!-- The first row ends here -->
<!-- The second row starts here -->
<TR>
<TD>Don't</TD>

<TD>Worry</TD>

<TD>Be</TD>

<TD>Happy</TD>
</TR>
<!-- The second row ends here -->
<!-- The third row starts here -->
<TR>
<TD>.</TD>

<TD>..</TD>

<TD>...</TD>

<TD>....</TD>
</TR>
<!-- The third row ends here -->
</TABLE>
</CENTER>

How it looks:
 
The top row one cell
The second Row left cell The second Row right cell
The third Row left cell The third Row right cell
The Code:

<CENTER>
<TABLE BORDER=1 COLS=2 WIDTH="100%">
<TR>
<TD COLSPAN="2">
<CENTER>The top row one cell</CENTER>
</TD>
</TR>

<TR>
<TD>The second Row left cell</TD>

<TD>The second Row right cell</TD>
</TR>

<TR>
<TD>The third Row left cell</TD>

<TD>The third Row right cell</TD>
</TR>
</TABLE>
</CENTER>

How it looks:
 
The left one cell Top first Cell Top second Cell
Middle first Cell Middle second Cell
Bottom first Cell Bottom second Cell
The Code:

<CENTER>
<TABLE BORDER=2 COLS=3 WIDTH="100%">
<TR>
<TD VALIGN=TOP ROWSPAN="3">The left one cell</TD>

<TD>Top first Cell</TD>

<TD>Top second Cell</TD>
</TR>

<TR>
<TD>Middle first Cell</TD>

<TD>Middle second Cell</TD>
</TR>

<TR>
<TD>Bottom first Cell</TD>

<TD>Bottom second Cell</TD>
</TR>
</TABLE>
</CENTER>

[Home] [Tools] [Angelfire Help] [HTML] [Tips and tricks]