RichInStyle.com CSS2 tutorial - Tables

Contents

Introduction

Tables present unique difficulties for formatting purposes - are empty cells drawn, are borders separate or together, etc.

They also require different display keywords.

Display keywords

The display keywords for table elements are:

• table (= <TABLE>)
• inline-table
• table-row-group (= <TBODY>)
• table-column-group (= <COLGROUP>)
• table-header-group (= <THEAD> - the same as row-group, but always put at the top of the table, above all captions and rows)
• table-footer-group (= <TFOOT> - the same as row-group, but always put at the bottom of the table, below all rows and captions)
• table-column (= <COL>)
• table-row (= <TR>)
• table-cell (= <TD>)
• table-caption (= <CAPTION>)

Columns and column groups are not rendered, but allow styles to be set on a whole column.

Note that browsers are permitted to ignore display: on HTML table elements (such as TD), and preserve their existing type.

Note as well that since every table element requires a table, a cell and a row, where one or more of these is missing, the others are implied around it and all similar consecutive sibling elements (e.g., where there are consecutive table rows, a single table will be implied around all of them).

<DIV style="display: table-cell">
</DIV>
<DIV style="display: table-cell">
</DIV>

The above example would have a table and a table row implied around it.

Text-align

Table cells may take a string for text-align indicating the string in that column on which cells will align - e.g., text-align: "." aligns cells along the period. Any cell without the period has its right edge aligned with the period: You can specify text-align on the the table relying on inheritance or on the table but never on the column because text-align has no effect on columns.

Here's an example

<TABLE>
<TR>
<TD style="text-align: '.'">
$950.00
<TD style="text-align: '.'">
$95.00
<TD style="text-align: '.'">
$95
</TABLE>

That would be aligned like this:

$950.00
 $95.00
 $95

Columns and rows

Each cell is in a row and in a column. There is an important distinction however: table-cells are descendants only of rows and not of columns. In addition, only width, border, background and visibility have any effect on columns.

Visibility: collapse

This value for visibility is the same as hidden in that it hides the element, except on rows, row groups, columns and column groups, where it causes the whole row/column not to be displayed. It does not force re-layout of the table, meaning that script languages can be used to hide rows or columns and other content in.

Visibility values other than collapse have no effect on columns.

Caption-side

This indicates where captions should be placed and takes one of: top (caption above the top of the table), bottom, left (caption to the left of the table) and right. Top is the inital value.

It only applies to elements with display: table-caption (including the <CAPTION> element itself), but it is inherited.

Captions above or below tables behave like block elements in that their margins collapse with it. Captions inherit properties from the TABLE itself.

When the caption is on the left or right side, width: auto has the effect of setting a 'reasonable width'. As such, it is recommended that you set width to an explicit value.

When captions are placed to the side of a table, vertical-align expresses the position of the caption. The valid values are top, middle and bottom, all other values being treated as top.

Table-layout

Table-layout specifies the way that the table's dimensions are calculated. It allows you to strike a balance between speed and convenience.

It always best to go for speed unless (and this is a big 'unless', because most of the time it isn't) it is inappropriate to explicitly set width values.

There are two values: auto (initial) and fixed. Table-layout is not inherited, is initially auto, and applies only to tables and inline tables.

Width of table elements

Fixed table layout

Fixed is faster because it does not look at the content of the table:

1. If a column has its width set to a value other than auto, then the value specified for it sets that column's width.
2. Otherwise any cell in the first row of the table with a value for width other than auto sets that column's width; if the cell spans several columns, each is given equal width.
3. Remaining columns split the remaining horizontal space.

The width of the table becomes the larger of width for the table and the sum of column widths, borders and padding.

If the table's width is greater than that of the content, the extra space is spread equally between the columns.

The disadvantage of fixed layouts is that unlike with automatic table cells, content may overflow its cell.

Automatic table layout

Table-layout: auto calculates the table width only after reading the whole of each column. Broadly speaking, table-layout: auto sets the width of table elements to the larger of the width required by the content and the width specified by the width property.

Vertical-align on table elements

Many vertical-align values are inapplicable on table cells, but those that are applicable specify the position of that cell's baseline in relation to the baseline of the row. The applicable values are top (aligns the top of the cell with the top of the first row that it spans (through the HTML rowspan attribute)), middle (aligns the center of the cell with the center of the rows it spans), bottom (aligns the bottom of the cell with the bottom of the last row it spans) and baseline (baseline is aligned with the baseline of the first row its spans). Other values are treated as baseline. The baseline of a cell is that of its first line box; failing that, the bottom of the cell.

Where a cell is shorter than its row, it is given extra padding.

Table conflicts

There are two principal areas where conflicts can occur - backgrounds and borders. CSS provides various rules and properties to specify how these conflicts should be resolved.

Backgrounds

Since rows, row groups, cells, columns and tables may have different backgrounds, cells are assumed to be on top of rows, which in turn are on top of row groups, which are on top of columns, which are on top of column groups, which are on top of tables. Thus the TABLE's background is only visible in a cell if everything on top of it has a transparent background (as most probably they will, given that transparent is the initial value for background).

Borders

Border-collapse

You will probably have been annoyed at one time with the way that adjoining borders do not merge into one, but instead are drawn as separate borders. The border-collapse allows this behavior to be overridden.

It can take the values collapse (initial value - adjoining borders merge into one) or separate (adjoining borders are drawn separately). It is inherited. It applies to tables and inline-tables. Note that although collapse is the initial value, for the <TABLE> element, browsers have border-collapse: separate in their browser style sheet in order to implement the HTML cellspacing attribute.

Margins on table elements

Margins do not apply to table elements except captions, tables and inline tables. However, padding and borders apply to all table elements.

Separated borders

If a table has separated borders, only table cells and tables may have borders - never rows or columns.

Border-spacing

This dictates the distance between adjacent cell borders (and thus between cells). The space is filled with the table element's background. Border-spacing applies to tables and inline-tables. It is inherited.

One or two non-negative lengths can be specified for border-spacing, where the first refers to the horizontal, and second to the vertical spacing (if only one is specified, it refers to both horizontal and vertical spacing). Initially spacing is 0. Percentages are not valid. To give an example, border-spacing: 5px is equivalent to the HTML formatting attribute cellspacing=5.

Empty-cells

This takes the value show (initial value) or hide to control whether empty cells are rendered (i.e., whethere their borders are rendered). It only applies to table-cell elements and is inherited.

Collapsing borders

With collapsing borders, tables and table rows do not have padding; however, cells do.

Collapsing border conflict problems

Clearly adjoining table elements can have different borders. The borders are drawn according to the following rules:

1. If any of the adjoining elements has border-style: hidden, no border is drawn.
2. If one of the adjoining elements has a border-style other than none, then it will be drawn (i.e., none is only obeyed when all border-styles are none).
3. If several elements have a border-style other than none, then the thickest border is drawn.
4. If several elements have the same width, styles are preferred in this order (from most to least) : double, solid, dashed, dotted, ridge, outset, groove, inset.
5. If borders differ only in color, cells beat rows, which beat row groups, which beat columns, which beat column groups, which beat tables.

Note also that for tables in the collapsing border model, border-style: inset = border-style: groove, and border-style: outset = border-style: ridge.

The next section deals with paged media (printer support).

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.