This is an ad.
 
Webmonkey Kids
Webmonkey Kids
Lessons
Projects
Playground
Tools

Introduction
icon Rows and Cells
Building Your First Table
Colspan
Rowspan
Alignment
Spacing and Padding
A Few More Tricks



Parents and Teachers:
Find out how your kids can use Webmonkey for Kids as a learning tool at home or in the classroom with our Planning Guide.

Send us feedback

Lesson A: Tables
Spacing and Padding


ow that you've got your table all aligned, you may want to adjust the spacing of the cells. Here are two tags that do really similar things that you'll probably mix up a lot (we do, anyway): cellspacing and cellpadding.

They both put a little space between the cells of your table, but they do it in different ways. cellspacing makes the border of the table fatter, increasing the distance between cells. cellpadding adds invisible space inside the border of the cells, which pushes the cell's contents away from the border on all four sides.

cellspacing=10
1 2
3 4
cellpadding=10
1 2
3 4

Both attributes go in the <table> tag, like so:

    <table cellpadding="4" cellspacing="5">

Just remember: Spacing increases the size of the border, and padding increases the space around the border.

Back

Next Page