HTML Tutor - Getting Started
Part 3
All About Tables
Tables are a very useful tool for giving a site a great look. The following will give you a hand in learning how to expose tables' great page layout potential.
<TABLE></TABLE>
This is what makes the table. It can include the following attributes:
BORDER="x" defines the width of the border surrounding the table
-
CELLPADDING="x" defines the space between the cell and it's contents
CELLSPACING="x" defines the space between each individual cell
HEIGHT="x" defines the height, in pixels, of the table itself
WIDTH="x" defines the width, in pixels, of the particualer frame
ALIGN="x" defines how the table will be displayed on the page (x = left/right/center)
Example:
<TABLE ALIGN="center" BORDER="1>" WIDTH="580" CELLPADDING="5" CELLSPACING="5">
</TABLE>
Now for the rows and data that define the table.
<TR>
Table Row - This tag is required because it tells the browser where a new row begins. It has the following options:
ALIGN="left/right/center" adjusts the text or graphics in the row
VALIGN="top/middle/bottom/baseline" stands for vertical align, controls position of table data from top to bottom
BGCOLOR="file.jpg" defines the background color for the cell
BORDERCOLOR defines the border color of the cell
Example:
<TR ALIGN="middle" VALIGN="top" BGCOLOR="#000000" BORDERCOLOR="#000080">
</TR>
<TD>
Table Data - This is what defines the cell itself. It includes:
ALIGN="left/right/center" adjusts the text or graphics in the row
VALIGN="top/middle/bottom/baseline" stands for vertical align, controls position of table data from top to bottom
BGCOLOR="file.jpg" defines the background color for the cell
BORDERCOLOR defines the border color of the cell
BACKGROUND="file.jpg" tiles an image as the background much like <BODY background="..."> does in the body tag
ROWSPAN="x" defines how many rows the cell will span as compared to other rows
COLSPAN="x" defines how many columns the cell will span
NOWRAP="x" allows the text to continue uninhibited by the table cells
Example:
<TD HEIGHT=300 WIDTH="300" ROWSPAN="2" COLSPAN="2" BGCOLOR="#000000" BORDERCOLOR="#000555" NOWRAP>
</TD>
<TH>
Table Header - It is just like <TD> but it allows everything to be centered within the cell.
Example:
<TH HEIGHT="300" WIDTH="300" ROWSPAN="2" COLSPAN="2" BGCOLOR="#000000" BORDERCOLOR="#000080" BACKGROUND="file.gif" NOWRAP>
</TH>
<CAPTION>
This allows the table to have a caption appended to it.
Example:
<TABLE WIDTH="300" CELLPADDING="5" CELLSPACING="5" BORDER="5" ALIGN="middle">
<TR>
<TD COLSPAN="3" ALIGN="middle" VALIGN="middle"> top row </TD>
</TR><TR>
<TD ALIGN="middle" VALIGN="middle"> Number 1 </TD>
<TD ALIGN="middle" VALIGN="middle" Number 2 </TD>
<TD ALIGN="middle" VALIGN="middle"> Number 3 </TD></TR>
<TR><TD COLSPAN="3" ALIGN="middle" VALIGN="middle"> bottom row </TD>
</TR>
</TABLE>
<CAPTION>Full table example</CAPTION>
This outputs:
Full table example | top row | | Number 1 | Number 2 | Number 3 | | bottom row |
|
