CSS3 Examples

CSS TABLE-LAYOUT

Written by jon on 9:04 AM This property controls the layout algorithm used to render table structures.
Using the “automatic” layout algorithm (the table algorithm used by default in most browsers today), all of the table content is required in order to determine the final table layout. For larger quantities of tabular data, this can be MUCH slower than the “fixed” table layout algorithm, especially since more than one analysis might need to be performed on the table data. However, this algorithm does find sufficient minimum and maximum widths for each column, allowing all content in the table’s data cells to be appropriately rendered as specified by the author.
Under the “fixed” layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can drastically speed up rendering time over the “automatic” layout method, but subsequent cell content may not fit in the column widths provided (the ‘clip’ and ‘overflow’ properties control the cell appearance in such a case.)

Example

table { table-layout: fixed } <table style=”table-layout: fixed”>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. auto Use the automatic table layout algorithm (the method commonly in use in most browsers for table layout.) fixed Use the fixed table layout algorithm.

CSS SPEAK-HEADER

Written by jon on 9:03 AM This property specifies how often table headers are spoken in relation to their relevant data cells.

Example

table { speak-header: once } <table style=”speak-header: once”>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. once The table header is spoken once before a series of cells. always The table header is spoken every time a relevant data cell is aurally rendered.

CSS EMPTY-CELLS

Written by jon on 9:02 AM In the “separated borders” model, this property specifies whether to render borders around cells with no visible content. Content with a ‘visibility’ property value of “hidden” or certain whitespace characters (Unicode 09[tab], 0A[linefeed], 0D[Carriage Return], and 20[space]) are not considered to be “visible” content by themselves.

Example

td { empty-cells: hide } <td style=”empty-cells: hide”> </td>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. show Render the specified border style for cells that do not contain visible content. hide Do not render any specified border style for cells that do not contain visible content.

CSS CAPTION-SIDE

Written by jon on 9:01 AM This property specifies the position of elements with an intrinsic (HTML CAPTION elements) or assigned ‘display’ property value of “table-caption” in relation to the table rendering box they are assigned to. Alignment within the table caption is accomplished using the ‘text-align’ and ‘vertical-align’ properties.

Example

caption { caption-side: right } <caption style=”caption-side: right”>Caption</caption>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. top The caption is positioned above the rendered table box. bottom The caption is positioned below the rendered table box. left The caption is positioned to the left of the rendered table box. right The caption is positioned to the right of the rendered table box.

CSS BORDER-SPACING

Written by jon on 8:52 AM This property specifies the distance between the borders of adjacent table cells in the “separated borders” model. The space between table cells uses the background color/image specified for the explicit or assigned TABLE element.

Example

table { border: medium double red; border-collapse: separate; border-spacing: 10pt 5pt } <table style=”border: medium double red; border-collapse: separate; border-spacing: 10pt 5pt”>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. [length length] Specifies an explicit border spacing. Listing one length value should assign the value to both horizontal and vertical spacing, while specifying two values should assign the first value to the horizontal spacing and the second value to the vertical spacing.

CSS BORDER-COLLAPSE

Written by jon on 10:37 AM The rendering of table borders is divided into two categories in CSS2 - “collapsed” and “separated”. This property specifies which border rendering mode to use. In the collapsed border model, adjacent table cells share borders. In the separated model, adjacent cells each have their own distinct borders
In the CSS2 collapsed border model, provision is made for resolution of cases where borders specified for adjacent cells differ and are in conflict:

• If any shared border has a component where the ‘border’ is set to “hidden” for ANY of the sharing members, the common border should be unconditionally set to “hidden”.
• If any shared border has a component where the ‘border’ is set to “none”, it can be overridden by any other border-sharing member carrying a renderable ‘border’ property value. If ALL border-sharing members specify a value of “none” for a border component, only then will the border be set to “none”.
• If a shared border has a ‘border-width’ contention, (with no component having a ‘border’ value of “hidden” of course…), the largest border-width should be rendered.
• If a shared border has a ‘border-style’ contention, the suggested priority should be used (decreasing from left to right): “double”, “solid”, “dashed”, “dotted”, “ridge”, “outset”, “groove”, “inset.”
• If a shared border has a ‘border-color’ contention, the suggested priority should be used (decreasing from left to right): Table cell, table row, row group, column, column group, table.

Example

table { border: medium double red; border-collapse: separate; border-spacing: 9pt 4pt } <table style=”border: medium double blue; border-collapse: separate; border-spacing: 9pt 4pt”>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent collapse Use the “collapsed borders” rendering model separate Use the “separated borders” rendering model