css and tables

how NN and IE handle css and tables

page 2 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

borders per the w3c

Let's look at some information on borders per the World Wide Web Consortium.

There are two distinct models for setting borders on table cells in CSS. One is most suitable for so-called separated borders around individual cells, the other is suitable for borders that are continuous from one end of the table to the other. Many border styles can be achieved with either model, so it is often a matter of taste which one is used.

Further on the border collapse property:

This property selects a table's border model. The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model. The models are described below.

So CSS should allow us through the separate border model to set borders around a table, and access the borders around individual cells. This is much more than tables allowed in HTML 3.2.

cells and borders

The separate border model allows border definitions for particular cells through setting the style for each cell. Below is the code for our table with the separate border model. In this definition, we are drawing borders around each cell and the table, and setting the type of border to an OUTSET kind that is ten pixels thick. I am setting the BORDER-SPACING property to 15 pixels thick. The BORDER-SPACING property is like the HTML CELLSPACING attribute.

table {background:#FFFF00;
	margin-left:auto;margin-right:auto;
	width:200px;height:100px;
	border: outset 10pt; 
        border-collapse: separate;
	border-spacing: 15px;}

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

Where's the borders for each cell? We have to define the borders for the cells separately. Below is the style definitions for the table cells. I have made one special table cell to demonstrate how we are reaching into each cell and controlling its look through styles. I reached the upper left cell using this statement:

<td class="special">

The code for the cell border style is below:

TD         { border: inset 5pt }
  TD.special { border: inset 10pt }

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

Look at the upper left cell. It's border is different from the other three. Also notice that IE5.0 and NN6.0 color the spacing between the border with the table's background color. This is exactly what the W3C defines for the BORDER-SPACING property.

Also, notice the dramatic difference in the cell spacing between NN6.0 and IE5.0