| |
Tables
A table is divided into rows and columns:
It is always built row by row (ie.. left to right for all columns of the table
| Column 1 of Row 1. |
Column 2 of Row 1 |
| Column 1 of Row 2. |
Column 2 of Row
2 |
Here's an example
of table
coding
Here's
what the different tags mean:
Table
Row<TR>
Content of a Row.
Table Heading<TH> Content of a
Heading
Table
Data<TD> Content of a Cell.
<TH>and<CAPTION>are optional.
|
<!doctype html public
"-//w3c//dtd html 4.0
transitional//en">
<html>
<head>
<title></title>
</head>
<body>
<TABLE COLS=2
BORDER=1>
<TR>
<TH>Column 1<br>Row 1</TH>
<TH>Column 2<br>Row 1</TH>
</TR>
<TR>
<TD>Row2</TD><TD>Row 2
</TD>
</TR>
<TR>
<TD>Row3</TD><TD>Row 3
</TR>
</TR>
<TR>
<TD>Row4</TD><TD>Row 4
</TD>
</TR>
<CAPTION>Caption,
above or
below table.
</CAPTION>
</TABLE>
</body>
</html>
Copy it in the box below and try
it
Table Attributes:
<TABLE BORDER="5">
Table border in pixels. |
<TABLE COLS="2">
Number of vertical
columns. |
<TABLE WIDTH="640" COLS ="1">
Give
table width as a percentage of window or in
pixels. |
Center the table from tag to tag
<CENTER><TABLE></TABLE></CENTER> |
Table
Attributes (Cell, Column, and Row):
<TABLE CELLPADDING="12">
Padding between text
and edge of cell, in pixels. |
<TABLE CELLSPACING="12">
Spacing
between cells, in pixels. |
<THCOLSPAN="2">&<TD COLSPAN="2">
The number of columns a cell spans across.
Used for both
Table Heading and Table Data. If 0, the cell spans all
columns. |
<TH ROWSPAN="2">
<TD ROWSPAN="2">
The number of rows a cell spans
down.
Used for both Table Heading and Table Data. |
Two rows are spanned by the cell on
the left. |
| If 0, the cell on left spans all
rows. |
Controlling Text
Within a Cell:
ALIGN (Horizontal) and
VALIGN (Vertical)
<TD VALIGN="top">
Maintains text at top of cell.
|
<TD VALIGN="bottom">
Maintains
text at bottom of cell |
ALIGN Default is "left".
VALIGN Delfault is "middle".
|
<TD ALIGN="center">
|
<TD VALIGN="baseline">
Begins
text where inserted, continues down.
|
<TD VALIGN="top">
<TD
ALIGN="right">
|
Values for VALIGN are:
baseline, bottom, middle, or top.
Values for ALIGN are:
left, center, or right. |
Adding Color
and Images:
<TABLE BODY BACKGROUND="yellotx.jpg">
Background image for entire
table. |
<TD
BGCOLOR="#CC0000">
Background color for each
cell. |
| The Power of
Tables:
We can now begin to use the true power of Tables.
First
we get rid of Borders.
<TABLE BORDER="0">
Let's
add an image
Then maybe place a
nested table
in the right cell of this table, give it
some color. |
This
table uses
|
|
|
|
|
|
|
|
|
|
|
|
<TD
COLSPAN="5">
top and
bottom. |
|
Eye
Strain
&
Left Margin |
When reading text your eye tends to loose its place if the
text is over 60 characters wide. In addition different
browsers and different monitors may cut off or reformat the
right side of your page, especially if images are
included. For these reasons many Web sites use this type
of formating, including a wider left margin, all which
help ease eye strain.
<TABLE BORDER="0" COLS="2" CELLPADING ="0"
WIDTH="60%">
<TR>
<TD WIDTH=
"16%"VALIGN="top">Eye Strain </TD>
<TDVALIGN="top">This Text</TD>
</TR>
</TABLE> |
|
If you decide to design your page so that most browser
windows and Web TV will be able to display the
page as written, then the cell width, and your page, must be
assigned an absolute value of no more than 544 pixels (The
maximum TV screen width). That width allows 53
characters (using my default font). 480 pixels will handle all
browsers. |
| If you include text
or images in this area, what happens? |
Web TV, older browsers, differen't window configerations:
If I assign a table width of 65% of window, keep this right
cell at 544 pixels, and assign the left cell a value of 100%
of table, then as the viewers window or Web TV window narrows,
the left cell will begin to collapse. At least, that is the
theory. Therefore it is best to use the left margin cell as
white space or colored indent if you wish to include all
viewers. |
This
is a good place for an Index
of your pages,
Advertisment,
or
Links to other
pages. |
<TABLE BORDER="0" COLS="3" WIDTH="65%"
CELLPADDING="5"> |
Click here to make money
on the
Web! |
Example of a not-so-good
table:
|
|
|
|
|
|
|
|
|
|
|
|
|
For the top row I used the "rb.gif"
image, and increased the WIDTH to span all eight
columns. The left margin is 6 columns, each with its own
color.
Text to the edge of a cell looks cramped, but I
could not use
TABLE
CELLPADDING because that
would
change the fill effect I
wanted on the top and left
borders. I could create another
column just to
the left of this
text and use the same background
as
this cell, with no border,
creating a margin between the
left rainbow margin and this
cell. |
(12)
|
This
'nested'
table
uses |
|
|
|
|
|
|
|
|
|
|
|
|
<TD
COLSPAN="5"> Top and bottom
Row. |
Make
sure your font color and background color have enough
contrast, you may need to change
color. |
| |
Tables are Powerful , and color can be
used
to enhance your site.
Both tables and color can
be overused and abused,
as they are in this table.
This is an exercise used to illustrate only a small
portion of what tables can perform.
|
Try you hand at the different table combinations here:
Click here
to learn about frames
|
