Lesson 10

Web Design Course

Week 10: Tables (Part 2)

Web Design I

This week, we will learn more about tables. We will learn some advanced attributes that we can use to make our tables look great. Then, we will learn how to use tables to create awesome looking Web page layouts. Let’s get started.

Cellspacing and Cellpadding

Last week, we learned a number of table attributes, including ALIGN, WIDTH, BORDER, BGCOLOR, and COLSPAN. If you don’t remember what these do, please go back to the week 8 lesson and review these attributes. Otherwise, we are now going to add CELLSPACING and CELLPADDING to our already long list of table attributes.

CELLSPACING (all one word) gives the amount of space between cells. Many times, you won’t need to use this attribute, but it comes in handy sometimes.

CELLPADDING (all one word) gives the amount of space (or padding) between the cell border and the cell contents. I use this attribute frequently. This can really help your tables look nice.

Let’s look at our Brady Bunch table from last week’s lesson. Remember this?

Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

Now I’m going to add some cellspacing to this, so you can see the results. First a little bit of cellspacing:

Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

Here is the first line of code for this table:

<TABLE BORDER="1" CELLSPACING=”5”>

Here is a lot of cellspacing:

Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

And here is the first line of code:

<TABLE BORDER="1" CELLSPACING=”20”>

Here is the table with some cellpadding added. Once again, here is a little cellpadding:

<TABLE BORDER="1" CELLPADDING=”5”>

Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

And here is a lot:

<TABLE BORDER="1" CELLPADDING=”20”>

Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

And finally, here is what we get with both cellpadding and cellspacing:

<TABLE BORDER="1" CELLSPACING=”20” CELLPADDING=”20”>

Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

Activating Cells For Links

Wouldn't it be great if you could make a table with words and the words in the table were active so you could click on them? You can! Look at this example:

CBS Home Page	NBC Home Page
ABC Home Page	FOX Home Page

Here is the code:

By the way, you’ll notice that the BORDER, CELLSPACING, AND CELLPADDING commands are all set at 20 in the above table to give you an idea of how this would change the appearance of your table.

Images In Cells

Can I put images in each of the cells? Absolutely! In fact, I can show you an example from this page. See the very top of the page, where there are images of two computers? I used a table to create this effect. Of course, I took away the border, but here’s what the table would look like if I had a border of size 1:

Web Design Course

Week 10: Tables (Part 2)

And here is the code:

<TABLE WIDTH="100%" BORDER="1">
<TR>
<TD ALIGN="left"><IMG SRC="images/computer.gif"></TD>
<TD ALIGN="center"><FONT FACE="arial, helvetica" SIZE="-1"><B>Individualized Learning Program</B>
</FONT><H2><FONT COLOR="#CC0000"><I>Web Design Course</I></H2></FONT><B>
<FONT FACE="arial, helvetica" COLOR="#0000CC">Week 9: Tables (Part 2)</FONT></B></TD>
<TD ALIGN="right"><IMG SRC="images/computer.gif"></TD>
</TR>
</TABLE>

Notice that there is nothing in this code that you haven’t already learned. You’re getting pretty good! But what is important to know right now is that in the first and third cells in this table, there is nothing there but an image. In the second cell, there is some text. When you take away the border (more on that later), you get a really neat effect on your Web page.

Page 2