HTML中Table表格元素完整指南

2019-05-172479次阅读HTML

HTML中的<table>元素用于显示表格数据。table表格无非就是tr行和td|th列组成。<th>元素表示“表格标题”,<td>元素表示“表格数据”。


Table相关元素

元素描述
<table>表格
<caption>表格的标题
<thead>表头
<tbody>表格正文
<tfoot>表格页脚
<tr>表格行
<th>作为标题的表格列
<td>作为数据的表格列
<col>列(无内容元素)
<colgroup>一组列

Table相关属性

属性元素描述
colspanth, td列合并
rowspanth, td行合并
spancol列合并
sortabletable允许排序
headerstd

与数据相关的<th>元素的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
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>     */
上一篇: chrome浏览器不支持audio和video标签的autoplay自动播放解决方案  下一篇: MP4 video视频背景色变成透明  

HTML中Table表格元素完整指南相关文章