">
Domain Registration : Discount Domain Pricing : Website and Domain Hosting : Frontpage 2000 Hosting : Website Development and Promotion : Secure E-Commerce : Shopping Cart Software : Linux and Windows NT : Graphic Design : Free Email Services : Fast Servers : Low Cost!


RESOURCES




Caution should be used when defining selectors that alter the proportions and layout of your tables. If selectors are used to set widths or row and column spanning there is the possibility that your documents could become unreadable by User Agents that can not correctly parse the selectors.

Tables are often used by Authors to organize their page content into readable and visually appealing documents. Tables are defined by using a layered grid.


The <TABLE> element being on the bottom defines: the overall width and height of the table and how the cells of the table will be separated with margins.


The <ROW> element is then used to separate the table into a number of horizontal rows but can not contain the actual page content.


Finally the top layer the <TD> element is used to define columns that are placed inside the rows to hold the actual information to be displayed.


Table Headers <TH> are also used to provide comment lines between the row / column contents. They can not contain column elements and are considered row elements.


The <CAPTION> element can be used to contain a description of the table. Although the code is placed inside the <TABLE> element it is displayed outside the boundaries of the table border.


Because all of these elements are containers many formatting Declaration Values can be applied to them to define: width, color, border,... and styles can be inherited by their child elements to define: text color, size, and family and so on.


An example would be:

<HTML>
 <HEAD>
<style>
 TABLE {background:00C9FF }
 CAPTION {background:blue; color:yellow; font-size:20pt; caption-side:bottom }
 TR.whitetext {color:FFFFFF ; font-size:18pt}
 TD.redtext {border: thick solid red; color:red ; font-size:24pt}
 TD.ltgreenbackground {background:lightgreen}
 #width30 {width=30} 
 TD.image {background: url(chicken.jpg) fixed; vertical-align:bottom }

</style>

</head>
<body>  

<table border=0>
<th colspan=3>This is the header</th>
<tr class="whitetext"> 
<td>This is the first row first column </td>
<td class="ltgreenbackground" width=30> 
<font color="green">second row second col</font>
</td> <td>Row 1 Col3</td> </tr>
<tr> 
<td ID="width30" class="redtext">This text should be red </td> 
<td bgcolor="yellow">Row2 col2 
</td> <td class="../image"> 
<font size="2">can you see the chicken?</font> </td> </tr>
<caption bgcolor="green">This is a caption</caption>
</table>

</BODY>
</HTML>




The following images are representations of how this table is displayed in IE4 and NS4. You can see that the tables are dramatically different. However IE4 offers the best representation of the table when styles are used for element declarations. In the table you should notice that when Selectors are applied to parent elements like the <TR> they are inherited by their child elements the <TD> tag. You can override the style selectors locally by applying formatting values to the child elements.
This is important to remember and as suggested care should be taken to check compatibility across browsers.


Yes it is an ugly table but that's not the point.

Take a look at the differences between what endusers will see and what you may see if you develop with only one browser in mind.


This is the table in IE4





This is the table in NS4








With this in mind here are the declarations that may be used for your table elements.


column-span

Sets the number of Columns that a will be spanned by a column that is above two or more columns. Not implemented in NS4 or IE4.

row-span

Sets the number rows a Cell will span. Not implemented in NS4 or IE4.

width

Sets the width of the Cell Not implemented in NS4.

border

The border Declaration can be used for shorthand to define the color, style, width of your border.
Example you define a border of a cell with the following selector:


TD.red {border: red thick}

The cell will be red and thick.

You can also use the following declarations to define these properties individually.

border-width

Sets the width of the border of the Cell.

Not implemented in NS4.

border-color

Sets the color of the border.

Not implemented in NS4.

border-style

Sets the type of line used for the border.

Not implemented in NS4

Values that can be used in IE4 include:

blank, double, solid, ridge, groove, none

The following values are not implemented in IE4:

dashed, dotted


vertical-align

When you align contents in the sell you are shifting the baseline of the cells contents. The first Line of text or the bottom of the first image is used to set the baseline of a Table Cell. If the Cell is empty the bottom of the cell is considered the baseline.

Values include: baseline, top, bottom, middle

Not implemented in NS4: text-top, text-bottom

Not implemented in IE4 or NS4: sub, super

<Style>
TD {vertical-align:bottom}
</Style>

Alignment

Used to align text horizontally within a cell

Not implemented in IE4 or NS4.


caption-side

Used to position Table Captions

Not implemented in IE4 or NS4.


speak-header-cell

Used to tell Text to Speech Synthesizers how they should interpret and read the table.

Aural Styles are not implemented in IE4 or NS4.
















Copyright © 1995-2003 Sidetrips™ Internet Services, Inc. All rights reserved.

Reproduction in whole or in part in any form or medium without express
written permission of Sidetrips Internet Services, Inc. is prohibited.

sidetrips.com™, hostserver.com™, registera.com™, htmlshop.com™,
and associated domains are trademarks of Sidetrips™ Internet Service, Inc.

Privacy Policy | Acceptable Use Policy | Terms of Service