Cellpadding and Cellspacing
and
Colors in Tables
Cellpadding and Cellspacing

By default, table cells tend to be
squeezed close to each other. To give
your table cells a little more breathing
room, use CELLPADDING and
CELLSPACING.
http://www.idocs.com/tags/tables/index_famsupp_29.html
Cellspacing
CELLSPACING
controls the space
between table
cells. Although there
is no official default,
browsers usually use
a default of 2.
http://www.idocs.com/tags/tables/index_famsupp_29.html
Cellspacing Tag
You can designate the spacing for the cells in your table
by using the cellspacing tag. The tag for cellspacing is
used within the table tag. Specify the number of pixels
that you would like your cells to be spaced.
cellspacing=#
http://www.idocs.com/tags/tables/index_famsupp_29.html
Example of Cellspacing




You would like to create
a 6 cell table with a
letter in each cell.
You would like a border
for your table.
You would like the
spacing between your
cells to equal 5 pixels.
This is what your table
would look like in a
browser.
Example of Cellspacing (HTML)
This is what your HTML
would look like for the
previous example.
<table border
cellspacing=5>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
Cellpadding
CELLPADDING sets
the amount of space
between the contents
of the cell and the cell
wall. The default is 1.
CELLPADDING is
usually more effective
than CELLSPACING
for spreading out the
contents of the table.
http://www.idocs.com/tags/tables/index_famsupp_29.html
Cellpadding Tag
You can designate the padding for the cells in your table
by using the cellpadding tag. The tag for cellpadding is
used within the table tag. Specify the number of pixels
that you would like your cells to be spaced.
cellpadding=#
http://www.idocs.com/tags/tables/index_famsupp_29.html
Example of Cellpadding




You would like to create
a 6 cell table with a
letter in each cell.
You would like a border
for your table.
You would like the
padding between your
cells to equal 7 pixels.
This is what your table
would look like in a
browser.
Example of Cellpadding (HTML)
This is what your HTML
would look like for the
previous example.
<table border cellpadding=7>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
Cellspacing and Cellpadding
Combined


You can use the cellspacing attribute
with the cellpadding attribute.
For example, if you wanted your table’s
to be spaced 5 pixels and have a
padding of 7 pixels, this is what your
table tag would look like.
<table border cellspacing=5
cellpadding=7>
Colors in Tables


One attribute will allow you to add color
to your table in 3 different ways.
The attribute that you will use to add
color is the BackGroundColor tag.
bgcolor=(hexadecimal number)
Color an Entire Table


Using the bgcolor= attribute in your
table tag will allow you to designate the
color of the entire table.
For example, if you wanted the color of
your entire table to be orange
(#FFA500), this is what your tag would
look like.
<table bgcolor=#FFA500>
Example of Table Color



You would like to
create a 6 cell table
with a letter in each
cell.
You would like a
border for your
table.
You would like the
color of your table
to be orange.
Example of Table Color (HTML)
This is what your HTML
would look like for the
previous example.
<table border
bgcolor=#FFA500>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
Color a Table Row


Using the bgcolor= attribute in your
table row tag will allow you to
designate the color of a specific row in
your table.
For example, if you wanted the color of
a row in your table to be green
(#008000), this is what your tag would
look like.
<table bgcolor=#008000>
Example of Row Color



You would like to
create a 6 cell table
with a letter in each
cell.
You would like a
border for your
table.
You would like the
color of the top row
to be green.
Example of Row Color (HTML)
This is what your
HTML would look like
for the previous
example.
<table border>
<tr bgcolor=#008000>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
Color a Table Cell


Using the bgcolor= attribute in your
table data tag will allow you to
designate the color of a specific cell in
your table.
For example, if you wanted the color of
a cell in your table to be blue
(#0000FF), this is what your tag would
look like.
<table bgcolor=#0000FF>
Example of Cell Color



You would like to
create a 6 cell table
with a letter in each
cell.
You would like a
border for your
table.
You would like cells
“a”, “c”, and “e” to
be blue.
Example of Cell Color (HTML)
This is what your HTML
would look like for the
previous example.
<table border>
<tr>
<td bgcolor=#0000FF>a</td>
<td>b</td>
<td bgcolor=#0000FF>c</td>
</tr>
<tr>
<td>d</td>
<td bgcolor=#0000FF>e</td>
<td>f</td>
</tr>
</table>
Border Color


You can change the color of your table’s
border by using the bordercolor
attribute.
For example, if you wanted your table’s
border to be purple (#800080), this is
what your tag would look like:
<table border bordercolor=#800080>
Example of Border Color



You would like to
create a 6 cell table
with a letter in each
cell.
You would like a
border for your
table.
You would like the
border for your table
to be purple.
Example of Border Color (HMTL)
This is what your HTML
would look like for the
previous example.
<table border
bordercolor=#800080>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
Using Attributes in Conjunction



You can use table attributes in
conjunction with one another.
For example, you can make a table with
a purple border and a blue background
in your cells.
Try an example for yourself!