<display-internal>

Syntaxe

Valeurs valides pour <display-internal> :

table-row-group

Ces éléments se comportent comme des éléments HTML <tbody>.

table-header-group

Ces éléments se comportent comme des éléments HTML <thead>.

table-footer-group

Ces éléments se comportent comme des éléments HTML <tfoot>.

table-row

Ces éléments se comportent comme des éléments HTML <tr>.

table-cell

Ces éléments se comportent comme des éléments HTML <td>.

table-column-group

Ces éléments se comportent comme des éléments HTML <colgroup>.

table-column

Ces éléments se comportent comme des éléments HTML <col>.

table-caption

Ces éléments se comportent comme des éléments HTML <caption>.

ruby-base

Ces éléments se comportent comme des éléments HTML <rb>.

ruby-text

Ces éléments se comportent comme des éléments HTML <rt>.

ruby-base-container

Ces éléments sont générés comme des boîtes anonymes.

ruby-text-container

Ces éléments se comportent comme des éléments HTML <rtc>.

Syntaxe formelle

<display-internal> = 
  table-row-group      |
  table-header-group   |
  table-footer-group   |
  table-row            |
  table-cell           |
  table-column-group   |
  table-column         |
  table-caption        |
  ruby-base            |
  ruby-text            |
  ruby-base-container  |
  ruby-text-container  

Exemples

Exemples de tableaux CSS

L'exemple suivant démontre la mise en page d'un formulaire en utilisant la disposition de tableau CSS.

HTML

<main>
  <div>
    <label for="name">Nom</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Âge</label>
    <input type="text" id="age" name="age" />
  </div>
</main>

CSS

main {
  display: table;
}

div {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin: 5px;
}

Résultat

Spécifications

Compatibilité des navigateurs

css.properties.display.table-row-group

css.properties.display.table-header-group

css.properties.display.table-footer-group

css.properties.display.table-row

css.properties.display.table-cell

css.properties.display.table-column-group

css.properties.display.table-column

css.properties.display.table-caption

css.properties.display.ruby-base

css.properties.display.ruby-text

css.properties.display.ruby-base-container

css.properties.display.ruby-text-container

Voir aussi

• Les types de données de la propriété display :
  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-box>
  • <display-legacy>