Table Lesson

A table is a way of breaking your page up into cells. Or other words it is like turning your page into a graph.A table would be used to place text next to an image, create columns or even create a calender. Tables give you more control of where on a page things are displayed. Until now you have had limited control of positioning of text and images. A tables give you greater control of the apperance of your web page. For example:

Now
	I
		Have
			Control

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
	I
		Have
			Control

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.

Advanced Table Commands

These give you greater control of the table you create. The commands listed below will go in the tag with the table for example: <table border="1" cellspacing="5" cellpadding="5">. Except for the <caption> tag.

width"XX" The width command denotes the witdth of the table. This can be done with numbers that relate to pixles, or you can use a percentage. If you use a percentage you need to remember to use the "%" symbol.

border="X" The border command creates a border around the table.You want to use small numbers, because large numbers will crowd your table, and screen. Border of "0" gets rid of the border alltogether.

cellpadding="XX" This command denotes the amount of space between the text and the cell walls.
cellspacing This command denotes the amount space between the cells. Do not use large numbers they will crowd your table.

<caption>Title of the table</caption> This tag would be used to give your table a title. The title would not actually sit in a table cell, but on top of the table.