Kabe's HTML Tables Guide

Learning HTML is one of the easiest things to learn. Believe it or not, it's not really a programming language, but text with a few stupid codes.

Have you ever used Wordperfect or Microsoft Word? If you understand how to use those little programs, you'd notice one thing. At the end of a paragaraph, you have that funny looking little backwards p. HTML is the same!


Learning the basics of HTML
Setting up your first page
Using Tables in HTML
Troubleshooting guide
Generating traffic
Contact me

How to read this page!

The stuff you pretend to type will be in a . This is what the code looks like in your text editor before Netscape Navigator reads it.

Whenever you see stuff in a ,that is how the code above it will be seen by the browser. In other words, it's the output of the code, or the output of the stuff you typed (the red background above text).

All code has and brackets. You can spot code easily!

Using Tables!

1. The Principles of Tables

All tables are built of two separate parts, rows and columns. Columns go up and down the page, whereas rows go across the page.

Understand that? Good! There's nothing else that needs to be understood! First, we'll look at setting up your table.

You begin your table by using the code, table. Now, you can assign your variables, that go right into table *here*. These are options, and not required.

VariableExampleExplaination of what happens
widthwidth=600My all-time favourite. Sets the width of the table to 600. This is in pixels.
borderborder=2Creates a border around your table. This table has a border of 1, and you can set border=0 and have no border!
bgcolorbgcolor=000000Sets the background colour of the table. If you don't have this option in, the background will automatically be the same as your body background.
cellpaddingcellpadding=5Puts some space between the letters in a cell and the cell walls. Default is 1.
cellspacingcellspacing=10Puts space between each of the cells in the table. Default is 2.

However, in order for the table that you will create to appear, you will have to have an endcode, simply /table.

2. How to write the data into a table.

Now, we'll get down to the meat of it. Entering data. There are only 2 commands required when making tables. tr which means TableRow, and td which means TableData. The only one that has to be closed off is tr by using an /tr. Confused? Well, here's an...


table width=400 border=1
tr td This is my first apple td This is my second apple /tr
tr td This is my first plum td My second plum /tr
tr td I only have one orange /tr /table

Will look exactly like this:

This is my first appleThis is my second apple
This is my first plumThis is my second plum
I only have one orange

Notes on this example:

3. tr and td options

These options for the tr code can be also used for the td code. These options always go tr *here*.

CodeusageWhat the option does
bgcolorbgcolor=000000Changes the background color of the row or piece of data
heightheight=100Makes the row or data block 100 pixels high
widthwidth=60Makes the row or data block 60 pixels wide

For td only:

CodeusageWhat the option does
colspancolspan=2TableData takes up 2 columns. You can use any number
rowspanrowspan=3Data takes up 3 rows, any number

You should now understand Tables. Don't worry, with practice, you'll understand it no problems!

This page hosted by   Get your own Free Home Page