HTML中的<table>元素用于显示表格数据。table表格无非就是tr行和td|th列组成。<th>元素表示“表格标题”,<td>元素表示“表格数据”。
Table相关元素
元素 | 描述 |
---|---|
<table> | 表格 |
<caption> | 表格的标题 |
<thead> | 表头 |
<tbody> | 表格正文 |
<tfoot> | 表格页脚 |
<tr> | 表格行 |
<th> | 作为标题的表格列 |
<td> | 作为数据的表格列 |
<col> | 列(无内容元素) |
<colgroup> | 一组列 |
Table相关属性
属性 | 元素 | 描述 |
---|---|---|
colspan | th, td | 列合并 |
rowspan | th, td | 行合并 |
span | col | 列合并 |
sortable | table | 允许排序 |
headers | td | 与数据相关的<th>元素的ID对应的空格分隔字符串 |
scope | th | row|col|rowgroup|colgroup(默认值)- 实质上指定标题的轴。默认情况下,标题是标题列,这是典型的,但是行也可能以标题开头,您可以将标题范围限定为行或行组。 |
Table常用样式
CSS 属性 | 可能值 | 描述 |
---|---|---|
vertical-align | baseline sub super text-top text-bottom middle top bottom % length | 对齐单元格内的内容。 |
white-space | normal pre nowrap pre-wrap pre-line | 控制文本在单元格中的换行方式。 |
border-collapse | collapse separate | 应用于表以确定边框是否折叠成自身(类似于仅双向折叠的边距)。 |
border-spacing | length | 如果border-collapse是separate,您可以指定单元格彼此间隔的距离。现代版的cellspacing属性。说到这一点,属性padding的现代版本cellpadding。 |
width | length | 宽度适用于表格单元格 |
border | length | 边框 |
table-layout | auto fixed | auto是默认值。表格及其单元格的宽度取决于内部的内容。如果将其更改为fixed,则表格和列宽度由table和col元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽,这可以加快渲染速度。如果后续单元格中的内容不适合,则溢出属性将确定发生的情况。 |
重置默认Table表格样式
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
斑马条纹表
如果未在表格单元格元素上设置背景颜色,则可以在表格行本身上设置它们。所以在最基本的情况下,您可以这样做:
tbody tr:nth-child(odd) {
background: #eee;
}
我们在选择器中使用tbody,因为你不太可能想要对页眉和页脚行进行操作。
让任何元素模拟为Table表格元素行为
<section style="display:table;">
<header style="display:table-row;">
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
</header>
<div style="display:table-row;">
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
</div>
</section>
display模拟表格属性描述:
display: table /* <table> */
display: table-cell /* <td> */
display: table-row /* <tr> */
display: table-column /* <col> */
display: table-column-group /* <colgroup> */
display: table-footer-group /* <tfoot> */
display: table-header-group /* <thead> */