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. </TABLE> - close the box.
ONE ROW, 3 CELLS:
THREE ROWS, 3 CELLS EACH:
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.
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="#??????">
INVERTBORDER
ONLY for MSNTV (WebTV)
This attribute must be added; it can not be substituted for the border attribute. Reverses the light and dark sections of the border, making the border seem concave instead of convex.
You will see this in Tables 1 and 2 below in the inner table tag.
Compuer browsers do not recognize this attribute, so will display the border the usual way.
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:
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.
Table 1 - Borders, No Cellpadding
Table 2 - Borders with Cellpadding in 1st Table
Table 3 - No Border, but Cellpadding in 1st Table
Computer users won't see the same effects that MSNTV (WebTV does).
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.
I do not know how Internet Explorer shows MSNTV (WebTV tables).
Table 4 - approximation of how Netscape translates the tags for Table 3 above:
|