TABLES 101
Lesson Two

by Florence W Deems

Current time is 09:57:56

Before we go on to these next two attributes, let's review a bit.

<table> - open the box
<tr> - open the row across.
<td>TEXT, IMAGES</td> - open and close each data cell in row.
</tr> - close the row cell.
</table> - close the box.



ONE ROW, 3 CELLS:

1 2 3


THREE ROWS, 3 CELLS EACH:

1 2 3
1 2 3
1 2 3




Now on to Lesson 2:

There are two very handy table attributes in addition to the Border: Cellspacing and Cellpadding.

CELLSPACING

  • Forms the inner borders between the cells.

  • Make this "0" pixels for invisible inner borders; or 1 to any number of pixels, depending on how much division you want between the data cells.

  • The table border and the cellspacing will look contoured with shading so that the light seems to come from the upper left; right and bottom of the border will show darker, to simulate a shadow. The wider the borders, the more the contouring is evident.

Example
ORNAMENTS IN A BOX

Table border and Cellspacing the same size, 2 pixels.





CELLPADDING

  • The space around the contents of the data cell.

  • Cellpadding always looks flat, like the mat of a framed picture.

  • If you want a flat picture frame, then you make the table border "0" and leave out the cellspacing, or set it to equal "0" also.

  • Put the cellpadding in the table tag for a flat frame around image, or text.

  • See the third table below.

<table border="0" cellspacing="0" cellpadding="20" bgcolor="#??????">



TABLES WITHIN TABLES

  • Nest one or more tables inside the container table.

  • Keep nesting in this order:

    <table> <tr> <td> <table> <tr> <td>
    Text, images here

  • Close each tag in the reverse order:

    </td> </tr> </table> </td> </tr> </table>

EXAMPLES:

Why would we want to do this? See below for some effects we can get by nesting tables!

Table 1 - nested tables.

  • The first and second table tags form the frame around the image.

  • The third or inner table tag places the image.


Table 2 - duplicate of Table 1, with cellpadding added to the outer table tag.

Example
TABLE 1 - Borders, No Cellpadding



Example
TABLE 2 - Borders with Cellpadding in 1st Table



Example
TABLE 3
- No Border, but Cellpadding in 1st Table



Netscape will not show color in the table borders, but will show it in the cellpadding.
If the table border is wide enough, Netscape will show either white or the page background through the width of the borders.



Table 4 - approximation of how Netscape translates the tags for Table 3 above:



Lesson One Lesson Two Lesson Three
Row Tag Alignment for Table Cells
Tuesday 11th of February 2025 09:57:56 AM

See Flo's Other Tutes


by
~ Arbor Hosting ~