Adjusting Cellpadding and Cellspacing


Normally, when you create a layout table, you set the table tag's cellpadding and cellspacing attributes to 0. But when you build a data table, cellpadding and cellspacing are useful formatting tools. Cellpadding determines the amount of interior whitespace between the edges of a table cell and its content, while cellspacing determines the amount of exterior whitespace between individual table cells.

When you set the cellpadding and cellspacing attributes in the table tag, their values apply to every cell in the table:

 <table border="1" cellpadding="5" cellspacing="8"> 

Figure 56.3 shows a table with exactly these attributes. Compare it with the table in Figure 56.2 to see the difference in appearance that a little cellpadding and cellspacing make.

Figure 56.3. This data table adjusts the spacing inside and outside its cells with the cellpadding and cellspacing attributes.


Use cellpadding and cellspacing to help dense data tables breathe a little. Tables are usually easier to read when they have a little extra whitespace.

Don't overdo it, though. Too much whitespace is just as bad as too little. Let your eye be the judge. If your table isn't legible enough, try nudging up the cellpadding and cellspacing.

GEEKSPEAK

Cellpadding determines the amount of interior whitespace between the edges of a table cell and its content. Cellspacing determines the amount of exterior whitespace between individual table cells.


If your data table uses background colors, the cellpadding attribute is probably the better choice for whitespace. Cellspacing often causes visible gaps between the cells, breaking the continuous field of background color, as in Figure 56.4. Cellpadding has no such effect, as Figure 56.5 shows, as long as you set the cellspacing attribute to 0.

Figure 56.4. Watch out for cellspacing when your table cells have background colors. Cellspacing often breaks the continuous field of color.


Figure 56.5. Use cellpadding instead to keep the color field unbroken, and set cellspacing to 0.


TIP

Adjust the padding of an individual table cell with the padding-top, padding-bottom, padding-left, and padding-right CSS attributes, like this:

[View full width]

<td style="padding-top: 3px; padding-bottom: 4px; padding-left: 2px; padding-right: 5px;">




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net