HTML Hyper Text Markup Language: HTML Tables
Using Tables
There is no more useful tool for coding HTML
than the humble Table. Tables allow you to place objects and page
elements very precisely on your web page allowing you a lot more
creative freedom.
There is one big drawback to using tables.
Your browser will wait until ALL
of the material contained in the table has been downloaded before it
displays the table on the page. So, it is absolutely essential that
you include Height and Width tags in any images you put into a
table, so that the browser doesn\\'t wait for every single graphic to
download before it displays the table.
Tables can have borders which will separate
the information obviously, or they can have no borders hence being
invisible on the page.
Here is a table with thin borders:
| Cell A |
Cell B |
Cell C |
| Cell D |
Cell E |
Cell F |
|
|
Here is a table with thick borders:
| Cell A |
Cell B |
Cell C |
| Cell D |
Cell E |
Cell F |
|
|
Here is a table without borders:
| Cell A |
Cell B |
Cell C |
| Cell D |
Cell E |
Cell F |
|
The Parts Of A
Table
Tables are broken down into rows and cells.
Each row contains cells and the cells contain your images and text.
An individual table cell can contain anything you can put on a page,
even another full table! Here are the tags we use to create tables:
|
Table Creation Tags: |
The Tags function: |
| This tells the
browser to start a table |
| ...
This starts and
ends a table header cell |
| ...
| This starts and
ends a table row |
| ... |
This starts and
ends a table cell |
| |
This tells
the browser to end a table |
The
Tag Attributes
The Opening
tag tells your browser that you want to create a table next. As with
most of the tags we have discussed, the
tag has several Attributes you can use to change
the way your table looks and behaves:
BORDER=
If you want your table displayed with a border, you can specify a
numerical value which will tell the browser how many pixels wide you
want the border to be. Using
BORDER="5"
will give you a border 5 Pixels wide, etc.
TIP: I ALWAYS set this value to
"1"
while I am creating the Table. This allows me to view the Table as I
build it, then when I am finished the table and everything appears
the way I want it, I can turn off the border altogether by using
BORDER="0".
WIDTH=
By using this Attribute, you can specify how wide you want the table
to be. If you do not specify a table width, the table will appear as
wide as the objects you put into it. There are two methods you can
use to specify the
WIDTH=
Attribute:
Percentage method
WIDTH="60%"
Using this method will create a table 60% the width of your screen.
This method is recommended because people using different screen
resolutions will always see the table as being 60% of their screen
width, no matter whether they are using 640x480, 800x600 or
whatever.
Absolute method
WIDTH="450"
Using this method you can specify an exact
PIXEL width. This can be very handy if you are placing
objects precisely on your page. Be warned though, if you specify a
table has a width of 800, for example, and a viewer with a
resolution of 640x480 (640 wide by 480 high) tries to view your
table, they wind up not being able to see the whole table and have
to scroll to the right constantly to see everything.
BGCOLOR=
You can use this Attribute to specify the background color of
EVERY
cell in your table. ALL of the
cells in the table will have the same background color. Code the
BGCOLOR= Attribute like this:
BGCOLOR="#ff0000"
ALIGN=
Using this Attribute you can define the alignment of the
WHOLE
table. Correct values for this Attribute are
"right", "left" and
"center". So you code this like so:
ALIGN="right"
CELLPADDING=
This numerical value lets you specify how many pixels there should
be between the object/text in the cell and the wall of the cell that
the object is in. This value will affect
ALL
of the table\\'s cells. You cannot have one cell with a different
cellpadding value than another in the same table. You code it
thusly:
CELLPADDING="2"
TIP: The most important of
cellpadding and spacing (in my opinion) is cellpadding. Concentrate
on that when building the table. Try it with a cellpadding of zero,
and then with a cellpadding of eight, and see what happens. If you
are showing the borders of the table (not setting it to zero), then
cellspacing is a great way to control the width of the borders.
Generally, I set cellspacing to zero and cellpadding between 2 and
10.
CELLSPACING=
This numerical value lets you specify how many pixels should be
BETWEEN each cell. This value affects
ALL cells in the table the same
way. We code this one just like this:
CELLSPACING="3"
TIP: If you are having trouble
understanding the difference between cellpadding and cellspacing,
imagine you have a crate full of beer cases. The space between the
individual bottles and the case they are in, is the
CELLPADDING.
The space between each of the beer cases inside the crate is the
CELLSPACING.
You can combine any or all of the Attributes
into one
WIDTH="60%"
CELLPADDING="2"
ALIGN="RIGHT"
BORDER="1">
Remember that the Table Attributes affect
the ENTIRE
Table.
The Table Header
Using the
Table Header tag is a convenient way to create a cell with bolded
heading text in it in one easy step. The header cell is identical to
other cells in your table and can be manipulated in the same way.
Here is a simple table with a header cell:
|
Testing the header
| Example Cell
|
This tag is not widely used anymore since it
is usually just as easy to create a cell and bold the text in it.
Here is how you would code the example Table above:
BORDER="1">
<-- Opening Table tag with the border on
Testing the header
<--
defining the header cell and text
<--
defining the first row with this tag
Example Cell
| <--
defining the individual cell
<--
ending the first row with this tag
<--
ending the table with the Closing table tag
Coding A Table
With One Row
Here is a very simple table with the border
value set to "1":
|
|
Row 1 |
| Column 1
Column 2 Column 3 |
Let\\'s take a look at the coding for the
example table:
BORDER="1">
<-- Opening table tag with the border \\'on\\'
<--
starting the first row with this tag
Cell A
|
<-- defining the individual cell
Cell B
|
<--
defining the individual cell
Cell C
|
<--
defining the individual cell
<-- ending the
first row with this tag
<-- finishing the table with
this tag
Coding A Table
With Two Or More Rows
All you have to do is tell the table to start a
new row, and define more cells:
|
Cell A |
Cell B |
Cell C |
|
Cell D |
Cell E |
Cell F |
|
Row 1
Row 2 |
| Column 1
Column 2 Column 3 |
Here is how I would code the table you see
above:
BORDER="1">
<-- Opening table tag with the border \\'on\\'
<--
starting the first row with this tag
Cell A
|
<-- defining the individual cell
Cell
B |
<-- defining the individual cell
Cell
C |
<-- defining the individual cell
<-- ending the
first row with this tag
(here is where the
second row comes in)
<--
starting the SECOND row with this tag
Cell D
|
<-- defining the individual cell
Cell
E |
<-- defining the individual cell
Cell
F |
<-- defining the individual cell
<-- ending the SECOND
row with this tag
<-- finishing
the table with this tag
Customizing Your
Table Cells
Each table cell requires an Opening
tag and a Closing tag to
work properly. You can insert text, images, anything that you would
put on any other portion of your page, into a table cell. There are
several attributes you can use to modify your cells:
ALIGN=
This Attribute allows you to define
HORIZONTAL
ALIGNMENT of text or objects in the cell. Correct values
for this attribute are "left",
"center" and
"right" We code it like this:
ALIGN="right"
VALIGN=
This attribute lets you define the
VERTICAL
ALIGNMENT of text or objects in the cell. Correct values
for this attribute are "top",
"middle" or
"bottom". We code it like this:
VALIGN="bottom"
COLSPAN=
This attribute allows you to specify how many columns a cell should
span across. The correct value is a numerical value entered like
this:
COLSPAN="2"
The number you use depends on how many
columns you wish to span across.
ROWSPAN=
This attribute allows you to specify how many rows a cell should
span across. The correct value is a numerical value entered like
this:
ROWSPAN="2"
The number you use depends on how many rows
you wish to span.
BGCOLOR=
This attribute lets you specify the background color of that
individual cell. You complete this attribute by entering a
Hexadecimal Color Value, like this:
BGCOLOR="#000000"
WIDTH=
This attribute lets you specify how wide the individual cell should
be. You can use the percentage method or the absolute pixel width
method.
Percentage method:
WIDTH="35%"
(Note: Using the percentage method will give
you a percentage of the width of the table, not the width of the
page.)
Absolute method:
WIDTH="150"
This is the width of the cell in
PIXELS.
Spanning Columns
and Rows
Spanning is a very useful table creation tool.
Cell spanning allows you to alter the size of cells to your own
needs. Here is the simple table we created before:
| Cell A |
Cell B |
Cell C |
| Cell D |
Cell E |
Cell F |
|
Row 1
Row 2 |
You will notice each row has 3 cells, but
what do we do if we want the second row to have only two cells? If
you simply remove one cell, you will notice your table gets all
screwed up.
So, what we need to do is modify the cell
tag with an attribute that will allow us to span one cell across two
existing cells. If we use the COLSPAN=
Attribute we can stretch a cell across 2 or more columns of the
table:
| Cell A |
Cell B |
Cell C |
|
Cell D
|
Cell F |
|
Row 1
Row 2 |
Notice Cell D
is now stretched, or SPANNED,
across two cells.
Here is how the above table is coded:
BORDER="1">
<-- Opening table tag with the border on
<-- starting
the FIRST row with this tag
Cell A
| <--
defining the individual cell
Cell
B |
<-- defining the individual cell
Cell
C |
<-- defining the individual cell
<-- ending
the FIRST row with this tag
(here is where the second row comes in)
<-- starting
the SECOND row with this tag
COLSPAN="2">
Cell D |
<-- defining the individual cell
(Notice I removed Cell E entirely)
Cell F
| <--
defining the individual cell
<-- ending
the SECOND row with this tag
|
|
|
| 