<display-internal>
Some layout models such astable andruby have a complex internal structure, with several different roles that their children and descendants can fill. This page defines those "internal" display values, which only have meaning within that particular layout mode.
Syntax
Valid<display-internal> values:
table-row-groupThese elements behave like
<tbody>HTML elements.table-header-groupThese elements behave like
<thead>HTML elements.table-footer-groupThese elements behave like
<tfoot>HTML elements.table-rowThese elements behave like
<tr>HTML elements.table-cellThese elements behave like
<td>HTML elements.table-column-groupThese elements behave like
<colgroup>HTML elements.table-columnThese elements behave like
<col>HTML elements.table-captionThese elements behave like
<caption>HTML elements.ruby-baseThese elements behave like
<rb>HTML elements.ruby-textThese elements behave like
<rt>HTML elements.ruby-base-containerThese elements are generated as anonymous boxes.
ruby-text-containerThese elements behave like
<rtc>HTML elements.
Formal syntax
<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
Examples
CSS tables example
The following example demonstrates laying out a form using CSS table layout.
HTML
<main> <div> <label for="name">Name</label> <input type="text" name="name" /> </div> <div> <label for="age">Age</label> <input type="text" name="age" /> </div></main>CSS
main { display: table;}div { display: table-row;}label,input { display: table-cell; margin: 5px;}