10 Jan 2013, 22:59

CSS : Table display mode (and not HTML tables !)

For those who built web sites in the end 90s or early 2000s, you had to use HTML tables to define the structure of your page, leading to awful imbrications and other crazyness. Fortunately, CSS2 arrived with the "display" and "float" attributes, For display attribute, we are used to the block, inline, none or inline-block values but you have a few other ones and especially the table one.

From IE8 and other recent version from modern browsers, you can use the "display: table" syntax which can allow you to manage positionning as you managed a HTML table some decades ago.

Openweb.eu published an article (in French so far) about this table value for the display attribute in CSS : le modèle tabulaire en CSS.

Below a quick presentation of the different values and their equivalent in a traditionnal html table :

table
Define a table behaviour for a block type element. (~ <table> rendering)
inline-table
Define a inline table behaviour for an element.
table-row
Define that the eelement is displayed as  a rang of rows (~ <tr>)
table-row-group
Define that an elemen groups one or more ranges ( ~ <tbody>)
table-header-group
Provides a header for a table-row-group block ( ~ <thead>)
table-footer-group
Provides a footer for a table-row-group block. ( ~ <tfoot>)
table-column
Define that an element represent a colomn of cells (~ <col>)
table-column-group
Define an element which groups one or several columns (~ <colgroup>)
table-cell
Define that an element must be displayed as a cell of the table ( ~ <th> & <td>)
table-caption
Define the legend of a table. ( ~<caption>)

So for example, you could manage this :

repartition2.png

What you can also manage with the table rendering in CSS :

  • Fixed or automatic layout (ie cells adapts to content or not) and the related overflow / word-wrap / hyphens if necessary to manage content adaptation to cell/table size
  • Border management
  • Horizontal / Vertical alignement,
  • Management of empty cells
  • Compatible & incompatible attributes

Article go much deeper in the presentation and it would take too much time to summarise it unfortunately. I strongly recommend you to read it if you read French.

As a conclusion, CSS table display mode :

  • Can give you a new and easiyer way to render your site when needed
  • Allow you to keep a sementical code on HTML side (compare to the old html table rendering method)

Do someone here were aware of this table attribute ? Do someone already use it ?