Creating Tables in HTML

Creating Tables
notes copyright 1998 by Tracy Marks

A table consists of rows which also contain one or more cells.
As you type text in a cell, the cell expands to its specified limit.

These notes cover:
A simple one-cell table with no border
Table with border, width and height
Two rows, three cell-columns
Specifying the size of a cell
Aligning your data in a cell
Cellpadding and cellspacing
Inserting images in tables
Table colors

A simple one-cell table, no border
<TABLE>    begins table
<TR>     begins table row
<TD>     begins a table cell
Your text goes here
</TD>    ends table cell
</TR>    ends table row
</TABLE>  ends table

This is your table with an invisible border:

Your text goes here

You might want to create borderless tables in order to use columns,
or more carefully align sections of text and images.

Table with border, width and height
Commands to use:

Specifying borders:
<TABLE BORDER=0>   no border; default
<TABLE BORDER=1>  1 pixel border
<TABLE BORDER=3> 3 pixel border

Specifying width and height:
You have two options: pixels or percentages
Note however that you will usually specify width but not height.
The length of your text will determine the height, which will
vary in accordance with different monitor sizes and resolutions.

This one cell table is:

<TABLE BORDER=1 WIDTH=504 HEIGHT=432>
width 468 pixels (6 1/2 inches), height 144 pixels (2 inches)

Another option might be:
<TABLE BORDER=3 WIDTH=576 >
width 576 pixels (8 inches) height to be determined

This one cell table is:

<TABLE BORDER=3 WIDTH=80% HEIGHT=25%>
width is 80% of window, height =25% of window
Another option might be:
<TABLE BORDER=5 WIDTH=100% >
width is 100% of window, height to be determined

Example: Two Rows, three Cell-Columns
Each row has a <TR></TR> code
Each cell has a <TD></TD> code.
For the table here, the code is basically:

<TABLE><TR><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD></TR></TABLE>

This is a table with three columns
and two rows. This text appears in the first row, column one.

The size of the cells expands as you type unless you specify a
size. You can also
insert line breaks.

This
one
is
small.

<TABLE BORDER=3 WIDTH="75%" > <TR>
<TD>This is a table with three columns and two rows.</TD>

<TD>The size of the cells expands as you type unless you specify a size. You can also insert line breaks.</TD>

<TD>This<BR> one<BR> is<BR> small.</TD> </TR>

On the left is the html for this table although the full text is not listed for this (second) row.

This cell
is row 2,
column 3.

Specifying the Size of a Cell

When no instructions are given to the browser, each cell may be
different in size.Use the width variables in the <TD> tag for a cell
to specify the size of a cell.

Again, use percentages or pixels. With pixels, make sure that the
total width adds up to the width specified in your table tag. If you
use percentages, the total width of the cells in a row must be100%.

Note also that the width attributes for the first row do not have to
be specified in subsequent rows.

<TABLE BORDER=3 WIDTH=360>
<TR><TD WIDTH=72 ></TD>
<TD WIDTH=288 ></TD></TR>
<TR><TD></TD>
<TD></TD></TR></TABLE>

This table has 2 rows and 2 columns.	<TABLE BORDER=3 WIDTH=360> <TR><TD WIDTH=72></TD> <TD WIDTH=288></TD></TR> <TR><TD></TD><TD></TD></TR> </TABLE>
The border is 3 pixels.	The width of the first row is 1/4 the width of the second row. Height expands as you type.

Go to Tables, page two
Go to Borders Design Interm.Design Lists Alignment