HTML Scripting Lesson 4b

January 26, 2004

TABLES


Plan BEFORE beginning your table.

Draw a SKETCH.

Specify the width of the WHOLE table.

Most monitors are 640x480 pixels OR 800x600.

Do not create a table OR an image larger than 640 pixels wide!

A table is made of ROWS and CELLS within each ROW (columns).

1st cell in Row One 2nd cell in Row One

DO NOT FORGET TO END YOUR TABLE and TR with a closing tag!! (but /TD closing tag is optional)


ATTRIBUTES FOR <TABLE> TAG:

BGCOLOR="#RRGGBB"     or =color, same as in BODY tag
Use in TD, TR or TABLE tags.

BORDER=n     n=number of pixels
Default border=2; USE BORDER=0 for images

<TABLE BORDER=0> - use this for images with NO BORDER!

WIDTH=n     n=width in pixels
Overall Table Width = (w of columns) + (w of borders) + (w of cellspacing) + (w of cellpadding)

Use WIDTH attribute in <TABLE WIDTH=600> OR <TD WIDTH=100>
Generally you use WIDTH only with the FIRST cell in each column, but if it spans more than one column, you may need to add WIDTH to each cell.

ALIGN="direction" to center on a page
also use CENTER, RIGHT or LEFT
OR use <CENTER> tag before table begins instead

CELLSPACING=n     n=pixels; Adds space BETWEEN individual cells; Default=2
Mainly use CELLSPACING=0 for image layouts!!

CELLPADDING=n     n=pixels; Adds space AROUND the contents of a cell (between the contents and its border); Default=1;
Mainly use CELLPADDING=0 for image layouts!!


The <TR> (row) TAG:

You must start each NEW ROW with the <TR> tag.

Be sure to close of each row when you are done! </TR>


ATTRIBUTES FOR <TD> (cell) TAG:

ALIGN=direction     (left, right, center) ALIGN CONTENTS of a CELL HORIZONTALLY (text, images, etc.)

VALIGN=direction     (top, middle, bottom) ALIGN CONTENTS of a CELL VERTICALLY within the cell

You can also use these in the TR tag to apply that to all the cells in that ROW!!

COLSPAN=n,     n = number of COLUMNS to span (horizontal) (to span across more than one column (width))

ROWSPAN=n,     n = number or ROWS to span (vertically) (to span across more than one row (height))


To Display and EMPTY cell, as a placeholder, type:

<TD> &nbsp; </TD>
Otherwise the edges of your table may not show up!


Table Examples     |     |    Back to Syllabus