像 table 和 ruby 这样的布局模型由复杂的内部结构组成。本章指定内部显示值，这些值仅与特定布局模型相关。
属性值
数据类型 <display-internal> 具有以下有效值:
table-row-group:元素的行为类似于 <tbody> HTML 元素。
table-header-group:元素的行为类似于 <thead> HTML 元素。
table-footer-group:元素的行为类似于 <tfoot> HTML 元素。
table-row:元素的行为类似于 <tr> HTML 元素。
table-cell:元素的行为类似于 <T> HTML 元素。
table-column-group:元素的行为类似于 <colgroup> HTML 元素。
table-column:元素的行为类似于 <col> HTML 元素。
table-caption:元素的行为类似于 <caption> HTML 元素。
语法
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption CSS <display-internal>: 表格
以下示例演示了 CSS表格布局显示，显示值如table-header-group、table-footer-group、table-row、table-cell:
<html>
<head>
<style>
main {
display: table;
}
#t-row {
display: table-row;
}
label,
input {
display: table-cell;
margin: 5px;
}
#t-header-gp {
display: table-header-group;
text-align: center;
background-color: aqua;
margin-bottom: 10px;
}
#t-footer-gp {
display: table-footer-group;
background-color: peachpuff;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Table Layout</h1>
<div id="t-header-gp">Table Header</div>
<main>
<div id="t-row">
<label for="name">Label1</label>
<input type="text" id="name" name="name" />
</div>
<div id="t-row">
<label for="age">Label2</label>
<input type="text" id="age" name="age" />
</div>
<div id="t-row">
<label for="age">Label3</label>
<input type="text" id="age" name="age" />
</div>
</main>
<div id="t-footer-gp">Table Footer</div>
</body>
</html>