What is CSS Table?

CSS Tables are used by authors to organize their page content into visually appealing documents. These tables are defined by using specific layered grids. CSS table models are based on HTML, in which the structure of the table parallels the visual representation of the table. The tables comprise further tables, rows, columns, row groups, captions, column groups and cells. But recently it is the table model that has become essential for authors as they can specify rows and not columns, explicitly in the document language.

One of the main advantages of CSS table model is it does not require that the document language should include elements that correspond to each of those components. For document languages [like XML applications] that do not have any pre-defined table elements, the authors must map document language elements to table elements; especially done with display property. However, it is ‘display’ values that assign table semantics to an arbitrary element:

Table (in HTML: TABLE)
Signifies that elements define a block-level table: it is a rectangular block that participates in a block-formatting context.

Inline-table (in HTML: TABLE)

Signifies that an element must define as inline-level table: a rectangular block that will participate in inline-formatting context

Table-row-group (In HTML: TBODY)

Signifies that an element groups one or multiple rows

Table-row (In HTML: TR)

Signifies that an element groups one or multiple row of cells

Table Column (In HTML: COL)

Signifies that an element describes a column of cells

Table column-group (IN HTML: COLGROUP)

Signifies that an element groups one or more columns

Table header-group (In HTML: THEAD)

Like ‘table-row-group’ but for visual formatting, the row group is always displayed before all other rows and row groups and after any top captions. Print user agents might repeat footer rows on each page spanned by a table.

Table footer-group (In HTML: TFOOT)

Like ‘table-row-group’ but for visual formatting, the row group will always be displayed after all other rows and row groups and before any bottom captions.

Table Cell (In HTML: TD, TH)

Signifies that an element also represents a table cell

Table-caption (In HTML: CAPTION)

Signifies a caption for the table

Column Selectors

Table cells are usually associated to two contexts - rows and columns. In the source document, cells descend from rows and never from the columns. However, setting properties on various columns can influence some aspects of the cells.

Following properties apply to column and column-group elements:

• Width - the width property allows minimum width for the column
• Border - various border properties are applicable to columns only if ‘border-collapse’ is set to collapse on the table element. Borders set on columns and column groups are put into the conflict resolution algorithm that basically selects the border style at every cell edge
• Visibility - in case the visibility of the column is set to ‘collapse’, none of the cells in the column are rendered and cells that span into other columns are clipped together. Complimentary to this, the width of the table is diminished by the width space taken up by the column.
• Background - the background properties set the background for cells in the column, but only if both the cells and rows have transparent backgrounds.

Below are some of the other examples of style rules that set properties on columns. The first two rules implement the rules attribute of HTML 4.0 with a value of “cols”. The third rule makes the “totals” column blue and the final two rules show how to attribute fixed size to the columns, by usage of fixed layout algorithm.

COL         {border-style: none solid}
TABLE       {border-style: hidden}
COL.totals  {background: blue}
TABLE       {table-layout: fixed}
COL .totals {width: 5em}

Visual diagrammatic layout of table contents

The visual layout of table contents is bordered by rectangular, irregular grid of rows and columns. Each box of the table occupies a whole number of grid cells that follow a host of rules. These rules do not conform to HTML 4.0 or any other earlier versions of HTML; but HTML definitely imposes its own set of limitations on row and column spans.

Following are the set of rules on table contents:

1. Each row box occupies a single row of grid cells. When placed together, each of these row boxes fill the table right from top to bottom in the order they occur in the source document (i.e. the table would occupy exactly as many grid rows as the number of row elements)
2. A row group occupies the same grid cells as the row it contains
3. A column group box occupies same grid cells as the columns it contains
4. A column box occupies one or multiple columns of grid cells. Column boxes are positioned next to each other in the order that they occur. The first column box may be either on the left or on the right, depending on the value of the ‘direction’ property of the table.
5. A cell box cannot extend beyond the last row box of a table or row-group; the user agents will shorten it until it fits
6. Cells may span several rows and columns. (Although CSS2 will not define how the number of spanned rows or columns are determined, an user agent will have special knowledge about the source document. However, a future version of CSS might provide a way to express this knowledge in CSS syntax). Each of the cells is a rectangular box, with one or more grid cells as high and wide. The topmost row of this rectangle is in the row specified by the cell’s parent. The rectangle will be as far positioned to the left as possible, but it will not overlap with any of the other cell boxes, and must be to the right of all cells in the same row that are earlier in the source document. (This restriction holds if the ‘direction’ property of the table is ‘ltr’; if the ‘direction’ is ‘rtl’, interchange “left” and “right” in the previous sentences.)

Note: Table cells may be relatively and absolutely positioned, but this is not recommended: positioning and floating remove a box from the flow will affect the table alignment.

Here are two examples. The first is assumed to occur in an HTML document:

<table>
    <tr>
        <td>1</td>
        <td rowspan= "2">2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td colspan= "2">5</td>
</table>

<table>
    <row>
        <cell>1</cell>
        <cell rowspan= "2">2</cell>
        <cell>3</cell>
        <cell>4</cell>
    </row>
    <row>
        <cell colspan= "2">5</cell>
    </row>
</table>

The second table is formatted as in the figure on the right. However, HTML table’s rendering is explicitly undefined by HTML, and CSS does not try to define it. User agents are free to render it, e.g. as in the figure on the left.

Popularity: 42% [?]

Categories: CSS Layouts, Posted on January 30, 2008 by Choppr | Login