Lesson 5

Cellspacing and Cellpadding

Cellspacing & cellpadding affect all cells in the table, so they go in the <table> tag.

Think of a cell as a crate that contains something.

Cellspacing is like moving (spacing) the crates apart from each other. It is space between cells.

Cellpadding is like bubble wrap (padding) around the item that is in the crate. It is space inside the cell.

As you can see, you can use cellspacing & cellpadding to "frame" an image.

cellspacing="0", cellpadding="0"




cellspacing="12", cellpadding="0"




cellspacing="0", cellpadding="12"




cellspacing="12", cellpadding="12"



Cellspacing is not cumulative. What does that mean?

Let's say you have 2 or more cells in a row and that you use cellspacing="x".

Instead of having x pixels of space on the right side of the left cell and x pixels of space on the left side of the right cell, you will have x pixels total of space between cells.

The same applies to adjacent cells in different rows.

Key Concepts

• Cellspacing "spaces" your cells apart.
• Cellpadding "pads" the items that are inside your cells.

Table Tips

• Different browsers have different default values for border, cellspacing and cellpadding.
  It is always best to set the values you really want in every table.
• Cellspacing and cellpadding must be spelled correctly or they won't work. If your tables don't look right, check your spelling.

Let's hear it:
I love tables!
Tables are my friend!
I am ze mighty cree-ay-tor!

Happy tabling!
Gnubee

Homework Assignment

• Read the key concepts again
• Make 4 identicle tables with border=1
  (don't forget CCP)
• Do not use height or width in any of your table tags (ok in image tags)
• In table 1, use cellspacing=0 & cellpadding=0
• In table 2, use cellspacing=0 & cellpadding=?
• In table 3, use cellspacing=? & cellpadding=0
• In table 4, use cellspacing=? & cellpadding=?
• Replace the question marks with any values you want
• Post all 4 tables on the same page
• Show your code for just the last table.
• What thoughts does this exercise give you?