HTML Coding

Tables: Cell Padding and Spacing

NOTE: These pages will remain available for your reference, but will not actively be maintained due to UW-Eau Claire's adoption of FrontPage for web publishing.

Tables without adequate spacing in or around cells are difficult to read. The cell padding attribute places spacing around data within each cell. The cell spacing attribute places space around each cell in the table. The second and third examples below show the use of cell padding or spacing. You can apply both padding and spacing, as in the fourth and fifth examples. In order to place space in or around each cell (or both), place the padding and/or spacing attributes within the <TABLE> code.

A Table With No Cell Padding or Spacing with a Border of 1

Red	Green	Blue
Orange	Yellow	Purple

<TABLE BORDER=1>
<TR>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>

A Table With a Cell Spacing of 10 with a Border of 1

Red	Green	Blue
Orange	Yellow	Purple

<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>

A Table With a Cell Padding of 10 and a Border of 1

Red	Green	Blue
Orange	Yellow	Purple

<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>

A Table With a Border of 1, Cell Padding of 10 and a Cell Spacing of 10

Red	Green	Blue
Orange	Yellow	Purple

<TABLE BORDER=1 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>

A Table With a Cell Padding of 7, Cell Spacing of 7, and Border of 7

Red	Green	Blue
Orange	Yellow	Purple

<TABLE BORDER=7 CELLPADDING=7 CELLSPACING=7>
<TR>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>