Getting Started
Editors
Design Tips
Home

The Basics
Adding Color
Adding Images
Backgrounds
Links
Text Format
Page Format
>>Tables
Frames
Forms

Audio
Meta Tags
JavaScript
Cut & Paste JScripts
Style Sheets
IE with Style
IE Form Colors
MS Trans. Effects
Special Character Set

Graphic Designs
Fonts
Midis

New addition: HTML 4.0 Tables.

The first thing you need to understandin order to work with tables is "columns" and "rows". Columns are vertical, rows are horizonal. "Cells" are the intersection of the columns and rows. Every table must have at least one row and one column.

Example:

The best way to begin creating tables is to decide how many columns and rows you are going to need. For instance, if yo uneed a table with 2 columns and 3 rows, you would begin by formatting the table:

<TABLE>
<TR>
<TD>Cell 1A</TD>
<TD>Cell 1B</TD>
</TR>
<TR>
<TD>Cell 2A</TD>
<TD>Cell 2B</TD>
</TR>
<TR>
<TD>Cell 3A</TD>
<TD>Cell 3B</TD>
</TABLE>

Once you have the table formatted, then you enter the text or grahics between the <TD> </TD> container. I've found this method to be the easiest way to create tables for formatting a page, it prevents a lot of confusion, especially if you are wanting to create a table inside a table cell as I have done on this page. But beware, too many tables inside a single cell will cause some unwanted effets!

Now lets take a look at the code:

The <TABLE> tells the browser thatit is reading a table. The <TR> begines the first row. The <TD> </TD>container begins and ends the first column and forms cell 1A. This is repeated for the next column which forms cell 1B. And the </TR> ends the first row. This is repeated for the second and third rows. The containers to the best of my knowledge stands for:

<TR> - Table row
<TD> - Table Definition

Note:I have assigned a border of 1 to each of the tables shown below to show how the table looks in the format specified.

You may format the alignment, size, border width, margins inside the cells, space between the cells, and the background color of the table. The combinations of these formatting features will enable you to arrange your text and graphics to suit your needs. These codes are fairly simple:

CELLSPACING=[pixels]. This determines the margin outside the cells, it is placed inside the <TABLE> tag.

Example:

<TABLE CELLSPACING=5>
This will give the table a margin of 5 pixels between ever cell.

CELLPADDING=[pixels].This determines the margin inside the cells.

Example:

<TABLE CELLSPACING=5CELLPADDING=8>. This will give a margin of 5 pixels outside each cell and a margin of 8 pixels inside each cell.

BORDER=[pixels].This will give the table a border in pixel width.

Example:

<TABLE BORDER=3>

This will give the table a border of 3 pixels as in the table below. You may set the value to 0 in order to make your table invisible:

ALIGN=[left|right|center]. This can be used inside the TABLE, TR, or TD tag. According to what format you are wanting. If you want the entire table to be centered you would place it in the TABLE tag. If you want an entire row to be aligned you would use it in the TR tag. And if you only want one cell to be aligned you would use it in the TD tag.

Example:
<TABLE ALIGN=CENTER>- Center the entire table.
<TR ALIGN=RIGHT>- Aligns the text in the row to the right.
<TD ALIGN=CENTER>- Centers the text in the cell only.

Cell 1A Aligned Center	Cell 1B Aligned Right
Cell 2A Row Aligned Center	Cell 2B Aligned Left

VALIGN=[top|bottom|center]. Used with the TD and TR tags only. This will align the text vertically.The default vertical alignment of most browsers is center.

Example:

WIDTH=[pixels|percent]. Used with TABLE and TD tags. This will determine the size of your table when used with the TABLE tag and determine the size of the column when used with the TD tag. You can specify either pixel width or percent of screen or parent table. If you specify a column width, all of the cells in that column will be the width you specify.

Example:
<TABLE WIDTH="90%">
<TR>
<TD WIDTH=20>Cell 1A</TD>
<TD>Cell 1B </TD>
</TR>
</TABLE>

Here's the table:

BGCOLOR="#","COLOR"

This will put a background color in your table, row, or cell

Example:
<TABLE BORDER=1BGCOLOR="#00FF00" BORDERCOLOR="#FFCCFF" WIDTH="85%" CELLPADDING=10>
<TR BGCOLOR="#FFFFCC">
<TD>Cell 1A</TD>
<TD>Cell 1B</TD>
</TR>
<TR>
<TD BGCOLOR="#99CCCC">Cell 2A</TD>
<TD>Cell 2B</TD>
</TR>
</TABLE>

Here's the table:

Hey did you notice the new code? BORDERCOLOR="#RRGGBB|color".This gives the border of your table a color. Of course, you can only use it when you have a border on your table. If you set your border to 0, the color will not show.

And finally, a background image for your table.

<TABLE BACKGROUND="image.gif">

or

<TD BACKGROUND="image.gif">