e-pixs.com - HTML Tutorial....Tables, the key to great web documents

The Table Tag

The tag to the left is called the TABLE tag. The TABLE tag does nothing by itself. It requires the next two tags below. The TABLE tag does require a closing tag.

This is the TABLE ROW tag. The TABLE tag is always proceeded by the TR tag. The TR tags creates a vertical row into which you will place data using the next part of the TABLE tag.

This is the TABLE DATA tag. The TD tag is where all the data is contained within a table row. Think of it as a cell. All information or data goes in the various cells of a table.

Here's a quick and dirty example (the tags are red, the data is blue):

<TABLE><TR><TD><IMG SRC=pics/bye.gif ALIGN=MIDDLE HSPACE=5><FONT COLOR=BLUE FACE="Comic Sans MS">Say hello to my friend, Pixs.</FONT></TD></TR></TABLE>

Say hello to my friend, Pixs.

Go to the practice board and try it.
Remember, you can copy and paste examples into the practice board to try them out.

The above example is the simplest table you can make. It's a one row, one cell table using no extra attributes to change the size or appearance, add extra rows or cells, or change alingment etc. The </TD> and </TR> tags are really optional to use because any time you start a new cell (<TD>) the old cell must end, same for rows (<TR>). But if you are just starting, I strongly suggest you use them for now. Especially if you are using an HTML checking program, you will get an error message if the closing tags are not included, and since errors are accumulative, it can be difficult to know where an error really is occuring.

There are plenty of attributes to use with the <TABLE>, <TR> and <TD> tags to make well presented pages, like this very page you are viewing !!! Because all attributes within the TABLE, TR, and TD tags are optional, I won't bother with the optional or required comment for each attribute.

The TABLE Tag Attributes
Attribute	Variable	Purpose
ALIGN=	LEFT CENTER RIGHT JUSTIFY	The ALIGN= attribute controls alignment of the table on a web page in relation to other elements on the page. I think it is easiest when starting to learn tables, to think of the web page as a page in a book. You start writing the words from the top left, and continue to the right and down, until you get to the bottom right of the page. Same with tables. Try and imagine your tables and the cells layed out beginning at the top left and moving right and down. This will become apparent later. Making a hand drawn diagram might help if you plan on some real intricate table lay outs.
BGCOLOR=	NAME RGB#	Sets the background color for the entire table. Any row or cell that also uses a BGCOLOR attribute will override the bgcolor of the table. The variable can be any valid name of a color that browsers recognize such as: red, green, blue etc. Or you can use the RGB (RED-GREEN-BLUE) hexadecimal HTML number. Like pure white is: #FFFFFF and pure black is:#000000. Paint Shop Pro has a color dialog box with a color wheel that displays the equivalent HTML code for all colors.
BACKGROUND=	URL of an image file	You can use image files for backgrounds in a table. You simply place the absolute or relative URL of the file after the attribute.
WIDTH=	XX XX%	Sets the width of a table in pixels (XX) or as a percentage of the size of the current browser window (XX%). All the tables on this page are set at 95%. Using a percentage value allows the tables to resize themselves to fit into what ever the current size browser window is set at, up or down, to certain limitations. If you resize your window while viewing this page you will see what I mean. Using a pixel number value only, will fix the size of the tables at that number. They will not expand or contract as the browser window is resized. Can be useful in certain circumstances.
HEIGHT=	XX	The same as WIDTH= above.
BORDER=	XX	Creates and sets the pixel width of a border around a table. If using any value higher than 0 (zero), it will also make horizontal and vertical rules appear between the rows and cells if using multiple rows or cells in a table, like this very table you are viewing. The rules are by default one pixel in width regardless of the BORDER= value for any value greater than 0 (zero). The default value is 0 if no BORDER= attribute is used in the TABLE tag. If you do not enter anything there will be no border around a table, like in my quick and dirty example above. Setting the value to at least 1 can be a great help when you are first laying out your tables and cells. The BORDER= value is set to 1 for all the tables on this page.
BORDERCOLOR=	NAME RGB#	You can specify the color of the border the same as with BGCOLOR above.
BORDERCOLORLIGHT=	NAME RGB#	Sets the color for the left and top sides of the outer border and the rules. *Internet Explorer only attribute*
BORDERCOLORDARK=	NAME RGB#	Sets the color for the right and bottom sides of the outer border and the rules. *Internet Explorer only attribute*
CELLPADDING=	XX	Leaves a margin around all sides of any data placed into all the TD cells equal in value, in pixels, to the number entered. CELLPADDING is set to 8 for all tables on this page.
CELLSPACING=	XX	Leaves a margin around all sides between all TD cells in a table. CELLSPACING is set to 0 for all tables on this page.
FRAMES=	VOID ABOVE BELOW HSIDES VSIDES LHS RHS BOX BORDER	Sets the visible sides (the outer border) of a table. *Internet Explorer only attribute*
RULES=	NONE GROUPS ROWS COLS ALL	Sets the visible rules (inside a table between each cell and row) of a table. *Internet Explorer only attribute*

The TR Tag Attributes
Attribute	Variable	Purpose
ALIGN=	LEFT CENTER RIGHT JUSTIFY	Horizontally aligns the contents of all data cells in the row.
VALIGN=	TOP MIDDLE BOTTOM	Vertically aligns the contents of a all cells in the row.
BGCOLOR=	NAME RGB#	Sets the background color for the entire row. Any row or cell that also uses a BGCOLOR attribute will override the bgcolor of the table. Same as setting a BGCOLOR for a table as discussed above.

The TD Tag Attributes
Attribute	Variable	Purpose
ALIGN=	LEFT CENTER RIGHT JUSTIFY	Horizontally aligns the contents of all data cells in the row.
VALIGN=	TOP MIDDLE BOTTOM	Vertically aligns the contents of a all cells in the row.
BGCOLOR=	NAME RGB#	Sets the background color for the data cell. Any data cell that also uses a BGCOLOR attribute will override the bgcolor of the table and the table row. Same as setting a BGCOLOR for a table as discussed above.
BACKGROUND=	URL of an image file	You can use image files for backgrounds in a data cell. Will override the background image set in the table. You simply place the absolute or relative URL of the file after the attribute.
ROWSPAN=	XX	The number of rows spanned by a data cell.
COLSPAN=	XX	The number of columns spanned by a data cell.
NOWRAP	(NONE)	Turns off text wrapping in a data cell.

Quick Start
What is HTML?
Text and Fonts
Using Images
Making Links and Mailto Links
Making Lists
Tables, the key to well designed HTML documents
Examples of Tables
Color Chart by Name
Hexadecimal Color Chart

Practice board

The Joy of HTML

Tables, the Key to great looking web pages