MaraHTML

¤ Tisha Look's HTML Tutorial ¤

How To Create And Modify Tables

Tables in HTML are the same as tables in any word processing or spreadsheet document. They come in handy for numerous things and they're extremely flexible. Each table has rows and columns. Here's an example of a table with 3 rows and 5 columns:

1	2	3	4	5
6	7	8	9	10
11	12	13	14	15

There are 3 tags to a basic table: TABLE, TR and TD. I'll explain a little about each of them now.

TABLE - The TABLE tag is what starts the table off and it's where you determine how far apart your table cells will be, how much padding you want in each table cell, what kind of border you want (if any), the width and the alignment. The closing TABLE tag is what ends each table.
TR - The TR tag is what starts each table row. Likewise, the closing TR tag is what ends each row.
TD - The TD tag is what starts each table cell. Likewise, the closing TD tag is what ends each table cell.

Here's the code for the table shown above:

TABLE variables:
As you can see, there are different variables you can use with the TABLE tag. All of them are optional. By default, a plain <TABLE> is left-aligned, is the same width as the contents of the table, has a cellspacing of 2 and a cellpadding of 2 and a border of 1. I'll try to explain each of these a little better.

ALIGN - You can align your table to the left, center or right of your page. By default, the table is left-aligned.
WIDTH - You can specify the width of your table in either percentages or pixels. By default, the table has no set width and grows to accomodate the contents of the table cells.
CELLPADDING - Cellpadding is the distance in pixels between the inside edge of each table cell and the contents. If you set your cellpadding to 0, all your text will touch against the table cell border.
CELLSPACING - Cellspacing is the distance in pixels between each of your table cells. The higher the number, the further spaced apart they'll be.
BORDER - If you want your table to have a border, you can specify the number here. The higher the number, the thicker the border will be around the table and each of the cells. If you don't want any borders, simply set this to 0. By default the table border is set to 1.

TD variables:
There are a couple TD variables but, since some of them have been turned off by Marapets, I'll stick with the main one: ALIGN. ALIGN works the same way for TDs as it does for TABLEs.

LEFT - Use this option if you want the contents of your TD to be left-aligned. By default, all TD tags are left-aligned so you probably won't need to use this much.
CENTER - Use this option if you want the contents of your TD to be centered.
RIGHT - Use this option if you want the contents of your TD to be right-aligned.

¤ NAVIGATION ¤

¤ Home

¤ HTML Tutorial:

Intro

Adding Graphics

Working With Text

Working With Colors

Adding Links

Creating Tables

Adding Music

Marquees

Scrollbars