Le CSS table modèle est basé sur le code HTML modèle de table
http://www.w3.org/TR/CSS21/tables.html
Un tableau est divisé en LIGNES, et chaque ligne contient un ou plusieurs cellules. Les cellules sont des enfants de LIGNES, ils ne sont JAMAIS les enfants de colonnes.
"display: table-column" ne fournit PAS de mécanisme pour faire des mises en page en colonnes (par exemple, les pages de journaux avec plusieurs colonnes, où le contenu peut découler d'une colonne à l'autre).
Plutôt, "table-column" SEULEMENT définit les attributs qui s'appliquent aux cellules correspondantes dans les lignes d'une table. E. g. "La couleur de fond de la première cellule de chaque ligne verte" peut être décrit.
La table elle-même est toujours structuré de la même manière, il est en HTML.
En HTML (observer que "td"s sont à l'intérieur "tr"s, PAS à l'intérieur "col"s):
<table ..>
<col .. />
<col .. />
<tr ..>
<td ..></td>
<td ..></td>
</tr>
<tr ..>
<td ..></td>
<td ..></td>
</tr>
</table>
Code HTML correspondant à l'aide de CSS les propriétés de la table (à Noter que la "colonne" divs ne contiennent pas de contenu -- la norme ne permet pas pour le contenu directement dans les colonnes):
<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow">
<div class="mycell">contents of first cell in row 1</div>
<div class="mycell">contents of second cell in row 1</div>
</div>
<div class="myrow">
<div class="mycell">contents of first cell in row 2</div>
<div class="mycell">contents of second cell in row 2</div>
</div>
</div>
le CSS:
.mytable {
display: table;
...
}
.myrow {
display: table-row;
...
}
.mycell {
display: table-cell;
...
}
.column1 {
display: table-column;
background-color: green;
}
.column2 {
display: table-column;
...
}
En OPTION: les deux "lignes" et "colonnes" peut être appelée par l'attribution de plusieurs classes pour chaque ligne et chaque cellule comme suit. Cette approche donne un maximum de flexibilité dans la spécification des différents ensembles de cellules, ou des cellules individuelles, qui portera le titre de:
<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow row1">
<div class="mycell cell1">contents of first cell in row 1</div>
<div class="mycell cell2">contents of second cell in row 1</div>
</div>
<div class="myrow row2">
<div class="mycell cell1">contents of first cell in row 2</div>
<div class="mycell cell2">contents of second cell in row 2</div>
</div>
</div>
Utile déclarations css, en fonction de ce que vous voulez affecter, comprennent:
/* all cells (that have "class=mycell") */
.mycell {
}
/* class row1, wherever it is used */
.row1 {
}
/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}
/* cell1 of row1 */
.row1 .cell1 {
}
/* cell1 of all rows */
.cell1 {
}
/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}
/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}
/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}
/* cell1 of all rows of a mytable */
.mytable .cell1 {
}
Aujourd'hui, dans les conceptions souples, qui utilisent de l' <div> pour de multiples raisons, il est sage de mettre certains de la classe sur chaque div, pour aider à vous y référer. Ici, ce que l'on <tr> en HTML est devenue class myrow, et <td> est devenue class mycell. Cette convention est ce qui rend le dessus de sélecteurs CSS utile.
PERFORMANCE NOTE: mettre les noms de classe sur chaque cellule, et à l'aide de la multi-sélecteurs de classe, est meilleures performances que l'utilisation de sélecteurs se terminant par *, comme .row1 * ou même .row1 > *. La raison en est que les sélecteurs sont appariés dernier de la première, de sorte que lorsque les éléments correspondants sont recherchées, .row1 * ne *, ce qui correspond à tous les éléments, puis vérifie tous les ancêtres de chaque élément, pour trouver si un ancêtre a class row1. Ce peut être lente dans un document complexe sur un slow de l'appareil. .row1 > * est mieux, parce que seul le parent immédiat est examiné. Mais il est beaucoup mieux encore à la suppression immédiate de la plupart des éléments, par .row1 .cell1. (.row1 > .cell1 , est encore plus serré spec, mais c'est la première étape de la recherche qui fait la plus grande différence, de sorte qu'il est généralement ne vaut pas le désordre, et le processus de pensée de savoir s'il sera toujours un enfant direct, de l'ajout de l'enfant sélecteur >.)
Le point essentiel à tenir à l'écart re de la performance , c'est que le dernier élément dans un sélecteur doit être aussi précis que possibleet ne doit pas être *.
