|
|
Tables Tutorial
This tutorial assumes that you know something
about HTML. If you are unfamiliar with the basics of HTML the head to our Basic
Html Tutorial. Otherwise, let's get started!
Tables are, in their most basic form, like a
spreadsheet. They allow you to organize things into a set order, keep
information organized, etc.
However, tables have gone far beyond their original intent. They are now used as
an integral part of web design. They can help load pictures faster, and can be
used to make navigation easier.
In order to get started you will need a generic page. So go ahead and copy this:
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Now that you have the basic page ready to go,
let's get on with the tutorial The next part will show you how to make a basic
table, including borders.
The Basic Table with Borders
Now it is time to begin creating those
tables! First, you need to know the <TABLE>
command. That is the command that lets the browser know that anything in-between
the <TABLE></TABLE> commands are
table information.
Next there is the <TR> command. This is
the Table Row command. It sets up the rows within the table.
Another command is the <TD> command. This
is the Table Data command. This sets up the information in each
individual cell (the space in each section of the table).
So, if you have a friend named Jack and you want his name in the table, then put
this code into the generic HTML from earlier:
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>Jack</TD>
</TR>
</TABLE>
</BODY>
</HTML>
If you look at the page you just made then
you notice that all you see is Jack's name, sitting there, looking lonely with
no table around him. Of course, the table is there, but it is not visible. How
about we put those walls around Jack?
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD>Jack</TD>
</TR>
</TABLE>
</BODY>
</HTML>
The <FRAME
BORDER> command is based on pixels. This will allow you to set up the
border size of the table to just about anything you want. Go ahead and try
different sizes. I will wait.
Okay, welcome back! Now it is time to start
changing the size of the cells within the table. For this you will use <TD
WIDTH>. You can use percentages like this:
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD WIDTH=50%>Jack</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Or it can use pixels instead.
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD WIDTH=100>Jack</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Now it is time to have another friend of
yours join Jack. How about that good buddy of yours, John? All you have to do is
add another <TD>.
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD>Jack</TD>
<TD>John</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Now two more of your friends want to get in
that table of yours. So, rather then continuing on the same row, now it is time
to create a new row. To do this, add in another <TR>.
This will create the new row. Then put in the information after the new <TR>.
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD>Jack</TD>
<TD>John</TD>
</TR>
<TR>
<TD>Jill</TD>
<TD>Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>
The second <TR>
command sets up a new row. Now if you want the table to appear in the center of
your page then the <ALIGN> command works
great!
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=3>
<TR>
<TD>Jack</TD>
<TD>John</TD>
</TR>
<TR>
<TD>Jill</TD>
<TD>Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Now let's move on to adding some color to your table! The next part will cover
background color as well as border color.
Adding Color to your Tables
Let's add some color to the table. First we
will add in some background color. The <TD BGCOLOR>
command will be used here. You can use either the color names or, for the full
216 web safe color range use the Hex chart. Also,
just so that it is very obvious that it is the background color that is being
changed, make your border equal to a 10 in size.
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BGCOLOR="RED" ALIGN=CENTER BORDER=10>
<TR>
<TD>Jack</TD>
<TD>John</TD>
</TR>
<TR>
<TD>Jill</TD>
<TD>Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Now the whole table has a background color of
red. But what if you want each row to have it's own color?
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=10>
<TR BGCOLOR="RED">
<TD>Jack</TD>
<TD>John</TD>
</TR>
<TR>
<TD>Jill</TD>
<TD>Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>
By adding in the background to the area you
want to have that color you can get the desired effect. You can even set up each
cell to have a different color.
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=10>
<TR>
<TD BGCOLOR="RED">Jack</TD>
<TD BGCOLOR="BLUE">John</TD>
</TR>
<TR>
<TD BGCOLOR="YELLOW">Jill</TD>
<TD BGCOLOR="CYAN">Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>
You can also change the border color. This is
done with the <TABLE BORDERCOLOR>
command. Just put in the color you want by name or by the hex.
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=10 BORDERCOLOR="RED">
<TR>
<TD>Jack</TD>
<TD>John</TD>
</TR>
<TR>
<TD>Jill</TD>
<TD>Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Alright, on to the next section where you will learn about putting images into
your tables.
Alright, images can also get into a table.
This is great for keeping a logo in one spot, or a graphical table of contents.
Just use the <TD IMAGE SRC> command.
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=10>
<TR>
<TD>Jack</TD>
<TD>John</TD>
</TR>
<TR>
<TD>Jill</TD>
<TD><IMAGE SRC="HERDTITLE5.GIF></TD></TR>
</BODY>
</TABLE>
</HTML>
The cell adjusted it's size so that the
entire image could fit, so of course, that table looked a bit odd. However,
using the commands we went over earlier you can adjust the table to look the way
you want.
In the next section we will cover Cell Padding and Cell Spacing!
Cell Padding and Cell Spacing
Another way to control the look and feel of
your tables is with the <CELLPADDING> and
<CELLSPACING> commands. The <CELLPADDING>
command determines how much space is in-between your text/image/whatever in the
cell and the cell border. The default here is 1. The <CELLSPACING>
command determines the space between cells. Try the <CELLPADDING>
first.
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=3 CELLPADDING =40>
<TR>
<TD BGCOLOR="RED">Jack</TD>
<TD BGCOLOR="BLUE">John</TD>
</TR>
<TR>
<TD BGCOLOR="YELLOW">Jill</TD>
<TD BGCOLOR="CYAN">Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Now try using the <CELLSPACING>
command.
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=3 CELLSPACING=40>
<TR>
<TD BGCOLOR="RED">Jack</TD>
<TD BGCOLOR="BLUE">John</TD>
</TR>
<TR>
<TD BGCOLOR="YELLOW">Jill</TD>
<TD BGCOLOR="CYAN">Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>
There you go! Now you can create great
looking and useful tables! Whenever you need to make a great looking, and real
organized, page use tables. Simple, and powerful!
Basic HTML Tutorial | Frames Tutorial | Forms Tutorial | Meta Tag Tutorial | Style Sheets Tutorial |
|
|
|