Class # 1 , Class # 2 ,Class # 3 , Class # 4 , Class # 5 , Class # 6

A sample of a table with an image in the background.

Some samples of what can be done with bordercolor.

A test page with several tables using no BG color, some with a BG color or an image and playing with cellpadding and cellspacing.

A TEXT file with the tags for a table (4 rows, 4 columns and 16 cells) along with many of the table tags for you to experiment with.

Please go and read this very good table tutorial as well as this page.

META Tags are at th ebottom of the page.

Using TABLES in your page layout has several key advantages:

• an excellent format for displaying certain types of data.
• they provide more control in the placement of text and images.
• the page layout will display more consistently and uniformly on different browsers.

TABLES are all about control.

You can place text, images and links within each cell.

Table attributes

You can change the size and color of your table, specify a border size, and add space between the table cells. You determine all of these things by using several different attributes in your TABLE tag

ALSO:

[ Alignment ] [ Nesting Tables ] [ META Tags ] [ Broken Tags ]

Boxes Inside Of Boxes

It's probably easiest to think of a TABLE as a flat, two dimensional box you can put on your page.

Inside of this box you can place other boxes, or CELLS, and inside of these boxes, you put text, images, or even more boxes still.

This is a very simple table which contains four cells (2 rows and 2 columns).

The opening tag for a table is <TABLE> and the closing tag is </TABLE>

The TABLE CELL, or <TD> is the basic unit of a cell. You can have as many or as few cells in your table as you wish.

A horizontal row of cells is called a TABLE ROW or <TR>.

Always remember that cells go into rows, and rows go into a table.

Notice how the opening and closing TD tags are nested inside of the TR tags, and likewise, the TR tags are nested inside the TABLE tags.

In the example above, Cell 1 and cell 2 form a table row, and cells 3 and 4 form another table row.

In this example, I've outlined a table with two Table Rows. Each row contains two Cells, which gives us a four cell table.

The Width and Height

<TABLE WIDTH=33%> or <TABLE WIDTH=250>

Use the WIDTH attribute inside the table tag to specify how much of the screen you want your table to span.

You can use a percentage, like I just did, or you can use pixels for the value.

You can also use the WIDTH attribute within the <TR> and <TD> opening tags.

<TABLE HEIGHT=33%> or <TABLE HEIGHT=250>

Use the HEIGHT attribute inside the table tag to specify how much of the screen you want your table to span.

You can use a percentage, like I just did, or you can use pixels for the value.

You can also use the HEIGHT attribute within the <TR> and <TD> opening tags.

Borders

You can control the thickness of your table border by using the BORDER attribute. <TABLE BORDER=5>
You can even lose the border altogether by indicating a value of 0 for the BORDER attribute.

If you use HTML tables to control the layout of your Web pages, here's one of our best browser compatibility tips: always include the attribute BORDER="0". Do this even though the default for the BORDER attribute is zero.

The reason for this is that Netscape Navigator puts additional white space around each table cell unless you explicitly set BORDER="0". If you're using your TABLE to control the positioning of other elements within the page, this little bit of extra space can affect alignment.

<TABLE Border=0> <TR> <TD>image</TD> <TD>image</TD> </TR> </TABLE>	<table BORDER="5">
<table BORDER="10">	<table BORDER="15">

Combining several attributes to create an interesting effect.

Here is a kewl trick you can do by nesting a table inside a table and then placing an image at the center. You create a multi colored frame.
	<TABLE BGCOLOR="#990B00" BORDER="5" CELLPADDING="5" CELLSPACING="5"> <TR ALIGN="CENTER"> <TD> <TABLE BGCOLOR="#000000" BORDER="0" CELLPADDING="10" CELLSPACING="10"> <TR ALIGN="CENTER"> <TD> <IMG SRC="starry.jpg" WIDTH="150" HEIGHT="138" BORDER="0"> </TD> </TR> </TABLE> </TD> </TR> </TABLE>

Coloring Table

<TABLE BGCOLOR="#000000"> or <TABLE BGCOLOR=black>

BGCOLOR in a table works just like the BGCOLOR attribute in a body tag.

Use the color's name or it's Hexadecimal code.

The BGCOLOR can be used in the opening <TABLE>, <TD> or <TR> tags to change the color (using hexcodes or color names).

SPACING

CELLPADDING and CELLSPACING will let a little air into your table and make it easier to view.

CELLPADDING is how many pixels of space you want on the inside of your cell between your text and the border. The image of the blue-black button take up the entire space of the cell. The yellow space around the button is the CELLPADDING.
<TABLE border=1 CELLPADDING=0 cellspacing=0 bgcolor =yellow> <TR> <TD>image</TD> <TD>image</TD> </TR> <TR> <TD>image</TD> <TD>image</TD> </TR> </TABLE>	<table border=1 CELLPADDING=5 cellspacing=0>
<table border=1 CELLPADDING=10 cellspacing=0>	<table border=1 CELLPADDING=20 cellspacing=0>

Merging Cells within Columns and Rows

Now we will play with COLSPAN (Column Span) and ROWSPAN (Row Span).

Row and Column spaning is useful for titles, layout, placing images and text, among other things. Be creative.

Alignment Attributes

You can position your text or image inside of the table cell itself by using the ALIGN and VALIGN attributes inside the <TD> tag.

It seems that the default for the alignment inside a cell is <TD ALIGN=left VALIGN=middle>

Use only one ALIGN and one VALIGN attribute per table cell or they will not work.

<TD ALIGN=left VALIGN=top>

ALIGNMENT	VALIGN=MIDDLE	VALIGN=TOP	VALIGN=BOTTOM
ALIGN=LEFT --- --- ---
ALIGN=CENTER --- --- ---
ALIGN=RIGHT --- --- ---

Go here for a kewl trick using netsing tables.

Broken Table Tags

Tables are very sensitive to having their tags broken and moved around. Extra attension must be given to them so that they work properly. Always look at the table in a browser to see if it's reacting properly and that all the information is readable.

I would suggest making a drawing of the table you wish to make. Organize the information inside each cell the way you want it to appear. It would be easier to code all the tags if you have a visual map, it's less confusing.

Meta Tags

<meta name="keywords" content="keywords here">

<meta name="description" content="description here">

<META name="description" content="We specialize in catering corporate events.">

<META name="keywords" content="catering, vegetarian, food, company, events">

Where "keywords here" is a list of keywords that you wish to be associated with your page, and "description here" the short description describing it.

The meta tag is inserted inside the <head> section. Keywords entered into the <meta> tag should each be separated by a comma.