Tables

Get Organized with Tables

Tables are a great way to organize text on a web page, they give you control of where text can be placed, and even where the table will be on the page, plus a lot more. Experiment with the different table attributes to come up with your very own customized table.

The basic attributes for the table are shown in the following table.

ATTRIBUTE

BORDER="a number"

Controls table border (in pixels)
0 indicates no border.

<TH> and </TH>

Indicates a table heading, text will be bold and centered by default.

<TD> and </TD>

Indicates the data table cell.

<TR> and </TR>

Indicates table row, (rows go across the page).

Below is an example of a 2 row, 2 column table using only the attributes mentioned above.

1stHEADING 2ndHEADING

1stDATA1 2ndDATA1

1stDATA2 2ndDATA2

Here is the code for the above table:

<TABLE BORDER=2>
<TR>
<TH>1stHEADING</TH>
<TH>2ndHEADING</TH>
</TR>
<TR>
<TD>1stDATA1</TD>
<TD>2ndDATA1</TD>
</TR>
<TR>
<TD>1stDATA2</TD>
<TD>2ndDATA2</TD>
</TR>
</TABLE>

Just change everything that is bold to the desired content that you are wanting in the table.

More Table Atrributes

The following attributes will affect the whole table.

ATTRIBUTE

ALIGN="----"

LEFT,RIGHT or CENTER

BACKGROUND="URL"

Inserts background image for the entire table.

BGCOLOR="color"

Sets the background color by color name or hex number.

CELLSPACING="a number"

Inserts a specified amount of space between cells (in pixels).

CELLPADDING="a number"

Inserts space between the cell border and the cell contents (in pixels).

WIDTH="a number"

Controls the width of the table (in pixels or percent).

Below is an example of the 2 row, 2 column table with most of the above attributes applied.

1stHEADING 2ndHEADING

1stDATA1 2ndDATA1

1stDATA2 2ndDATA2

Here is the code for the above table:

<TABLE BORDER=2 CELLSPACING="5" CELLPADDING="10"
BGCOLOR="red" WIDTH="50%" ALIGN="CENTER">
<TR>
<TH>1stHEADING</TH>
<TH>2ndHEADING</TH>
</TR>
<TR>
<TD>1stDATA1</TD>
<TD>2ndDATA1</TD>
</TR>
<TR>
<TD>1stDATA2</TD>
<TD>2ndDATA2</TD>
</TR>
</TABLE>

Just change everything that is bold to get different effects and to enter your data.

Click here for a color chart.

Attributes for the table data cell

These attributes will affect the <TD> (table data cells) and/or the <TH> (table headings).

ATTRIBUTE

ALIGN="----"

Aligns the cell content to the LEFT, RIGHT or CENTER.

BACKGROUND="URL"

Inserts a background image for the cell. Image must be stored on the web.

BGCOLOR="color"

Sets the background color for the cell, in color name or hex number.

COLSPAN="a number"

Specifies how many columns of the table this cell should span.

ROWSPAN="a number"

Specifies how many rows of the table this cell should span.

WIDTH="a number"

Controls the cell width (in pixels or percent).

HEIGHT="a number"

Controls the cell height (in pixels).

VALIGN="----"

Controls the vertical alignment of content within the cell. TOP, MIDDLE or BOTTOM.

Below is an example of the 2 row, 2 column table with most of the above attributes applied.

HEADING HERE

DATA1HERE DATA2HERE

DATA3HERE DATA4HERE

Here is the code for the above table:

<TABLE BORDER=2 CELLSPACING="5"
CELLPADDING="10" BGCOLOR="#FF0000"
WIDTH="65%" ALIGN="CENTER">
<TR>
<TH BGCOLOR="CCCCCC" COLSPAN="2">HEADING HERE</TH>
</TR>
<TR>
<TD BGCOLOR="WHITE" ALIGN="CENTER"
VALIGN="MIDDLE">DATA1HERE</TD>
<TD BGCOLOR="RED" ALIGN="CENTER"
VALIGN="MIDDLE">DATA2HERE</TD>
</TR>
<TR>
<TD BGCOLOR="RED" ALIGN="CENTER"
VALIGN="MIDDLE">DATA3HERE</TD>
<TD BGCOLOR="WHITE" ALIGN="CENTER"
VALIGN="MIDDLE">DATA4HERE</TD>
</TR>
</TABLE>

Just change all bold items to the numbers, names, text of your choosing.

Click here for a color chart.

Go Back