Table Lesson

That is a table with no border. Below is the same table with a border. We will get in to how to use borders a little later in this lesson.

Now you can see the shape of a the table.

The creation of tables can be confusing, but with pratice they become second nature. Here are a few commands that you will need to know to create a table.

<table>

This is the tag that you will use to open a table.

<tr>

Tr controls the table rows.

</tr>

This command ends the table rows.

<td>

Td stands for table data. This tag will surround anything contained within a table cell.

</td>

This command ends the table cell.

</table>

This is the ending table tag and is needed in order for the table to work.

Creating a table

The first step is to open a table.

<table>

Next you will have to open a table row. The table row command starts the first horizontal row.

<tr>

Now that the first row has been started. Create a cell for you text to sit in. This is done with table data tags.

<td>

Now the table cell is open and ready fo you to enter your info. This can be text or images. A image tag is needed to insert an image. Follow this link to go to the Images Lesson.

After the info has been entered for the table cell, you want to close the table cell and move on to the next cell.

</td>

So far the code for your table should look like this:

<table>
<tr>
<td>Anything you want</td>

Keep in mind that it will not work yet. This is because the table row and table commands have not been ended.

The next cell that you create will appear on the same line(row) as the last one. New cells will continue to appear on the same line until you end your table row command.

<td>Anything you want</td>

Use the steps above to create cells horizontally across the page.

<td>Anything you want</td>

Now that the info for the first row of your table is entered, end the table row with the ending table row command.

</tr>

Now you are ready to create the second row of your table. This is done with another opening table row command.

<tr>

Now follow the steps that were used to create the first row of cells. To create another row of cells.

<td>Anything</td>
<td>You</td>
<td>Want</td>

Now you will end the table row.

</tr>

Now you will end the table.

</table>

The table should look like this:

Code	Table
<table border="1" cellspacing="5" cellpading="5"> <tr> <td>Anything</td> <td> You</td> <td>Want</td> </tr> <tr> <td>Replace</td> <td>With text</td> <td>Or images</td> </tr> <tr> <td>Tables</td> <td>Are</td> <td>Fun</td> </tr> </table>	Anything You Want Replace With text Or images Tables Are Fun

You may have noticed new commands that are in the code above. These are described in the Advanced Table Commands section below.

More Table commands

There are a few table comands used with for altering the apperance of a table. Use these to creating spanning table cells.

This "colspan" command creates columns that go across the page. The number of columns that you want the cell to span would replace the "X" in the "quotes" above. The colspan command goes in the <td> tag, for example:

In the code above the <td> cell will span the width of three regular width cells. It should look like this:

Another "span" command is the "rowspan" command. This command would be used to span rows rather than columns, or vertically rather than horizontally. Here is how that looks:

There are a few things that I had to do to get the "rowspan" command to work the way that I wanted. The first was to add one to the number. Instead of the number three that I used for the "colspan" command I had to use the number four. This is because the "td" cell that the "rowspan" command is written into actually sits in a cell. if you do not increase the number you will end up with a table that looks like this:

Here is the other trick that I used. I entered <br> tags after each word in the "rowspan" cell. Otherwise it would look like this: