We've already seen that neither NN4.7 and IE5.0 will align tables with the MARGIN-LEFT and -RIGHT properties set to AUTO. Let's go back to HTML 4.0 to set the alignment of the table. There are three possible alignments; left, right and center. You can align a css defined table by setting the ALIGN attribute of the table tag to CENTER.
NN4.7 will align tables unpredicatably when styles are introduced. Even if we use the ALIGN=CENTER attribute in the TABLE tag, NN4.7 will align the table to the left margin if certain style syntax and/or values are used in the cells. I have made a list of known conditions that I have found that will cause NN4.7 to align a table to the left margin even if the ALIGN attribute of the TABLE tag is set to CENTER.
A quick word though about the nature of this alignment. Though the table is placed to the left of the page, the table acts as if it's centered. That is, there are no floating issues with text that follows the table.
Below is the HTML for a simple table. In the TABLE tag I've defined only the alignment and the border value.
<p>
<table align="center" border="1">
<tr><td class="cellclass">
some information</td>
<td class="cellclass">
some information</td>
</tr>
<tr><td class="cellclass">
some information</td>
<td class="cellclass">
some information</td>
</tr>
</table>
</p>
Here are the style definitions that will case NN4.7 to align the table to the left instead of centering it.
| style | applied by | effect on NN4.7 | effect on NN6.0 |
| .cellclass {} | td class="cellclass" | none | none |
| .cellclass {background:#FFFF00;color:#FFFFFF;} | td class="cellclass" | none | none |
| .cellclass {background:#FFFF00;color:#FFFFFF; text-align:center;} | td class="cellclass" | none | none |
| .cellclass {background:#FFFF00;color:#FFFFFF; text-align:center;vertical-align:middle;} | td class="cellclass" | none | none |
We'll change the table by setting the table WIDTH.
<p>
<table align="center"
border="1" width="50%">
<tr><td class="cellclass">
some information</td>
<td class="cellclass">
some information</td></tr>
<tr><td class="cellclass">
some information</td>
<td class="cellclass">
some information</td></tr>
</table>
</p>
| style | applied by | effect on NN4.7 | effect on NN6.0 |
| .cellclass {} | td class="cellclass" | none | none |
| .cellclass {background:#FFFF00;color:#FFFFFF;} | td class="cellclass" | none | none |
| .cellclass {background:#FFFF00;color:#FFFFFF; text-align:center;} | td class="cellclass" | align to left | none |
I have tried to set the font size for a cell directly through the td tag. Below is the code for doing this through a class and also through an inline style definition.
.cellclass {font-size:xx-small;}
<td style="font-size:xx-small;">
IE5.0 and NN6.0 will respond to both of these methods. NN4.7 will not set the font size through an inline style. It will, however, respond to the font-size property through a class definition.
| resources | |
| Four Corners Effective Banners | This site is dedicated to the study of all things banner-like, including: banners, click-through ratios, banner advertising, banner link exchanging, etc. You'll learn how to improve your banners and increase your site traffic. |
| Free Site Tools | A webmaster's directory of free resources to help find about everything to build, maintain and promote your website. 1000+ Resources. |
| Free Webmaster Tools and Resources | Your center for absolutely free high quality webmaster resources and tools to manage your web site. All utilities, programs and sites are carefully selected. |
| EZSearches.com | Want access to free email, auctions, shopping bargains and more? Try EZSearches.com |
| Certified Nerds | A great computer repair company that does in-home visits or drop-off. |
| Cool Candle Shoppe | Candles Place is a great site that if you're looking to purchase some great wax sticks, I'd go here. |