Tables

a very long lesson...tables are your friend...

Table Tags

<table> </table>
Starts and ends a table.
<tr> </tr>
Starts and ends a table row.
<td> </td>
Starts and ends data within a table (creates a column).
<th> </th>
Starts and ends text table data that will be bold.

 

Attributes

align= Control where in the cell the item will be (left, center, right, justify). Can be used in the <table> tag to control the entire table, the <td> or <th> to control the cell, or in <tr> to control the entire row.
bgcolor= Controls the background color. Can be used in the <table> tag to control the entire table, the <td> or <th> to control the cell, or in <tr> to control the entire row.
width= Controls the width. Stated in pixels or percentages. You can either use pixels which is absolute regardless of the window size or in percentages if you want the table to adjust to window size. Only used in the <table> tag.
border= The width of the border in pixels.
frame= Sets the visible sides of a table (void, above, below, hsides, lhs, rhs, vsides, box, border). Only used in the <table> tag.
rules= Sets the visible rules within a table (none, groups, rows, cols, all). Only used within the <table> tag.
cellspacing= The spacing between cells in pixels. Only used within the <table> tag.
cellpadding= The spacing inside the cell from whatever the content is in pixels. Only used within the <table> tag.
nowrap= Turns off text wrapping within a cell. Only used with <td> or <th>.
rowspan= The number of rows spanned by a cell. Used to put one big cell over several smaller cells. Only used with <td> or <th>.
colspan= The number of columns spanned by a cell. Used to put one big cell over several smaller cells. Only used with <td> or <th>.
valign= Forces vertical alignment of the contents of cells (top, middle, bottom, baseline). Only used with <td>,<th>, or <tr> tags.

Using this collection of tags you can create incredibly;y complicated web pages that allow very precise placement of almost anything. Within a table cell you can place images, text, lists, another table, a video; just about anything...If you go look at the source code for the YAHOO! main page you will find that almost everything on the page lives within a cell. This is probably the one html unit that you will want to understand above all others.

Examples

<table border=5 rules=all>
<tr>
<th>Column One</th><th>Column Two</th>
</tr>
</table>

Column One Column Two


<table border=5 rules=all bgcolor=red>
<tr>
<th>Column One</th><th>Column Two</th>
</tr>
</table>

Column One Column Two


<table border=5 rules=all>
<tr>
<th bgcolor=red>Column One</th><th>Column Two</th>
</tr>
</table>

Column One Column Two


<table border=5 rules=all width=400>
<tr>
<th bgcolor=red>Column One</th><th>Column Two</th>
</tr>
</table>

Column One Column Two


<table border=5 rules=all width=50%>
<tr>
<th bgcolor=red>Column One</th><th>Column Two</th>
</tr>
</table>

Column One Column Two



<table border=5 rules=all width=50% cellspacing=25 cellpadding=25>
<tr>
<th bgcolor=red>Column One</th><th>Column Two</th>
</tr>
</table>

Column One Column Two


<table border=5 rules=all width=50% bgcolor=aqua>
<tr>
<th>Column One</th><th>Column Two</th>
</tr>
<tr>
<th>Column One, Row 2</th><th>Column Two, Row 2</th>
</tr>
</table>

Column One Column Two
Column One, Row 2
Column Two, Row 2



<table border=5 rules=all width=50% bgcolor=aqua>
<tr>
<th colspan=2>Column One</th>
</tr>
<tr>
<th>Column One, Row 2</th><th>Column Two, Row 2</th>
</tr>
</table>

Column One
Column One, Row 2
Column Two, Row 2



<table border=5 rules=all width=50% bgcolor=aqua>
<tr>
<th rowspan=2>Column One</th><th>Column Two</th>
</tr>
<tr>
<th>Column Two, Row 2</th>
</tr>
</table>

Column One Column Two
Column Two, Row 2



<table border=5 rules=all width=50% cellspacing=25 cellpadding=25>
<tr>
<th bgcolor=red><img src=weenernose.jpg></th><th>Column Two</th>
</tr>
</table>

Column Two


 

 

Back to the outline.