Imagine an invisible box that contains all your text in a nice, neat square. Tables are used for this, and for many other things: to indent, to place navigation buttons along the top, bottom, or side of the page, or to divide the page into vertical or horizontal sections.
The line around the outside is called the border. The border can be thin, thick, invisible, or different colors.
The area inside the border is called a cell. There can be one cell, or 100 cells. The cells can go across. If you want cells to go down, you just make a bunch of one-cell tables, one right after another. The tables will stack on top of each other. If you need two tables to sit beside each other, you have to put the two tables within two cells of a larger table. This is a little complicated, and since this is a site for absolute beginners, I'll leave it alone.
The background color of the entire table can be changed, or the color can be changed for each cell. Here are some examples of tables:
This table has one cell, and a "2" border.
This table is just like the first one, but has no border.
This table
has 4 cells
and a
"3" border
This table is 100% width, one cell, "1" border.
OK, so you get the idea. Most of the time, the borders are invisible, but I've put them in here so you can see how it works. If you don't see them, it just looks like your text/pictures are all aligned like magic.
Here are the tags used to make tables:
<TABLE> </TABLE> <TR> </TR> <TD> </TD>
How you write it
How your viewer sees it
The <TR> and </TR> tags are necessary for the table to work. They have to be placed immediately after the beginning <TABLE> tag, and immediately before the ending </TABLE> tag.
The <TD> tags represent the beginning of each cell, and the </TD> tags represent the end of each cell. Therefore there can be many <TD> tags within the <TR> and </TR> tags.
As with other HTML tags, other bits of code can be put into the <TABLE> tags to change the look. These bits of code are called attributes. These attributes include width, border, bordercolor, cellpadding,and align. Let's use them to jazz up that table we made before:
How you write it
How your viewer sees it
Table width can be determined by percentage or pixels. For example, if you type in <TABLE WIDTH="20%">, the table will take up 20% of the screen. If you type in <TABLE WIDTH="20">, the table will be 20 pixels wide.
The align attribute can be "top", "bottom", "right", "left", or "center." An example of this would be:
<TABLE ALIGN="right">
Finally, you ought to know about cellpadding. Imagine padding all around the edge of your cell, pushing the text inward. Otherwise, the text touches right up against the border.
WITH CELLPADDING
WITHOUT CELLPADDING
Here's an example of the cellpadding attribute within a table tag:
Disclaimer: I'm still learning, and all I know is what works for me...some of this may not be exactly perfect. So if there's an error, email me, and I'll fix it :
