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.
Articles from WebSiteGravy.com
|
