Making your tables look pretty with cellspacing and cellpadding
|
|
|
| 2.0/5.0 (1 votes total) |
|
|
|
|
From
Stevesdomain.net
Cellspacing
Cellspacing
is, as you may have guessed, the amount of space between cells within
the table. By default, cellspacing is set to 1, but controlling
cellspacing is very simple. The HTML code for this tasks looks like
the following:
<table
cellspacing=2>
From
the example above, 2 pixels will be placed between each and every
cell within your table. Let's take a look at what different spacing
options look like.
Let's
look at an example using cellspacing. Newspapers use the concept
of cellspacing all the time to create a separation between columns
of text. The following illustrates cellspacing with two examples,
the first employing a cellspace if 1 and the second employing a
cellspace of 15.
<table
cellspacing=1>
Here
is the text for the left column of this table. As you can see,
this text is real squeezed up against the text to the right. |
Here
is the text for the right column of this table. As you can see,
this text is real squeezed up against the text to the left. |
<table
cellspacing=15>
Here
is the text for the left column of this table. As you can see,
this text fits comfortably against the text to the right. |
Here
is the text for the right column of this table. As you can see,
this text fits comfortably against the text to the left. |
Notice
that cellspacing adds space between the entire cell, top, bottom,
left and right so the text is written with a smaller width. The
latter example clearly offers improved readablility.
Cellpadding
Cellpadding
is similar to cellspacing, but completely different (is that possible?).
To understand cellpadding, visualize a punching bag with padding
around the outside. Punching bag padding creates space between the
center of the bag and the padding surface. Table cellpadding defines
the amount of space between the cell border and the text within
the cell. Similar to above, let's take a look at a couple examples.
<table
cellpadding=1>
Here
is the text for the left column of this table. As you can see,
this text is real squeezed up against the text to the right. |
Here
is the text for the right column of this table. As you can see,
this text is real squeezed up against the text to the left. |
<table
cellpadding=15>
Here
is the text for the left column of this table. As you can see,
this text fits comfortably against the text to the right. |
Here
is the text for the right column of this table. As you can see,
this text fits comfortably against the text to the left.
|
As
you can see, cellspacing and cellpadding look similar, but the concept
is undeniably different. Cellpadding adds a little larger grace
period, and should always be used to give the text some breathing
room in your tables, especially when a table border is visible or
text is in the next table cell, illustrated from the above example.
The best way, and sometimes the only way, to determine to any degree
of certainly whether cellspacing or cellpadding (or both) is required
and to what capacity is to dive into your basic trial and error
procedure. |