Tables are extremely useful for controlling the position of objects on your web page.
In HTML mode, type the following text into the Editor below
<HEAD>
<TITLE>
Tables
</TITLE>
</HEAD>
<BODY>
<table border=8>
<tr>
<td>first row<br>first column</td>
<td>first row<br>second column</td>
</tr>
<tr>
<td>second row<br>first column</td>
<td>second row<br>second column</td>
</tr>
<tr>
<td>third row<br>first cell</td>
</tr>
</table>
</BODY>
|
Click PREVIEW.
It should look something like this:
first row
first cell | first row
second cell |
second row
first cell | second row
second cell |
third row
first cell |
|
The table tag is used to create a table. Notice that we used the border attribute within this tag . There are other attributes that can be used within the table tag which we will discuss later. For now, the most important thing to recognize about the this tag is that it is closed using </table>. If you forget to close your table tag, your table will not be displayed if you are using Netscape to view your page.
The tr tag is used to create a table row. Everything you want to include in a single table row goes between <tr> and </tr>. As you can see, there are three rows in our table.
The td tag is used to create a cell for table data. There are two two cells in each of the first two rows, and one cell in the third row. Everything you want to include in a single cell goes between <td> and </td>. You can use almost any HTML code (lists, links, images, and even other tables) you wish in a table cell.
You now know the basic syntax of tables. There are some really nifty things you can do with tables by using attributes of the table and td tags. Let's take a closer look!
<table> Attributes
In the first example, we used set the border attribute equal to 8. Change the number from 8 to 12, and add the width attribute. Like this:
In HTML mode, type the following text into the Editor below
<HEAD>
<TITLE>
Tables
</TITLE>
</HEAD>
<BODY>
<table border=12 width=300>
<tr>
<td>first row<br>first column</td>
<td>first row<br>second column</td>
</tr>
<tr>
<td>second row<br>first column</td>
<td>second row<br>second column</td>
</tr>
<tr>
<td>third row<br>first cell</td>
</tr>
</table>
</BODY>
|
Click PREVIEW. Notice that the border between the table cells is 12 pixels wide and that the width of the table is 300 pixels. We can also specify width as a percentage of the window being used to view your page. Change the number 300 to 70%. Try changing the size of the window so that you can see how the table will always have the same relative size.
In HTML mode, type the following text into the Editor below
<HEAD>
<TITLE>
Tables
</TITLE>
</HEAD>
<BODY>
<table border=12 width=70%>
<tr>
<td>first row<br>first column</td>
<td>first row<br>second column</td>
</tr>
<tr>
<td>second row<br>first column</td>
<td>second row<br>second column</td>
</tr>
<tr>
<td>third row<br>first cell</td>
</tr>
</table>
</BODY>
|
You can set the background color (bgcolor) of the table to be any color you want!
In HTML mode, type the following text into the Editor below
<HEAD>
<TITLE>
Tables
</TITLE>
</HEAD>
<BODY>
<table border=12 width=70% bgcolor=green>
<tr>
<td>first row<br>first column</td>
<td>first row<br>second column</td>
</tr>
<tr>
<td>second row<br>first column</td>
<td>second row<br>second column</td>
</tr>
<tr>
<td>third row<br>first cell</td>
</tr>
</table>
</BODY>
|
Click PREVIEW.
It should look something like this:
first row
first cell | first row
second cell |
second row
first cell | second row
second cell |
third row
first cell |
|
This is a good point to talk two more attributes you may find useful. They are called cellspacing and cellpadding.
Cellspacing controls how much space is between the cells. You can use it to control the space between the green blocks of color in the table we just created.
In HTML mode, type the following text into the Editor below
<HEAD>
<TITLE>
Tables
</TITLE>
</HEAD>
<BODY>
<table border=12 width=70% bgcolor=green cellspacing=15>
<tr>
<td>first row<br>first column</td>
<td>first row<br>second column</td>
</tr>
<tr>
<td>second row<br>first column</td>
<td>second row<br>second column</td>
</tr>
<tr>
<td>third row<br>first cell</td>
</tr>
</table>
</BODY>
|
Cellpadding controls the space between what is in the cell and the cell border. You can use it to control the space between the words and the cell border in our table.
In HTML mode, type the following text into the Editor below
<HEAD>
<TITLE>
Tables
</TITLE>
</HEAD>
<BODY>
<table border=12 width=70% bgcolor=green cellspacing=15 cellpadding=15>
<tr>
<td>first row<br>first column</td>
<td>first row<br>second column</td>
</tr>
<tr>
<td>second row<br>first column</td>
<td>second row<br>second column</td>
</tr>
<tr>
<td>third row<br>first cell</td>
</tr>
</table>
</BODY>
|
These are the table attributes you will use most often. There are some other table attributes that have not been covered here. Click here for more information.
You may want to bookmark this site as you will probably find it useful for looking up information on a variety of HTML tags and attributes.
<td> Attributes
Now that you are getting used to attributes, you should be able to learn about the attributes of <td> using the examples below.
Below is a list of attributes that can be used with the td tag. If you are interested in a particular attribute, select the box next to the attribute and click on the Example button. You can see the code in action by clicking the PREVIEW button above the textarea. For a quick explanation of what each attribute does, click the attribute link.
Take some time to experiment with the <table> and <td> attributes to see the many different looks you can get for a table.
Other Table Tags
The <caption> tag is used to define a name or caption for a table.
In HTML mode, type the following text into the Editor below
<HEAD>
<TITLE>
Tables
</TITLE>
</HEAD>
<BODY>
<table border=3>
<caption>this is a caption</caption>
<tr>
<td>first row<br>first column</td>
<td>first row<br>second column</td>
</tr>
<tr>
<td>second row<br>first column</td>
<td>second row<br>second column</td>
</tr>
<tr>
<td>third row<br>first cell</td>
</tr>
</table>
</BODY>
|
Click PREVIEW.
The th tag is used to create a table heading. It is used in place of a td tag to specify a table cell whose contents are usually displayed in a bolder font than those of regular table cells. The intent of the TH tag is that you use it for column or row headings. Replace a td tag with a th tag in one of your tables to see what it does.
What are Tables Good For??
Tables can be used for many purposes. The most obvious use of tables is to organize the content on your web page. By using tables you can control the placement of information on your page. Many web pages you see are created using tables with border=0 so that you cannot see that the border. For example you may want your page to have four columns, like a newspaper. One way to get this effect is to use a table with one row (<tr>) and four cells (<td>). You must also set border=0 and width=100%. Give it a try!