Lesson 9

Return to Web Design Home Page

This week, we get to learn how to create a great feature called a table. Tables are so important to Web design, that we will spend 2 weeks learning about them. Tables can help us organize information on a page. Not only that, but they can help you set up great looking layouts for your Web pages.

OK, let's get started. Have you seen the Brady Bunch before? If not, don't worry about it; it might be a little before your time. Anyway, here is a table showing the Brady family.

Basic Table Commands

So how did I create that table? Let's find out. Here is the HTML code that I used to create the table.

<TABLE BORDER="1">
<CAPTION>The Bradys</CAPTION>

<TR>
<TD> Marcia </TD>
<TD> Carol </TD>
<TD> Greg </TD>
</TR>

<TR>
<TD> Jan </TD>
<TD> Alice </TD>
<TD> Peter </TD>
</TR>

<TR>
<TD> Cindy </TD>
<TD> Mike </TD>
<TD> Bobby </TD>
</TR>

</TABLE>

Please don't feel overwhelmed by all of this new code. There are really only four commands being used again and again, along with one attribute. Here's what we use:

• <TABLE> is the tag to create a table.

• BORDER="1" gives you the width of the border. Do you notice the line that goes around the table and in between the cells? This border is 1 pixel wide. We can change it to make the border thicker, or to actually make the border invisible (more on that later).

• <CAPTION> and </CAPTION> places a caption over your table. The caption will be centered. It is completely optional. Use it if you'd like to, but not all of your tables will need captions. I actually don't use this tag very often.

• <TR> is used when you want a new Table Row to begin. Notice that you need to end every table row with an </TR>. See that above?

• <TD> stands for Table Data. In reality, this is the tag that begins a cell. You need to end every one that you open with an </TD>. See how I have that above?

• </TABLE> ends the table.

That's it! Be sure to study the code above until it makes sense to you. Don't continue until you understand this code, since we will continue adding to it during this lesson.

It's really important that you understand how the TR and TD tags work. One way is to think of it as constructing a Tic Tac Toe board. You'll need nine cells for the board right? That would be 3 rows of 3 cells each. Use the TR command to make your three rows, and then use TD to make the individual cells within each row. And again, don't forget to each each cell with /TD, and don't forget to end each row with /TR.

Remember that whatever you put between the TD and /TD tags will appear in the cell. And the cells in each column will be the same size using the largest cell as the model for the others. In other words, the largest cell wins.

Let’s say I wanted to make a table containing two rows with 5 cells in each row. Here is what the code would look like:

<TABLE BORDER="1">
<CAPTION>A 2 x 5 Table</CAPTION>

<TR>
<TD>Row 1, Cell 1</TD>
<TD>Row 1, Cell 2</TD>
<TD>Row 1, Cell 3</TD>
<TD>Row 1, Cell 4</TD>
<TD>Row 1, Cell 5</TD>
</TR>

<TR>
<TD>Row 2, Cell 1</TD>
<TD>Row 2, Cell 2</TD>
<TD>Row 2, Cell 3</TD>
<TD>Row 2, Cell 4</TD>
<TD>Row 2, Cell 5</TD>
</TR>

</TABLE>

And here is what the table would look like:

Notice that I used 2 TR tags for the two rows, and each TR has 5 TD tags inside of it, representing the 5 columns.

Table Attributes

If you understand everything up to this point, great! Keep reading. If you don’t, please stop and re-read the information above until you fully understand the new tags that you have learned in this lesson. Now that you know how to create a basic table, I’d like to show you how you can use attributes to customize what your table looks like. Here we go…

ALIGN

We have already seen the ALIGN attribute used with the P tag. You can also use it with the TABLE tag and the TD tag. If you use ALIGN with the TABLE tag, you will align the entire table to the center or right (if you don’t give specific instructions, the table will align to the left). Look at these examples:

<TABLE BORDER="1" ALIGN="center">

<TABLE BORDER="1" ALIGN="right">

If you use the ALIGN attribute with the TD tag, it will align the contents of the individual cell. For example, look at the code for this table:

<TABLE BORDER="1" WIDTH="600">
<TR>
<TD ALIGN="left">left</TD>
<TD ALIGN="center">center</TD>
<TD ALIGN="right">right</TD>
</TR>
</TABLE>

See how that works? The ALIGN attribute can come in handy.

WIDTH

Did you notice that I snuck in another attribute in the above table? The WIDTH attribute gives you control over how wide you would like your table to be. I use this attribute all the time. Like the ALIGN attribute, the WIDTH attribute can be used with the TABLE tag or the TD tag.

When you decide on the width of your table, you can either give the number in pixels or percent. For example, if I say <TABLE WIDTH="250">, that means I want my table to be 250 pixels wide. But if I say <TABLE WIDTH="50%">, that means I want my table to cover 50% of the width of my screen. Both of these methods are very useful, so it’s nice to know that we can use either one of them.

I mentioned that we can use the WIDTH attribute for the TD tag also. For example, if I say <TD WIDTH="100">, that means I want my cell to be 100 pixels wide. But if I say <TD WIDTH="50%">, that means I want my cell to cover 50% of the width of my table.

I just gave you a lot of information, so let’s see an example of it. Here is our old Brady Bunch table.

Now I am going to use the WIDTH attribute. I want this table to cover the entire width of my screen and I want the first cell to cover 50% of the width of my table. Here is the code that I would use:

<TABLE BORDER="1" WIDTH="100%">

<TR>
<TD WIDTH="50%"> Marcia </TD>
<TD> Carol </TD>
<TD> Greg </TD>
</TR>

<TR>
<TD> Jan </TD>
<TD> Alice </TD>
<TD> Peter </TD>
</TR>

<TR>
<TD> Cindy </TD>
<TD> Mike </TD>
<TD>Bobby </TD>
</TR>

</TABLE>

And here is the table it would produce:

Page 2