<display-internal>
Một số mô hình bố cục như table và ruby có cấu trúc nội tại phức tạp, với nhiều vai trò khác nhau mà các phần tử con và hậu duệ có thể đảm nhiệm. Trang này định nghĩa những giá trị hiển thị "nội tại" đó, vốn chỉ có ý nghĩa trong chế độ bố cục cụ thể đó.
Cú pháp
Các giá trị <display-internal> hợp lệ:
table-row-group-
Các phần tử này hoạt động như phần tử HTML
<tbody>. table-header-group-
Các phần tử này hoạt động như phần tử HTML
<thead>. -
Các phần tử này hoạt động như phần tử HTML
<tfoot>. table-row-
Các phần tử này hoạt động như phần tử HTML
<tr>. table-cell-
Các phần tử này hoạt động như phần tử HTML
<td>. table-column-group-
Các phần tử này hoạt động như phần tử HTML
<colgroup>. table-column-
Các phần tử này hoạt động như phần tử HTML
<col>. table-caption-
Các phần tử này hoạt động như phần tử HTML
<caption>. ruby-base-
Các phần tử này hoạt động như phần tử HTML
<rb>. ruby-text-
Các phần tử này hoạt động như phần tử HTML
<rt>. ruby-base-container-
Các phần tử này được tạo ra dưới dạng hộp ẩn danh.
ruby-text-container-
Các phần tử này hoạt động như phần tử HTML
<rtc>.
Cú pháp chính thức
<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
Ví dụ
Ví dụ về bảng CSS
Ví dụ sau đây minh họa cách bố cục một biểu mẫu bằng bố cục bảng CSS.
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;
}