|
Do you really want to create a table? Well, let's start with
tables by looking at the table tag:
<TABLE>
......contents of table.......
</TABLE>
The <TABLE> tag begins the table, you place what you want
inside, and end the table with the </TABLE> tag. To begin
adding contents to your table, you will need the <TD> tag.
The "TD" stands for table data, which is what you will place
after this tag. You end a table data section with the </TD> tag.
Here is a basic table with just one cell:
<TABLE>
<TD>
This is my table!
</TD>
</TABLE>
The table will turn out like this:
What? No border? Don't worry, to get the border
we just add the border command to the <TABLE> tag, like
this:
<TABLE border="2">
<TD>
This is my table!
</TD>
</TABLE>
And now the table has the border around it:
You can set the border to be as big or small
as you like by changing the number inside the quote marks.
If you set it to
border="0", you will have a table with no border around it.
Of course, you probably want the table to have
more than one cell in it. To add another cell on the same line,
just use the <TD> tags
again, like this:
<TABLE border="2">
<TD>
This is a cell
</TD>
<TD>
This is a cell
</TD>
</TABLE>
And now we have two cells:
| This is a cell |
This is a cell |
Well, what if you want to go to the next line,
or in table terms, the next row? To do this, you use the table
row tags, <TR> and </TR>:
<TABLE border="2">
<TD>
This is a cell
</TD>
<TD>
This is a cell
</TD>
<TR>
<TD>
This is the new row
</TD>
<TD>
I'm on the new row, too!
</TD>
</TR>
</TABLE>
Now there are two rows, each with two cells:
| This is a cell |
This is a cell |
| This is the new row |
I'm on the new row, too! |
There are a couple of commands you can add to
the <TABLE> tag
to get more spacing between cells. Here they are:
- cellspacing=" "
Use this command to add more space around each cell. Place a number inside
the quote marks.
- cellpadding=" "
Use this command to add more space inside each cell. Place a number inside
the quote marks.
I'll show you an example of both of these now. Let's say we
added the cellspacing command to our last table, and set it to
equal 12, like this:
<TABLE border="2" cellspacing="12">
Now the table would look like this:
| This is a cell |
This is a cell |
| This is the new row |
I'm on the new row, too! |
Now, suppose we used the cellpadding command, and set it to
12, like this:
<TABLE border="2" cellpadding="12">
Now the table looks like this:
| This is a cell |
This is a cell |
| This is the new row |
I'm on the new row, too! |
And of course, you can use both at once:
<TABLE border="2" cellspacing="15" cellpadding="15">
| This is a cell |
This is a cell |
| This is the new row |
I'm on the new row, too! |
You can add just about anything you would like inside the cells.
You can add links, images, headings, paragraphs and more.
To use a link inside a cell, just place the
link tag inside your <TD> tags, like this:
<TD>
<A HREF="http://www.mysite.com">My Favourite Web Site!</A>
</TD>
Now you will have a link inside your cell:
To place an image inside a cell, you do the same thing with
the image tag:
<TD>
<IMG SRC="monkey.jpg">
</TD>
You may have noticed everything is aligned to the left side
of each cell. This is the default setting. In the next section
we will cover how to change the alignment of your cell contents,
make cells stretch across more than one column or row, define
a table width, and change cell background colors.
|