Arachnophilia Tutorial 
LESSON IV

PLEASE SIGN THE GUESTBOOK

Basic Tables

• When first starting with tables, they can be a bit confusing but, when you break it down and look at each part, it's really quite simple.
• A table is nothing more than an area of your page divided into rows & columns that organizes data, text, graphics etc.
• There are three parts to a table;
  1. The <table></table> tag designates everything between the tags should be placed in the table.
  2. Define the number of rows with the <tr></tr> or table row tag. Everything between the tr tags will be in the same row.
  3. Then the <td></td> or table data tag creates a cell for each segment of data you want displayed.

  ---

• Now lets combine the tags to create a simple table.

  <table border=1>(start of table) <tr>(1st row) <td>(1st cell)</td> </tr> (end of row) </table>(end of table)

  This is the table to the left with two cells and one row. Notice the table wraps itself around whatever you put in side the cell. I added the border tag so you could see what its doing.

  ---

• Now lets define the width of the table & cells to make it more symmetrical.

  <table width=450 border=1>(start of table) <tr>(1st row) <td width=50%>(1st cell)</td> <td >(2nd cell)</td> </tr> (end of row) </table>(end of table)

  This is the table to the left with two cells and one row. Notice the table wraps itself around whatever you put in side the cell. I added the border tag so you could see what its doing.

  ---

• Since I only defined the width of the first cell, the second cell uses what is left. If more cells are added they will share the remaining 50% of the row. Here is n example with 4 cells and 4 rows all symmetrical by designating each cell to be 25%

  one	two	three	four
  five	six	seven	eight
  nine	ten	eleven	twelve
  thirteen	fourteen	fifteen	sixteen

  ---

• Now lets experiment with a few little extras that will enhance your table. There are several tags you can use inside the table tag;
  1. cellpadding="3" Creates a space inside the cells between the data and the cell edges.
  2. cellspacing="3" Creates space between the cells.
  3. bgcolor="white" Changes the background color of the table, row, or cell.

• Lets try one using the additional tags;

  <table width=350 border=3 bordercolor=navy bgcolor="white" cellpadding="6" cellspacing="6"> <tr>(1st row) <td >(1st cell)</td> <td >(2nd cell)</td> <td >(3rd cell)</td> </tr> (end of row) <tr bgcolor=#b4c3d4>(2nd row) <td >(1st cell)</td> <td >(2nd cell)</td> <td >(3rd cell)</td> </tr> (end of row) <tr>(3rd row) <td bgcolor="red"4>(1st cell)</td> <td >(2nd cell)</td> <td >(3rd cell)</td> </tr> (end of row) </table>(end of table)

  (1st cell)	(2nd cell)	(3rd cell)
  (1st cell)	(2nd cell)	(3rd cell)
  (1st cell)	(2nd cell)	(3rd cell)

  ---

• You can even divide your whole page into a table if you desire. Lets say you wanted an index on the left side and everything else on the right, You might make a table with one row and two cells making the first cell the width of the menu and place everything on the page in the cell on the right. just use the list lesson we already covered to make a links list and place it in the 1st cell..then make your page inside the 2nd cell!

  Frame a picture using a table and border around the picture.

---

Now that you have the basics you need to create a web page, in the next lesson I will show you some features of Arachnophilia that will east the burden of repetition typing in tags.

Home | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Page 7