table元素的简介
table标签下,通常包含caption(表格的标题),thead, tbody, tfoot,三个部分,如下表格所示:
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Month | Savings |
---|---|
Sum | $180 |
January | $100 |
February | $80 |
table可以通过属性来定义它的样式,但是一般不推荐这样做,最好是通过CSS来完成样式的自定义。如果定义了属性,同时也定义了CSS样式,将以CSS样式为准。
以下属性仅作了解,并且HTML5只支持border属性。
align: 表示表格应该相对于父元素向左,右还是中间对齐
bgcolor:表格的背景颜色,值为十六进制数
border:定义边框的粗细
frame:定义哪边的边框需要显示
cellpadding:表格格子与内容之间的间隔
cellspacing:格子与格子之间的间隔
width:表格的宽度
tr标签,Table-Row,表示表格中的一行,通常被thead, tbody, tfoot。
th标签,表头单元格,包含头部信息,和td标签一样,被tr包裹,存在表头当中以下是Html5支持的属性。
colspan: 表示单元格可以横跨的列数
rowspan:表示单元格可以横跨的行数
headers:规定与单元格相关联的一个或多个表头单元格。
scope:规定表头单元格是否是行、列、行组或列组的头部 “col|row|colgroup|rowgroup”
td标签,Table-Data,表示的是单元格,通常被tr包裹。以下是Html5支持的属性。
colspan: 表示单元格可以横跨的列数
rowspan:表示单元格可以横跨的行数
headers:规定与单元格相关联的一个或多个表头单元格。
table样式的自定义
display: table, table-row, table-cell。
border-collapse:设置是否把表格边框合并为单一的边框。separate| collapse,如果为collapse,会忽略border-spacing 和 empty-cells 属性。
border-spacing:设置分隔单元格边框的距离。取值同border属性,只用于分离模式。
empty-cells:show|hide,设置是否显示表格中的空单元格。
caption-side:top|bottom, 表示表格标题的位置。
table-layout: automatic|fixed;在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。当属性值为fixed时,可以手动设置宽高,如果table的宽度或者高度确定,每个单元格将会等分。
链接描述