Drawing Tables - Trials and Tabulations - HTML with Style

Trials and Tabulations

Drawing Tables

Cell Spacing

The layout of a table is tricky business in itself. According to CSS2, each table cell has a padding, as defined by its box properties which we have already examined, a border, and a spacing between itself and other cells. Margins do not apply to table cells.

In CSS, cell spacing is controlled by the border-spacing property.

The border-spacing accepts either one length value, which will be the spacing between the borders of cells both horizontally and vertically, or two length values, in which case the first value denotes horizontal spacing and the second one denotes vertical spacing.

Both Internet Explorer and Navigator ignore this property. Instead, they recognize the deprecated CELLSPACING attribute to the TABLE element. This attribute accepts a number as a value, and this is the length, in pixels, of the spacing between cells. You cannot specify other units of length measurement, and you have to explicitly specify it in all tables. The following TABLE start-tag specifies a table with 5 pixels of spacing between its cells. The default value of this attribute is 3.

Cell padding can be controlled using the padding properties, but only in Explorer. Navigator will refuse to recognize it. Instead, it recognizes the CELLPADDING property for the TABLE element. This has the same syntax as the CELLSPACING attribute, and its default value is 0.

Cell borders are a slightly more complicated affair. CSS2 specifies two different border models for tables, each working in a slightly different way. Navigator completely ignores borders on cells. Explorer only works with one of the border schemes, the separate border scheme. In this scheme, each cell has an individual border as specified by its border properties, and the spacing between borders are separated by a length given by the border-spacing property. The collapsing border model, in which borders can be specified for cells and collapse between them, is currently unsupported. Since an in-depth discussion about these schemes is largely philosophical in nature due to the fact that they're unimplemented, we'll talk about them in a future tutorial.

Both browsers instead recognize the BORDER attribute to the TABLE element. This again accepts a value that indicates the width of the table's border. This border is drawn as a 3-D inset border for cells and a 3-D outset border for the table itself.

The example below showcases these attributes with a table that has a cell spacing of 5, a cell padding of 5 and a border width of 5.

<TABLE BORDER=5 CELLPADDING=5 CELLSPACING=5>
<TR><TH>Year</TH><TH>Bugs</TH><TH>Sales</TH></TR>
<TR><TD>1995</TD><TD>2.3</TD><TD>500,000</TD></TR>
<TR><TD>1996</TD><TD>3.2</TD><TD>1,700,000</TD></TR>
<TR><TD>1997</TD><TD>5.6</TD><TD>8,200,000</TD></TR>
<TR><TD>1998</TD><TD>12.3</TD><TD>33,000,000</TD></TR>
</TABLE>

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial11/6.html
Created: Feb 10, 1998
Revised: Feb 16, 1999