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 | | 
