|
Beginning:
Creating a Table
Believe
it or not, almost every web page you see these days use
tables in one way or another. Online merchants may use tables
to present their wares; a picture gallery may separate images
using tables. Even though you don't see them, there are
several tables on Freeserver's web pages as well. There
are thousands of uses for tables, both visually and organizationally.
Getting
Started:
How
do I create a table?
How do I change the size and look of
the table?
What are cells, and what can I do with
them?
How do I make different table cells
different colors?
How
do I create a table?
Many
web design programs will create tables for you. If you are
using one of these programs simply click the right button
and you're set. For us code-jockeys, however, there are
a few tags and rules that we need to keep in mind.
The
three basic tags used in building a table are <TABLE></TABLE>,
<TR></TR> and <TD></TD>.
The <TABLE>
tag tells a browser that there is a table on your web page.
The <TR> tag tells the browser where to start a row
within that table, and the <TD> tag lets the browser
know where to place a column in the table.
For
example:
<TABLE>
<TR>
<TD>This is row 1, column 1</TD>
<TD>This is row 1, column 2</TD>
</TR>
<TR>
<TD>This is row 2, column 1</TD>
<TD>This is row 2, column 2</TD>
</TR>
</TABLE>
Would
create a table that looks like this:
| This is row 1, column 1 |
This is row 1, column 2 |
| This is row 2, column 1 |
This is row 2, column 2 |
Note that I created a row <TR> before I created a
column <TD>. HTML requires that you always create
a row before creating a column; otherwise your table may
not work. Also note that I created my row <TR>, created
my column <TD>, entered my text, and then made sure
that I closed my column </TD> before starting a new
column. I then closed that column </TD> before closing
my row </TR>. Last of all I closed my table </TABLE>.
Always make sure you close your tags, otherwise your table
is guaranteed to break (that's bad code, the bane of every
person that has used the Internet more than twice in their
lifetime).
How
do I change the size and look of the table?
So,
creating a table is easy enough. But that sure is an ugly
table, either too big or too small for your purposes. The
great thing about tables is that your can stretch them out
or shrink them down. You can mold them like putty.
Changing
the table size requires that you manipulate the <TABLE>
tag. It's easy, really. If you want your table to be as
wide as your page, you can change your <TABLE> tag
to <TABLE LENGTH = "100%">. Same with the
width: <TABLE WIDTH = "30%">. You can even change
the height and width at the same time: <TABLE LENGTH
= " 100%" WIDTH = "30%">.
There
are also ways to change the border around your table. Let's
assume that you don't want anyone to see that you have a
table on your page. If you set your table's border to 0
no one will know that your page looks so good because you
used a table to design it. The HTML code for this is <TABLE
BORDER = "0">. You can also make your table border thicker
or thinner by changing the border size. For example <TABLE
BORDER = "20"> would make the border unbearably thick.
You
can move your table to the middle or to the right of your
page as well. By default anything you put on a web page
will justify to the left. You can change all of that. By
adding the code <TABLE ALIGN = "CENTER"> you can center
your table on the page. Same thing works with <TABLE
ALIGN = "RIGHT">.
Let's
take a look at your table using all of the elements above:
<TABLE
HEIGHT = "75%" WIDTH = "20%" BORDER = "5" ALIGN = "CENTER"
>
<TR>
<TD>This is row 1, column 1</TD>
<TD>This is row 1, column 2</TD>
</TR>
<TR>
<TD>This is row 2, column 1</TD>
<TD>This is row 2, column 2</TD>
</TR>
</TABLE>
This
code would create a table that looks like this:
| This is row 1, column 1 |
This is row 1, column 2 |
| This is row 2, column 1 |
This is row 2, column 2 |
What
are cells, and what can I do with them?
Cells
are the insides of a table. Where a row intersects a column
a cell is formed. You can control what the cells inside
of your table are doing. Maybe you would like two cells
across the top of your table to merge into one. Perhaps
you want to add space between the cell border and the image
or text within the cell, what we call cellpadding. Maybe
you want to add space between your cells, called cellspacing.
All of this can be done by manipulating the <TABLE>
or <TD> tag.
First,
cell padding and spacing. It is important to know the difference
between cell padding and cell spacing. CELLPADDING sets
the number of pixels between the edge of the cell and the
text. CELLSPACING sets the number of pixels between cells.
In order to add or remove space between the cells within
your table simply add this code to your <TABLE> tag:
<TABLE
CELLSPACING = "3">
This
will create 3 pixels of space between all of the cells in
your table. If you want to add space between your text or
images and the cell border you can do so by adding
<TABLE
CELLPADDING = "3">
to your
<TABLE> tag.
If you
would like to merge two cells together you change the <TD>
tag. Let's assume that you would like to merge to columns.
You would add COLSPAN to your <TD> tag:
<TD
COLSPAN = "2">
would
merge the next two columns together. If you wanted to merge
two rows you would add ROWSPAN to the <TD> tag:
<TD
ROWSPAN = "2">
Here
is an example of the code for a table using all three of
these elements:
<TABLE
CELLPADDING="3" CELLSPACING="2">
<TR>
<TD COLSPAN = "2"> This is row 1, column 1</TD>
<TD>This is row 2, column 2</TD>
</TR>
<TR>
<TD ROWSPAN = "2">This is row 2, column 1</TD>
<TD>This is row 2, column 2</TD>
</TR>
<TR> <TD>This is row 3, column 1</TD>
<TD>This is row 3, column 2</TD>
</TR>
</TABLE>
Here
is how your table would look:
| This is row 1, column 1 |
This is row 2, column 2 |
| This is row 2, column 1 |
This is row 2, column 2 |
| This is row 3, column 1 |
This is row 3, column 2 |
This
may seem a little confusing, but if you play with tables
a little you will get the hang of it.
How
do I make different table cells different colors?
One
great thing about tables is your ability to change the background
color of a cell. You can do several things with this, including
making a checkerboard or making your rows alternate colors
so that your table is easier to read. All you have to do
to change a cell's color is add a BGCOLOR attribute to the
<TD> tag.
For
example:
<TD
BGCOLOR="#FFFF88"> or <TD BGCOLOR="BLUE">
There
you have it, Tables in a nutshell. Have fun with them!
|
