A brief tutorial on making Tables for displaying information
on a web page.
Basic Table Tags:
<table> </table>
Table Creation Tag
<tr> </tr>
New Table Row - Modifiers to this tag include align and valign
which are then set for every cell in that row.
<th> </th>
Table Header - automatically defaults to align=centers and bolds
the text in that cell
<td> </td>
Table Data Cell - standard cell for data in a table. Modifiers
to this tag are align and valign which
<table border=3><tr>
<th>Header 1</th><th>Header 2</th>
</tr><tr>
<td>Data Cell 1</td><td><Data Cell 2</td>
</table>
Header 1
Header 2
Data Cell 1
Data Cell 2
Modifying Tables:
Sizes: <table height=# width=#> or
<table height=% width=%>
You can set the size of your table using the height and width tags. If
table size is set with a number, the size refers to the number of pixels
in the table. Table size set using a number as opposed to a percent will
have constant size not dependent on window size.
<table height=100 width=225 border=6>
<tr><td>This is Cell #1</td>
<th>What's Up, Doc?</th></tr>
</table>
This is Cell #1
What's Up, Doc?
Setting table size by percentages means that the table is dynamic. Resizing
the window will resize the table size. In the table below, the width will
always be 50% of the window size and the height will be 25% of the window
size. If the HTML document is in a frame, the table percentages will be
relative to the window size.
<table height=25% width=50% border=6>
<tr><td>This is Cell #1</td>
<th>What's Up, Doc?</th></tr>
</table>
This is Cell #1
What's Up, Doc?
Borders:
You can hide the borders of your table to modify the location of data on
the page.
This is actually the default table border width.
<table><tr>
<th>Header 1</th><th>Header 2</th>
</tr><tr>
<td>Data Cell 1</td><td><Data Cell 2</td>
</table>
Header 1
Header 2
Data Cell 1
Data Cell 2
You can use tables with larger border sizes to highlight text or images.
<table border=10><tr>
<th><font size="+3" color="#00FF00">
Are you Web Savvy?
</font></th>
</tr></table>
Are you Web Savvy?
When placing images inside tables make sure to not place breaks between
the HTML for the cell and the image. Otherwise you may have extra space in
the table at the bottom of the image.
<table border=10><tr>
<th><img src="image URL" border=0></th>
</tr></table>
Cell Spacing: <table cellspacing=#>
(Not supported by ALL browsers)
<table border=6 cellspacing=10>
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>
Header 1
Header 2
Cell 1
Cell 2
Cell Padding: <table cellpadding=#>
(Not supported by ALL browsers)
<table border=6 cellpadding=10>
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>
Header 1
Header 2
Cell 1
Cell 2
Text Layout: Aligning the Text: <NOBR>
, <td align=>, and
<td valign=>
The <NOBR> or No Break tag causes the
text in the current cell not to wrap around if it goes past the end of the
page.
It is possible to modify the location of the text or image in any cell
in the table with the flags align and valign. These tags are set for each
individual cell, so you can use them to come up with some creative designs
(particularly for hidden table layouts). Both of these tags can be used
in either a Data Cell or a Table Header cell, but in most cases you shouldn't
need to use them with Table Headers. align and valign can be used together
in the same table cell.
ALIGN - modifies the horizontal location of data in each cell. (along
the x-axis). It can be set to three values, left, right and center.
<table border=4>
<tr><th>Computer Brand</th>
<th>Processor Speed</th>
<th>RAM (MBytes)</th>
<th>Hard Drive</th>
</tr><tr>
<td align=left>Gateway 2000</td>
<td align=center>Pentium 150</td>
<td align=right>32</td>
<td>2 gig</td>
</tr></table>
Computer Brand
Processor Speed
Ram (MBytes)
Hard Drive
Gateway 2000
P 150 Mhz
32
2 gig
VALIGN modifies the vertical location of data in each cell. (along
the y-axis.) There are four values for this flag: left, right, center, and
baseline.
<table border=4 height=200><tr>
<th>Computer Brand</th>
<th>Processor Speed</th>
<th>RAM (MBytes)</th>
<th>Hard Drive</th>
</tr> <tr>
<td valign=top>Gateway 2000</td>
<td valign=middle>150 Mhz</td>
<td valign=bottom>32</td>
<td valign=baseline>2 gig</td>
</tr></table>
Computer Brand
Processor Speed
Ram (MBytes)
Hard Drive
Gateway 2000
Pentium 150
32
2 gig
Table Spanning Tables can have cells which span other cells in either width
or height. This can be useful for certain types of page layout both of you
are using hidden or non hidden tables. For both column and row spanning,
the number in the HTML tag represents the number of cells you want the cell
to span.
Column Spanning: <th colspan=#>
<table border=3><tr>
<th colspan=3>Today's Work Plan</th>
</tr><tr>
<th>Morning</th>
<th>Afternoon</th>
<th>Evening</th>
</tr><tr>
<td>Sleep</td>
<td>Take a Nap</td>
<td>Party Time!</td>
</tr></table>
Today's Work Plan
Morning
Afternoon
Evening
Sleep
Take a Nap
Party Time!
Row Spanning: <th rowspan=#>
<table border=3><tr>
<th rowspan=3>Today's Work Plan</th>
<th>Morning</th><td>Sleep</td>
</tr>
<tr>
<th>Afternoon</th>
<td>Take a Nap</td>
</tr><tr>
<th>Evening</th>
<td>Party Time!</td></tr>
</table>
Today's Work Plan
Morning
Sleep
Afternoon
Take a Nap
Evening
Party Time!
Putting multiple column and row spans in the same table can sometimes lead
to interesting results. Tables can not have over lapping cells. Note the
red highlighted text below. When overlapping cells of a table are placed
beside each other, you don't need to use empty cells to align each cell MOST
of the time.
