Step-By-Step Tables

We are going to make a table from scratch,
step by step. Use a testbed to enter the codes and copy the code from one step to the next to avoid typing it all out for each step. Or use this one where you can save entries for up to six months. We will be adding one thing at a time until we end up with a two cell, two row table that looks like this:

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2


Step 1: 1x1 Table
Just type these six tags to make a table:
<table><tr><td></td></tr></table>:

-

The <<>table> and <<>/table> tags open and close a table.
The <<>tr> and <<>/tr> tags open and close a table row.
The <<>td> and <<>/td> tags open and close a table data cell. All material to be displayed by the table: text, images, or html code (marquee, another table, html coded text) must be enclosed by the <<>td> and <<>/td> tags. You can have an entire web page displayed in a table within the <<>td> tags.


Step 2: Text
Now add some words between the <td> and </td> tags:
Action: Add the words "This is a single cell, single row table" between the <<>td> and <<>/td> tags

Testbed         Notebed

This is a single cell, single row table

This is what the code should look like up to this point:

<<>table><<>tr>
<<>td>This is a single cell, single row table<<>/td>
<<>/tr><<>/table>


Step 3: Table Border
Next add a border attribute to the table tag (to show where the table is on the page):
Action: Add border="1" in the <table> tag

Testbed         Notebed

This is a single cell, single row table.


Step 4: Centering
Now we will center the table:
Action: Add <center> and </center> tags at the beginning and end of the code

Testbed         Notebed

This is a single cell, single row table.


Step 5: Cellpadding
And then add some cellpadding to the table tag:
Action: Add cellpadding="25" in the <table> tag

Testbed         Notebed

This is a single cell, single row table.

The code up to this point:

<<>center>
<<>table border="1" cellpadding="25"><<>tr>
<<>td>This is a single cell, single row table.<<>/td>
<<>/tr><<>/table><<>/center>


Step 6: 1x2 Table
Make it a two celled table:
Action: Add <td>Cell #2</td> before the </tr> tag
and change the wording of the first cell

Testbed         Notebed

This is a 2 cell, single row table. Cell #2


Step 7: 2x2 Table
Make it a 2 cell, 2 row table:
Action: Add </tr><tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
before the </tr> tag,
and change the wording of the first row

Testbed         Notebed

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2


Step 8: Cellspacing
See how the cellspacing attribute of the table tag changes the table:
Action: Add cellspacing="10" to the <table> tag

Testbed         Notebed

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

The code to this point:

<<>center>
<<>table border="1" cellpadding="25" cellspacing="10"><<>tr>
<<>td>Row 1 Cell 1<<>/td>
<<>td>Row 1 Cell 2<<>/td><<>/tr><<>tr>
<<>td>Row 2 Cell 1<<>/td>
<<>td>Row 2 Cell 2<<>/td>
<<>/tr><<>/table><<>/center>


Step 9: Table Bgcolor
Add color to the entire table:
Action: Add bgcolor="springgreen" to the <table> tag

Testbed         Notebed

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2


Step 10: Row Bgcolor
Change the color of the first row:
Action: Add bgcolor="pink" to the first <tr> tag

Testbed         Notebed

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2


Step 11: Cell Bgcolor
Change the colors of the cells in row 2:
Action: Add bgcolor="yellow" to the third <td> tag
and bgcolor="orange" to the fourth <td> tag

Testbed         Notebed

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2


CONGRATULATIONS!

Here's the code for the complete table:

<<>center>
<<>table border="1" cellpadding="25" cellspacing="10" bgcolor="springgreen">
<<>tr bgcolor="pink">
<<>td>Row 1 Cell 1<<>/td>
<<>td>Row 1 Cell 2<<>/td><<>/tr><<>tr>
<<>td bgcolor="yellow">Row 2 Cell 1<<>/td>
<<>td bgcolor="orange">Row 2 Cell 2<<>/td>
<<>/tr><<>/table><<>/center>


Recap of What We Have Learned

There are some more basic things about tables that I would like to show you, if you are game. But first, let's try putting an image or two in the <<>td> cell:
Action: (Delete "Row 2 Cell 1" and "Row 2 Cell 2"). Add <img src="http://www.angelfire.com/vt/farmerdave/classtable/piglet.gif"> to the third <td> tag
and <img src="http://www.angelfire.com/vt/farmerdave/classtable/pooh.gif"> to the fourth <td> tag, between the <td> and </td> tags.

Testbed         Notebed

Row 1 Cell 1 Row 1 Cell 2


Here's the code for the last table:

<<>center>
<<>table border="1" cellpadding="25" cellspacing="10" bgcolor="springgreen">
<<>tr bgcolor="pink">
<<>td>Row 1 Cell 1<<>/td>
<<>td>Row 1 Cell 2<<>/td><<>/tr><<>tr>
<<>td bgcolor="yellow"><<>img src="http://www.angelfire.com/vt/farmerdave/classtable/piglet.gif"><<>/td>
<<>td bgcolor="orange"><<>img src="http://www.angelfire.com/vt/farmerdave/classtable/pooh.gif"><<>/td>
<<>/tr><<>/table><<>/center>


Go here to continue learning about tables, step-by-step.