html中table中字段可选,HTML中Table表格元素完整指南

HTML中的

Table相关元素元素描述

表头

表格正文表格页脚表格行作为标题的表格列作为数据的表格列列(无内容元素)一组列

Table相关属性属性元素描述colspanth, td列合并

rowspanth, td行合并

spancol列合并

sortabletable允许排序

headerstd与数据相关的

元素的ID对应的空格分隔字符串

scopethrow|col|rowgroup|colgroup(默认值)- 实质上指定标题的轴。默认情况下，标题是标题列，这是典型的，但是行也可能以标题开头，您可以将标题范围限定为行或行组。

Table常用样式CSS 属性可能值描述vertical-alignbaseline

sub

super

text-top

text-bottom

middle

top

bottom

%

length对齐单元格内的内容。

white-spacenormal

pre

nowrap

pre-wrap

pre-line控制文本在单元格中的换行方式。

border-collapsecollapse

separate应用于表以确定边框是否折叠成自身(类似于仅双向折叠的边距)。

border-spacinglength如果border-collapse是separate，您可以指定单元格彼此间隔的距离。现代版的cellspacing属性。说到这一点，属性padding的现代版本cellpadding。

widthlength宽度适用于表格单元格

borderlength边框

table-layoutauto

fixedauto是默认值。表格及其单元格的宽度取决于内部的内容。如果将其更改为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表格元素行为

display模拟表格属性描述：display: table                /*

display: table-cell           /*

       */

display: table-row            /*

       */

display: table-column         /*

      */

display: table-column-group   /*

 */

display: table-footer-group   /*

    */

display: table-header-group   /*     */