css and tables

how NN and IE handle css and tables

page 1 of 3

page 1
• css support of tables
• background and margins
• width property
• height property
page 2
• borders per the w3c
• cells and borders
page 3
• aligning css tables
• alignment and nn
• td style and fonts

css support of tables

If you look at the source of many sites, you will see that designers "hardcode" tables with HTML 3.2 or HTML 4.0, but do not use stylesheets. Why? CSS support for tables is pretty spotty in IE5.0 and NN4.7. I've had a lot of trouble bringing CSS support to tables. In this section, we'll create a basic table and then try to bring stylesheet support to it and see how each browser renders the table and style information.

Below is the code for a basic four cell table.

<table>
<tr>
<td>cell one</td>
<td>cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
	

I haven't added any width or background or border information to this table. We will try to do this with stylesheets. The representation is almost identical in both browsers.

simple table

background and margins

Let's start with a background color for the table. Also, let's center the table by setting it's margins to AUTO. The style information is below.

table {background:#FFFF00;
	margin-left:auto;margin-right:auto}

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

NN4.7 and IE5.0 have colored the tables but have not responded to my attempt to center the table. Only NN6.0 has centered the table.

width property

Let's add width to the table.

table {background:#FFFF00;
	margin-left:auto;margin-right:auto;
	width:200px;}

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

NN4.7 does not respond to the WIDTH property in the style definition. IE5.0 and NN6.0 do. Note that both NN4.7 and NN6.0 have a clear cell wall painted between the cells.

height property

Like the WIDTH property, NN4.7 does not respond to the HEIGHT property. IE5.0 and NN6.0 do respond to the HEIGHT property.