|
Cellspacing. This is a numerical value that allows you to specify how much space (measured in pixels) you want between cells. Remember that the Cellspacing command affects all the cells in the table.
The command line would look like this: cellspacing="4", if you want the spacing to be 4 pixels. If you want more or less, incease or decrease the number accordingly. So, back to our original example again, this time with a cellspacing of 4.
| This is the header cell (<TH> - </TH>) |
| This is a table cell (<TD> - </TD>) |
Now lets repeat the exercise with a cellspacing of "1" so you can see the difference.
| This is the header cell (<TH> - </TH>) |
| This is a table cell (<TD> - </TD>) |
All we have done is alter the first line of coding in the first example so that it now looks like this:
<TABLE BORDER="1" width="60%" bgcolor="#FFFFFF" cellspacing="4">
Then we move swiftly on to Cellpadding. Cellpadding is best seen rather than described! But in a nut-shell it's the amount of space around the text (or graphic) contained in a cell. Let's take the code again from the example and add a HUGE cellpading of "8", then show you it again with a cellpadding of "2".
| This is the header cell (<TH> - </TH>) |
| This is a table cell (<TD> - </TD>) |
| This is the header cell (<TH> - </TH>) |
| This is a table cell (<TD> - </TD>) |
The line of code looks like this for the high-number cellpadding:
<TABLE BORDER="1" width="60%" bgcolor="#FFFFFF" cellspacing="4" cellpadding="8">
...and like this for the low-number cellpadding:
<TABLE BORDER="1" width="60%" bgcolor="#FFFFFF" cellspacing="4" cellpadding="2">
<TD> Widths & Attributes
So far we have made a couple of tables and dictated the size of the table only by the 'table width=' command. Now let's dictate the size of the individual cells. Again I would recommend that you use a percentage (%) rather than pixels. Let's put up a simple table to start with:
| cell 1 |
cell 2 |
| cell 3 |
cell 4 |
The code for this one is:
<table border="2" cellpadding="2" cellspacing="2" width="60%">
<tr>
<td align="center">cell 1</td>
<td align="center">cell 2</td>
</tr>
<tr>
<td align="center">cell 3</td>
<td align="center">cell 4</td>
</tr>
</table>
Now let's say we want cells 1 and 3 to be bigger than cells 2 and 4, so it looks like this:
| cell 1 |
cell 2 |
| cell 3 |
cell 4 |
We do this by dictating the width of the <TD> cells by a width="75%" (or whatever percentage you want) command. The smaller cells have a similar command except they would be width="25%" (make sure it all adds up to 100%!). If you were to use a fixed size in pixels then obviously this rule still applies except the total widths of the cells must add up to the overall width of the table in pixels.
So the code to make the above table is:
<table border="2" cellpadding="2" cellspacing="2" width="60%">
<tr>
<td align="center" width="75%">cell 1</td>
<td align="center" width="25%">cell 2</td>
</tr>
<tr>
<td align="center" width="75%">cell 3</td<
<td align="center" width="25%">cell 4</td>
</tr>
</table>
Want to read more about making really good looking tables? Please click here.
Top
[1] [2] [3] [4] [5] [6] [7]
<<< Previous page
| 
