Site hosted by Angelfire.com: Build your free website today!

HTML TUTORIAL by Geoff McCausland

TABLES <TABLE> </TABLE>

      Tables are a way that you can layout the page the way you want it to look. Some of the ways that I use them is to break a page into columns (especially the links on my personal pages. Instead of one really long list I can break them into 2 or 3 columns so you don't have to scroll as much). If I have a page with a few paragraphs of text I will put each paragraph in a table so that when you go to a higher resolution you wont get a paragraph that's only 2 lines long but super wide.

      You can define several of the table's properties right in the table tag.

BORDER

The border width is expressed in Pixels (The default is 0)

      <TABLE BORDER=0>

CELLSPACING

Cellspacing is the amount of space between the cells of a table (expressed in pixels)

      <TABLE CELLSPACING=0>

CELLPADDING

Cellpadding is the amount of space between the contents of the cell and the cell wall (expressed in pixels)

      <TABLE CELLPADDING=0>

WIDTH

You can define the width of a table in pixels or as a percentage (when you use percentages make sure you use quotation marks around the value)

<TABLE WIDTH=600>

or

<TABLE WIDTH="75%">

ALIGN

You can use this property to align the table on the LEFT side of the page or the RIGHT side of the page. Netscape allows "CENTER"

      <TABLE ALIGN="RIGHT">

BGCOLOR (Background Color)

This property allows you to assign a background color to the table. You can use the common name or the RGB value.

<TABLE BGCOLOR="BLUE">

or

<TABLE BGCOLOR="#0000FF">

BACKGROUND

You can assign a background image to a table the same way you can assign one to the body.

      <TABLE BACKGROUND="whatever.gif">

TABLE ROW <TR> </TR>

any attributes assigned in the TR tag will over-ride the values assigned in the TABLE tag.

ALIGN

You can use this property to specify whether the content in the cell is aligned to the LEFT or the RIGHT side of the cell.

      <TR ALIGN="RIGHT">

VALIGN

You can use this property to specify where the content of the cell is aligned in the cell. The default is center, but you can make it TOP or BOTTOM

      <TR VALIGN="TOP">

BGCOLOR (Background Color)

This property allows you to assign a background color to the row. You can use the common name or the RGB value.

<TR BGCOLOR="BLUE">

or

<TR BGCOLOR="#0000FF">

TABLE DATA <TD> </TD>

any attributes assigned in the TD tag will over-ride in value assigned in the TABLE tag or the TR tag.

ALIGN

You can use this property to specify whether the content in the cell is aligned to the LEFT or the RIGHT side of the cell.

      <TD ALIGN="RIGHT">

VALIGN

You can use this property to specify where the content of the cell is aligned in the cell. The default is center, but you can make it TOP or BOTTOM

      <TD VALIGN="TOP">

BGCOLOR (Background Color)

This property allows you to assign a background color to the cell. You can use the common name or the RGB value.

<TD BGCOLOR="BLUE">

or

<TD BGCOLOR="#0000FF">

BACKGROUND

You can assign a background image to a cell the same way you can assign one to the body.

      <TD BACKGROUND="whatever.gif">

HEIGHT and WIDTH

You can define the height and width of a cell using a pixel value or a percentage of the table.

<TD WIDTH=300 HEIGHT=200>

or

<TD WIDTH="50%" HEIGHT="50%">

NOWRAP

If you use this attribute any text inside the cell will not wrap to the next line.

      <TD NOWRAP>

COLSPAN

This attribute is used to make the contents of a cell to span over multiple columns. If you wanted to make the first row of a 3 column table the header you would want it to center across all 3 columns

      <TD COLSPAN=3>

ROWSPAN

This attribute is used to make the contents of a cell span over multiple rows.

      <TD ROWSPAN=2>

Previous Page 1 | 2 | 3 | 4 | 5 | 6