<display-internal>
Quick Summary for <display-internal>
table
and ruby
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.
Code Usage for <display-internal>
<main> <div> <label for="name">Name</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">Age</label> <input type="text" id="age" name="age"> </div> </main>
More Details for <display-internal>
<display-internal>
Some layout models such as table
and ruby
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-group
These elements behave like <tbody>
HTML elements.
table-header-group
These elements behave like <thead>
HTML elements.
table-footer-group
These elements behave like <tfoot>
HTML elements.
table-row
These elements behave like <tr>
HTML elements.
table-cell
These elements behave like <td>
HTML elements.
table-column-group
These elements behave like <colgroup>
HTML elements.
table-column
These elements behave like <col>
HTML elements.
table-caption
These elements behave like <caption>
HTML elements.
ruby-base
These elements behave like <rb>
HTML elements.
ruby-text
These elements behave like <rt>
HTML elements.
ruby-base-container
These elements behave like <rbc>
HTML elements generated as anonymous boxes.
ruby-text-container
These elements behave like <rtc>
HTML elements.
Examples
CSS tables example
The following example demonstrates laying out a simple form using CSS table layout.
HTML<main> <div> <label for="name">Name</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">Age</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; }
ResultSpecifications
Specification |
---|
CSS Display Module Level 3 # typedef-display-internal |
Support of table values
table
, table-cell
, table-column
, table-column-group
, table-footer-group
, table-header-group
, table-row
, and table-row-group
Support of ruby values
ruby
, ruby-base
, ruby-base-container
, ruby-text
, and ruby-text-container
See also
display
<display-outside>
<display-inside>
<display-listitem>
<display-box>
<display-legacy>
Last modified: Feb 22, 2022, by MDN contributors
Select your preferred language English (US)Français日本語한국어Português (do Brasil)中文 (简体) Change language