HTML Tutorials: Tables
Tables can enhance your HTML authoring and improve web
site organization.
Tables are used by webmasters all around
the Internet as the means of putting "stuff" neatly
into different places. Like most web sites, Spoono uses tables
on nearly every page for instance the logo and the navigation
menu on our main page are all in separate cells that make
up the table structure of our main layout. On this page,
the ad at the top and the text of this tutorial are inside
of tables. Tables provide a cleaner alternative to using
frames, and it only requires the use of the three basic table
tags.
The three main table tags and their closing counterparts
are: <table>, which starts the table, </table>,
which ends the table, <tr>, which begins a row, </tr>,
which ends a row, <td>, which begins a cell, and </td>,
which ends a cell. These tags are easy to work with and you
will find out that you can do a lot with them. Let's start
with a basic example:
Example 1
<html>
<head>
<title>Tables</title>
</head>
<body>
<table width="100%">
<tr>
<td width="25%">
My First Cell
</td>
<td width="25%">
My Second Cell
</td>
<td width="25%">
My Third Cell
</td>
<td width="25%">
My Fourth Cell
</td>
</table>
</body>
</html>
This code produces:
| My First Cell |
My Second Cell |
My Third Cell |
My Fourth Cell |
Now that you know the basic fuction of the tables you can
tailor them to suite your needs by adding attributes. In
the above example the width attribute was added to <table> and <td> tags
to define the width of the table in percentages. You can
also set the width to exact pixel dimentions by using numbers
instead of percentages. It is good idea to start all of
your tables by defining the following attributes in your <table> tag:
<table cellpadding="0" cellspacing="0" border="0">
This is good to do because different browsers,
especially older ones, have different default settings for
how tables appear. Naturally, that can cause some problems.
The cellpadding attribute defines the amount of space in
pixels that will serve as a barrier between the content inside
the table and table cell walls. The cellspacing attribute
defines the amount of space in pixels that lies between the
table cells. As the name suggests, the border attribute defines
the size of the table border in pixels.
To align your tables, you can add align attributes to the <table> and <td> tags.
In the <table> tag the align attribute
defines how the entire table will horizontally align to the
enviroment outside of it. The choices are left, center, and
right (For example, <table align="center"> centers
a table). In the <td> tag, there are
two attributes, align and valign that define the horizontal
and vertical alignment of a cell's contents. The choices
for align are left, center, and right. The choices for valign
are top, middle, and bottom (For example, <td align="right" valign="bottom"> aligns
the contents of the cell to the bottom right).
The background color of either the entire table, or a specific
cell can be defined with the bgcolor attribute. You can either
use the common text name of colors such as bgcolor="red" or
hexadecimal codes such as bgcolor="#FF0000".
In <td> tags you can also define a background
image to tile in the background of a cell by using the background
attribute (For example, <td background="phatimage.gif"> would
make phatimage.gif tile in the background of a cell.
The last commonly used attributes for tables are colspan
and rowspan. These two define the amount of cells that a
particular cell may span. For example, if you had a table
with three columns and you wanted to put a title on the top
that would span all three of the columns, you would use the
colspan attribute like this: <td colspan="3"> Your
Title </td>. The rowspan attribute
does the same thing, but defines the amount of rows that
a cell occupies.
That about covers everything. Now it's time for another example:
Example 2
<html>
<head>
<title>Tables</title>
</head>
<body>
<table cellpadding="10" cellspacing="5" border="5" width="100%">
<tr>
<td bgcolor="yellow" align="center" colspan="2">
One Big Cell
</td>
</tr>
<tr>
<td bgcolor="orange" align="left" width="50%">
Left Cell
</td>
<td bgcolor="green" align="right" width="50%">
Right cell
</td>
</tr>
</table>
</body>
</html>
This code produces:
| One Big Cell |
| Left Cell |
Right cell |
Lastly, I feels as if I am obligated to mention the lost
fourth table tag that serves little purpose nowadays when
we have fancy CSS files to describe all of our font styles.
The fourth tag is <th> which stands for "table
heading." This tag functions exactly like a <td> tag,
except the font of the text is heavier, like a heading rightly
should be.
|
