Les modèles de tableau CSS sont basés sur ceux du HTML 4.0 dans lequel leur structure s'apparente à la disposition visuelle de la table.
Dans ce modèle, un tableau est constitué d'une légende optionnelle et d'un certain nombre de lignes et de cellules.
On dit que le modèle de tableau est basé sur une "ligne primaire" depuis que les auteurs spécifient explicitement des lignes plutôt que des colonnes, dans le langage de programmation du document.
Les colonnes sont dérivées après que les lignes aient été spécifiées (la première cellule de chaque ligne appartient à la première colonne, la seconde à la deuxième colonne, etc.).
Les lignes et les colonnes peuvent être regroupées structurellement et ce regroupement se reflète dans la présentation du tableau (par exemple, une bordure peut être dessinée autour d'un groupe de lignes).
Donc, le modèle de tableau est constitué de légendes, de lignes, de groupes de la ligne, de colonnes, de groupes de colonnes, et enfin de cellules.
Le modèle CSS n'exige pas que le code source du document doit inclure des éléments qui correspondent à chacun des composants d'un tableau.
Pour les langages (telles que les applications XML) qui n'ont pas d'éléments de tableau pré-définis, les auteurs doivent en élaborer afin d'ne construire un.
Les "propriétés d'affichage" des feuilles de style s'occupent de la construction d'un tableau.
Les valeurs d'affichage applicable à la propriété display, ci-dessous, assignent la sémantique des tableaux à un élément arbitraire :
| Propriété | Correspondance html |
Description |
|---|---|---|
| table | <table> | Définit un bloc rectangulaire. |
| inline-table | <table> | Définit un bloc rectangulaire du type "inline" |
| table-rows | <tr> | Définit une ligne du tableau |
| table-row-group | <tbody> | Définit un groupe de lignes constituant le corps du tableau |
| table-header-group | <thead> | Définit un en-tête composé d'une (ou plusieurs) ligne |
| table-footer-group | <tfoot> | Définit un pied de page composé d'une (ou plusieurs) ligne |
| table-column | <col> | Définit une colonne de cellules |
| table-column-group | <colgroup> | Définit un groupe de colonnes et de cellules |
| table-cell | <td> et <th> | Définit les cellules d'un tableau |
| table-caption | <caption> | Définit la légende d'un tableau |
| Windows | Macintosh | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| NE4 | NE6 | NE7 | IE5 | IE55 | IE6 | OP5 | OP6 | OP7 | NE4 | NE6 | NE7 | IE4 | IE5 |