cellspacing
Cellspacing defines the gap between each cell in a table. Take a look at the following examples.
The codes for the three tables above are:
<table cellspacing="0" border="1"><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table>
<table cellspacing="5" border="1"><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table>
<table cellspacing="10" border="1"><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table>
Question: How is cellspacing different from the cellpadding we looked at earlier?
Note that cellspacing is not the same as cellpadding that we studied in the last section. So that you can see the difference, let's see some examples of cellpadding.
Compare these to the first three tables above. Can you see the difference? Cellpadding adds space between the contents of each cell, while cellspacing separates the individual cells. You can use a combination of these to obtain the effect you desire.
The codes for the three tables above are:
<table cellpadding="0" border="1"><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table>
<table cellpadding="5" border="1"><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table>
<table cellpadding="10" border="1"><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table>
width
This defines how wide your table should be.
Width can be indicated in pixels or as a percentage of screen size. For example, you could indicate the you want the table to be 400 pixels, or something like 60%. I generally prefer the percent, because different screens have different resolutions. So that 400 pixels may almost take up the whole of one screen, while looking very small on another. But if you use the percent, then the table will take up the same amount of space on all screens, no matter the screen size or resolution.
Let's take a look at some examples.
The codes for the three tables above are:
<table width="20%" cellspacing="0" border="1"><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table>
<table width="50%" cellspacing="0" border="1"><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table>
<table width="80%" cellspacing="0" border="1"><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table>
Question: How can width be useful in tables besides just defining the size of the table?
|
height
It is important to include height in your tables. A table with height indicated will load faster than one without height. You don't have to know the height of your table when you define it. This is because if the height you indicate is less than the size of its contents, the table will expand automatically to fit the contents in.
Question: How is height included in a table?
This is done the same way as table width.
So let's say we want a table that will be 200 pixels in height, the code will be:
<table height="200">
<tr>
<td>...</td>
</tr>
</table>
Height can also be indicated as a percentage.
Table width comes in handy when you have a bunch of text that you need to put up quickly on the internet. Instead of just dumping the text on the page, that will run from one end of the screen to the other, you can put the text in a table, and define the width. People like it when text on a page has a lot of white space around it. You can see that this text you're reading does not run from one end of the screen to the other. There is white space on the right and left sides.
Definitely, the text inside a table is easier to read than if it runs from end to end.. This is just one of the many uses of table width.
Previous | Next | Home
Ok folks! this is all I have for now. I'll be adding more as soon as I have the time to write them.
|
|