JS Bug! Please Reload!


TABLES 101 - Lesson Two

by Flo Deems

Current time is 11:57:41

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:

1 2 3


THREE ROWS, 3 CELLS EACH:

123
123
123




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:



Lesson One Lesson Two Lesson Three
Row Tag Alignment for Table Cells
Monday 06th of February 2012 11:57:41 PM

See Flo's Other Tutes


by Tone By Tone Dot Net

Tandem Tooters
~ Arbor Hosting ~