I have divided the topic of tables into two sections because it is a huge area.
The basic codes--which we will cover in this section--are simple but the applications are
endless. The best thing you can do when learning about tables is to keep your eyes open
when surfing and take notice when you see one being used in a new way.
Now, in case you're not sure what I'm talking about, tables usually look something like this,
though of course they can be any size and contain as many boxes (cells) as they need to:
The basic table code is as follows.
<TABLE> and </TABLE> of course mark the beginning and the end of the table.
<TR> and </TR> mark the beginning and the end of each row of cells in the table;
the code above would be for a table with two rows. <TD> and </TD> mark the
beginning and end of each cell itself; the code above would be for a table with four
cells, (two in each row).
You can place text, images, and just about anything you want inside each cell of the table,
simply by typing it in between the <TD> and </TD> for the cell you want. (I have
placed in my table only a small invisible image file to show you what the table looks like; there
are no real contents.) In fact,
tables act almost like little webpages inside a webpage, so that you can determine a different
background color, text color, or just about anything you like inside a table--or even inside
individual cells. We'll learn how to do that farther down.
First, though, we'll learn how to format your table. The first thing you might notice is that
the table I showed above has a border around it. You can adjust the width of this border like
The number substituted for x will determine the number of pixels wide your table border is; the
one above has a border of 3.
Then, you can specify certain dimensions for your table or for the rows or cells in the table:
<TABLE WIDTH=xx HEIGHT=xx>
<TR WIDTH=xx HEIGHT=xx>
<TD WIDTH=xx HEIGHT=xx>
You do not, of course, have to use all three of the above codes together. If you do specify a width and height
for the table and then do so for rows or cells in the table, make sure the widths and heights of the cells
or rows add up to the same total you got for the dimensions of the table.
Then of course you can align your table to the left or the right side of the page:
Just substitute "left" or "right" for the x's. If you want the table centered, use the
The same sort of code can be used to align the contents of a cell within a cell:
Substitute "left," "right," or "middle" for the "align" x's to orient the contents of the
cell to the left, right, or center. Use "top," "middle," or "bottom" for the "valign" x's
to orient the material at the top, middle, or bottom of the cell. You can of course combine
the two codes.
You can also make certain cells span the width or height of several normal cells:
The number you substitute for x determines the number of cells that particular cell will
stretch, either in width or height. (Rowspan for width, colspan for height.)
It should also be noted that any font specifications you made outside the table will be ignored
inside the table, and you will have to respecify it by placing the "font" tag (see my "Text" tutorial)
inside each cell.
As I said, tables can act like miniature webpages, in that you can specify background images, colors,
text colors, etc, inside them. You would do this by treating the table, row, or cell tag just like the
"body" tag at the top of your webpage code:
<TABLE BGCOLOR="#xxxxxx" TEXT="#xxxxxx" LINK="#xxxxxx" VLINK="xxxxxx" BACKGROUND="imagename.ext">
<TR BGCOLOR="#xxxxxx" TEXT="#xxxxxx" LINK="#xxxxxx" VLINK="xxxxxx" BACKGROUND="imagename.ext">
<TD BGCOLOR="#xxxxxx" TEXT="#xxxxxx" LINK="#xxxxxx" VLINK="xxxxxx" BACKGROUND="imagename.ext">
If you place the codes inside the table tag, they will apply for the entire table unless something else is
specified inside a row or cell tag. If you place them in the row tag or cell tag, they will apply to just
that row and cell. If no codes are used, the default will revert to what you put in the "body" tag above.
You can control the spacing between the cells. If you take another glance at the example table
I gave up above, you will see what I mean by the spaces. You can control the width of those spaces with this:
x determines the number of pixels wide the spacing will be. Substituting 0 for x gets rid of the space altogether
(although there will still be a line visible between each cell unless you mark the table border as 0 also.)
I used a cellspacing of 5.
There is one last code, and that determines the space between the edge of the cell and its contents inside. You may
or may not want to use this code, depending on what you're using the table for:
The number substituted for x determines the number of pixels placed between the sides of each cell and its contents.
So, now you know the basic table codes and are ready to move on to "Advanced Tables," in which we'll learn about (and
take a look at) some useful table applications.