|
Introduction
Tables are a very useful
element in web design.
They are used to structure
and arrange elements and
data on a page. This entire
site was built using tables.
Tables can become very
complex, especially when
using nested tables which
are tables within tables.
^^-Return
to Top-^^
Creating
A Table
There are three tags used
to create a table. The
first tag is the <table>
tag. This tag is used
to define the table. Within
the <table>
tag, you have the <tr>
tag which defines rows
and the <td>
tag which defines columns.
Each of these tags has
a closing tag and if coding
by hand, always make sure
each tag is closed otherwise
you may not be happy with
the results of the table.
Below is an example of
a simple table. It consists
of 3 columns and 3 rows
as well as border of 1
and a width of 300 pixels.
Code
<table
border="1"
width="300">
<tr>
<td>Cell1
in Column 1, Row 1</td>
<td>Cell
2 in Column 2, Row 1</td>
<td>Cell
3 in Column 3, Row 1</td>
</tr>
<tr>
<td>Cell1
in Column 1, Row 2</td>
<td>Cell
2 in Column 2, Row 2</td>
<td>Cell
3 in Column 3, Row 2</td>
</tr>
<tr>
<td>Cell1
in Column 1, Row 3</td>
<td>Cell
2 in Column 2, Row 3</td>
<td>Cell
3 in Column 3, Row 3</td>
</tr>
</table>
Result
| Cell 1 in Column
1, Row 1 |
Cell 2 in Column
2, Row 1 |
Cell 3 in Column
3, Row 1 |
| Cell 1 in Column
1, Row 2 |
Cell 2 in Column
2, Row 2 |
Cell 3 in Column
3, Row 2 |
| Cell 1 in Column
1, Row 3 |
Cell 2 in Column
2, Row 3 |
Cell 3 in Column
3, Row 3 |
^^-Return
to Top-^^
<table>
Attributes
The <table>
tag has a few attributes.
I have already introduced
two of them in the above
example -- border
and width.
The border
attribute defines the
width of the border around
a table and has a default
value of 1. If you don't
want a visible border
around your table and
cells, set the border
to 0. I'm not sure what
the highest number is
that can be used for a
border but I tried up
to 100 and it worked in
both Netscape and Internet
Explorer -- why anyone
would want a table with
a border width of 100
is beyond me.
If you decide to use
a border, there are three
other attributes that
can be used. The first
attribute you can use
is the bordercolor
attribute. This attribute
defines the color of the
border around your table
and the cells within the
table. The next two attributes
can be used in place of
the bordercolor
attribute. They are the
bordercolorlight
and bordercolordark
attributes. These two
attributes are used to
control the light and
dark line colors that
Internet Explorer uses
to create a 3-D effect
on table borders. Unfortunately,
these two attributes only
work in Internet Explorer.
The width
attribute is used to specify
the width of a table.
This value can either
be defined in pixels (like
the above example) or
percentages. I generally
use percentages to declare
the widths of tables.
With percentages, when
a browser window is resized,
the table resizes as well.
There are seven other
attributes that can be
used with the <table>
tag. These attributes
are align,
cellpadding,
cellspacing,
vspace,
hspace,
bgcolor
and background.
The align
attribute is the same
as the <img>
tag's align
attribute. It's values
are left, center and right.
This attribute can be
used to wrap text around
the table, place a table
beside another table or
for general page formatting
purposes.
The cellpadding
attribute defines the
amount of space around
the edges of each cell
within the table. It is
used to provide space
between the cell border
and the data contained
within that cell. The
default value for cellpadding
is 1.
Cellspacing
defines the amount of
space between individual
table cells. This attribute
also has a default value
of 1.
The <table>
tag can also use the vspace
and hspace
attributes which were
discussed in the "Graphics"
section.
There is also an attribute
to set the background
color of a table. This
attribute is bgcolor.
Using this attribute will
define a color that will
be used as the background.
Instead of using a color
for the background of
a table, you can also
use an image. To place
an image as your table
background, you would
use the background
attribute. This attribute
generally works well in
Internet Explorer but
it can be a real pain
when trying to design
for a Netscape browser.
^^-Return
to Top-^^
<td>
Attributes
The <td>
tag, or column tag, has
nine attributes. They
consist of align,
colspan,
rowspan,
valign,
width,
height,
bgcolor,
background
and bordercolor.
The align
attribute is used to align
data within a cell. The
align
attribute has three options:
Left, Middle, and Right.
The Middle attribute is
also referred to as Center.
The colspan
attribute defines how
many columns a cell will
span.
The rowspan
attribute is the same
as the colspan
attribute except that
it refers to how many
rows, rather then columns,
the cell will span.
The valign
attribute is known as
vertical alignment. There
are three values for valign
and they are Top, Middle,
and Bottom. The Top value
aligns all data to the
top of the cell while
the Bottom value aligns
all data to the bottom
of the cell. The Middle
value aligns the data
in the middle of the cell.
With the width
and height
attributes you can specify
the width and height of
an idividual cell. This
will effect the width
of all cells in the same
column and the height
of all cells in that row.
As with the <table>
tag, you can specify a
background color or a
background image by using
the bgcolor
and the background
attributes, consecutively.
The difference between
these attributes and those
of the <table>
tag are that they only
effect individual cells.
You can also specify
a border color around
individual cells. This
is done by using the bordercolor
attribute. You should
note that this attribute
only works in Internet
Explorer.
Below is an example of
how the <td>
attributes
are used.
Code
<table
border="1"
width="425"
cellpadding="4"
cellspacing="0"
>
<tr>
<td
rowspan="3">Cell
1 spans all 3 rows with
a vertical alignment
of middle</td>
<td
colspan="2">Cell
2 spans 2 columns</td>
<td
align="center">Cell
5 with alignment set
to center </td>
</tr>
<tr>
<td
rowspan="2"
valign="bottom">Cell
3 spans 2 rows and is
vertically aligned to
the bottom</td>
<td
rowspan="2"
valign="top">Cell
4 spans 2 rows and is
vertically aligned to
the top</td>
<td
bgcolor="#FFFFFF">
<font color="#000000">Cell
6 with a white background
color</font></td>
</tr>
<tr>
<td
bordercolor="#3333FF">Cell
7 with a border color
of #3333FF</td>
</tr>
</table>
Result
| Cell
1 spans all 3 rows
with a vertical
alignment of middle |
Cell
2 spans 2 columns |
Cell
5 with alignment
set to center |
| Cell
3 spans 2 rows and
is vertically aligned
to the bottom |
Cell
4 spans 2 rows and
is vertically aligned
to the top |
Cell
6 with a white background
color |
| Cell
7 with a border
color of #3333FF |
^^-Return
to Top-^^
<tr>
Attributes
The <tr>
tag has all of the same
attributes as the <td>
tag. Many times you would
use the attributes in
the <td>
tag and not have to worry
about using them in the
<tr> tag.
There are some instances,
such as when using stylesheets,
that you will have to
define attributes in both
the <tr>
and <td>
tags for cross-browser
functionality. One instance
of this is when you use
a stylesheet to define
the look of your fonts.
In Internet Explorer,
you can call the style
for your font by defining
it just in the <td>
tag. For it to work in
Netscape, you may have
to define it in the <tr>
tag for it to work.
^^-Return
to Top-^^
The
<th> Tag
The <th>
tag is used to define
a header in your table.
A header is a title or
a subtitle in a table.
When the <th>
tag is used, the text
that is within that tag
becomes centered and bold.
Here is an example of
the <th>
tag:
Code
<table
width="300"
border="1"
cellpadding="4"
cellspacing="0">
<tr>
<th
colspan="2">This
is the title of the
table</th>
</tr>
<tr>
<td>Cell
1</td>
<td>Cell
2</td>
</tr>
</table>
Result
| This
is the title of the
table |
| Cell 1 |
Cell 2 |
|
