Cellpadding & Cellspacing @ OWDC

LESSON 1-05-02: Cellpadding & Cellspacing

Web Design Lessons > Lesson 1-05-02: Cellpadding & Cellspacing

Previous Lesson | Lesson Index | Next Lesson

This lesson of your free online web design course is going to cover the "cellpadding" and "cellspacing" attributes of HTML tables.

Cellpadding

"Cellpadding" refers to the space between the table borders and the cell contents (i.e. your data). It is defined by the "cellpadding" attribute and can take any value (in pixels) starting from zero. Let's create a table with cellpadding="10" (i.e. 10 pixels between the table borders and the cell contents):

<html>
<head>

</head>
<body>

<table border="1" cellpadding="10">
<tr>
<td>
This Free Online Web Design Course Is Good!
</td>
<td>
Yeah, Definitely! :)
</td>
</tr>
</table>

</body>
</html>

We should get this output:

This Free Online Web Design Course Is Good!

Yeah, Definitely! :)

See how the contents are a bit further away from the borders? That is what cellpadding is used for!

Cellspacing

Now that we are through with "cellpadding" let's learn what "cellspacing" is... "Cellspacing" refers to the space between two cells. Let's try this attribute out, as well:

<html>
<head>

</head>
<body>

<table border="1" cellspacing="10">
<tr>
<td>
Actually This Free Online Web Design Course Is The Best!
</td>
<td>
Yeah, Definitely! :)
</td>
</tr>
</table>

</body>
</html>

We'll get the below output for this HTML code:

Actually This Free Online Web Design Course Is The Best!

Yeah, Definitely! :)

See the difference? Good. Also note that you can use both cellpadding and cellspacing at the same time.

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

Anyway, this lesson is over! Let's head on to the next lesson of your free web design course to learn how to define the width and height attributes of your HTML tables.

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-03 Basic Text Formatting
• Lesson 1-04 Web Colors Unleashed
• Lesson 1-05 HTML Tables

• Lesson 1-05-01 Building simple tables

• Lesson 1-05-02 Cellpadding & cellspacing

• Lesson 1-05-03 Defining table width & height

• Lesson 1-05-04 Merging table cells

• Lesson 1-05-05 Creating site layout by using tables
• Lesson 1-06 Background Alteration
• Lesson 1-07 Images

Back To Top

HTML TABLES!

Cellpadding

Cellspacing