CSS表格模型基于HTML表格模型http://www.w3.org/TR/CSS21/tables.html
一张表分为多个行，每行包含一个或多个单元格。单元格是行的子级，它们永远不是列的子级。
“display: table-column”不提供用于制作柱状布局的机制（例如具有多列的报纸页面，其中内容可以从一列流动到下一列）。
相反，“表列”仅设置适用于表行中相应单元格的属性。例如。可以描述“每行第一个单元格的背景颜色是绿色”。
表格本身的结构始终与 HTML 中的结构相同。
在 HTML 中（注意“td”位于“tr”内，而不是“col”内）：
<table ..>
<col .. />
<col .. />
<tr ..>
<td ..></td>
<td ..></td>
</tr>
<tr ..>
<td ..></td>
<td ..></td>
</tr>
</table>
使用 CSS 表属性的相应 HTML（请注意，“列”div 不包含任何内容——该标准不允许直接在列中包含内容）：
.mytable {
display: table;
}
.myrow {
display: table-row;
}
.mycell {
display: table-cell;
}
.column1 {
display: table-column;
background-color: green;
}
.column2 {
display: table-column;
}
<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow">
<div class="mycell">contents of first cell in row 1</div>
<div class="mycell">contents of second cell in row 1</div>
</div>
<div class="myrow">
<div class="mycell">contents of first cell in row 2</div>
<div class="mycell">contents of second cell in row 2</div>
</div>
</div>
OPTIONAL：“行”和“列”都可以通过为每行和单元格分配多个类来设置样式，如下所示。这种方法在指定要设置样式的各种单元格集合或单个单元格方面提供了最大的灵活性：
//Useful css declarations, depending on what you want to affect, include:
/* all cells (that have "class=mycell") */
.mycell {
}
/* class row1, wherever it is used */
.row1 {
}
/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}
/* cell1 of row1 */
.row1 .cell1 {
}
/* cell1 of all rows */
.cell1 {
}
/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}
/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}
/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}
/* cell1 of all rows of a mytable */
.mytable .cell1 {
}
<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow row1">
<div class="mycell cell1">contents of first cell in row 1</div>
<div class="mycell cell2">contents of second cell in row 1</div>
</div>
<div class="myrow row2">
<div class="mycell cell1">contents of first cell in row 2</div>
<div class="mycell cell2">contents of second cell in row 2</div>
</div>
</div>
在当今灵活的设计中，使用<div>出于多种目的，明智的做法是some每个 div 上的类，以帮助参考它。这里，曾经是<tr>在 HTML 中变成了class myrow, and <td> became class mycell。这个约定使得上述 CSS 选择器变得有用。
性能说明：将类名放在每个单元格上，并使用上述多类选择器，比使用以结尾的选择器具有更好的性能*， 例如.row1 *甚至.row1 > *。原因是选择器匹配最后一个第一个，所以当寻找匹配元素时，.row1 *首先做*，匹配all元素，然后检查每个元素的所有祖先，查找是否有任何祖先class row1。对于慢速设备上的复杂文档来说，这可能会很慢。.row1 > *更好，因为只检查直接父级。但最好立即消除大多数元素，通过.row1 .cell1. (.row1 > .cell1是一个更严格的规范，但这是产生最大差异的搜索的第一步，因此通常不值得混乱，并且不值得额外思考它是否始终是直接子级，添加子选择器>.)
带走重的关键点表现那是last选择器中的项目应该是尽可能具体，并且永远不应该*.
