Table Basics

Tables are nifty "boxes" that help you organize information on your page. They shouldn't be used too much to make a website layout, but to organize pieces of information they are invaluable.

To initiate the table, you use a table tag. It has to be closed, or the rest of the page will most likely be part of the table. For starters, here are the table tags.

<table>
The table structure and information goes here.
</table>

Now we need to know what the structure of the table is like. To do this, we need to know what it looks like. Here's a simple table:

Compared to what we've learned so far, this looks pretty impressive. Fortunately, there isn't too much coding for a table, but it can be complicated. Remember back in the lists tutorial where we learned nesting? It is important to nest your table properly.

Now, let's get into making that table I just showed you. Tables are seperated into rows, columns, and cells. The cells are the individual "blocks" within the table. The rows are the cells going across, and the columns go up and down. I have added what column and row each cell is in to the table now.

Our table has two rows. Rows are created with "table row" tags, or tr tags. Let's add two rows inside the table tags we made near the beginning of this lesson.

<table>
<tr>
Cells one and two are coded here.
</tr>
<tr>
Cells three and four are coded here.
</tr>
</table>

This code will not do anything on the page because there are no cells in our rows. To do this, we have to nest the "table data" or td tags inside our tr tags. The td tags create the cells. Columns are created based on how many cells are in the row. Note that it is important to have the same number of cells in each row, until you learn some things in the next few lessons.

<table>
<tr>
<td>Cell 1
</td>
<td>Cell 2
</td>
</tr>
<tr>
<td>Cell 3
</td>
<td>Cell 4
</td>
</tr>
</table>

Notice that this table doesn't have borders around each cell. I added the border to the previous tables by using the border attribute to make it easier to read. To add the border, all you need to do is put the attribute and how wide you want the border to be. I used "1" for all the previous tables. Also, the bordercolor attribute can changes what color the border is. As usual, you can use hexadecimal color codes or you can use plain old color names. For this example I'll just use "red". Finally, remember how I said that the color attribute for the horizontal rule doesn't work with browsers other than Internet Explorer? The same applies for the bordercolor attribute of the table.

<table border="1" bordercolor="red">
<tr>
<td>Cell 1
</td>
<td>Cell 2
</td>
</tr>
<tr>
<td>Cell 3
</td>
<td>Cell 4
</td>
</tr>
</table>

Note that you can put text, links, images, or most anything inside of the table data tags, including other tables. All you have to do is put it between your opening and closing td tags. Keep reading, because we're not through with tables yet.