web开发

HTML标签之Table

作者：阿呆  发表于:

Table标签使用

1、<thead>

整个第一行的部分没有包含数据，它只是每个列的标题。因此，我们可以<thead>元素来完成这件事情，它会包裹第一个<tr>元素(它会包裹所有的行所需要的头部信息)；
当你使用了<thead>元素后，<table>元素中不能有直接的<tr>子元素，所有的行必须存在于<thead>，<tbody>和<tfoot>里面。要注意的是我们会把所有的数据行包含在<tbody>里面。

2、<tfoot>

<tfoot>独一无二的一点是它在HTML中的位置，它紧跟着<thead>并位于<tbody>的前面！你可能会认为它是table标签结束前的最后一个元素，但情况并不是这样。因为页脚可能包含了用于理解表格的必要信息，因为在资源序列中它应当排在在数据的前面。 在一些元素位置根据需要从上至下跳动的布局中，<tfoot>是个不错的技巧。举个例子，虽然一个导航在屏幕的底部，但在HTML源码中导航应该在顶部。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<table>   
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Favorite Color</th>
        </tr>   
    </thead>   
    <tfoot>
        <tr>
            <th>tfoot</th>
            <th>ID</th>
            <th>Favorite Color</th>
        </tr>  
    </tfoot>   
    <tbody>
        <tr>
            <td>Jim</td>
            <td>00001</td>
            <td>Blue</td>
        </tr>   
    </tbody> 
</table>
 
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>tfoot</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
  </tbody>
</table>

3、单元格：td和th

在表格中一个独立的单元格总是<td>或<th>两者之一，只要你愿意，你可以把任何东西放进表格的单元格中，但要使这些元素成为表格中的单元格元素。<th>是“表格的标题”一般用在一列的第一格,里面的内容会自动加粗加黑他们，<td>是“表格的数据”。

4、基本样式

你看到的大多数表格都用颜色和线条来区别表格的不同部分。边框是非常常见的。默认的，所有的单元格相互之间都有2px的空隙
bordercolor =”边框颜色”
cellspacing =”单元格之间的距离，外边距”
cellpadding =”单元格与内容之间的距离，内边距”
bgcolor =”背景颜色”
align =”水平对齐方式”
valign =”垂直对齐方式”

border-collapse

  • 用于表格属性, 表示表格的两边框合并为一条。
  • 默认值：separate边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
  • collapse：如果可能，边框会合并为一个单一的边框。会忽略border-spacing 和 empty-cells 属性。
  • inherit：规定应该从父元素继承border-collapse属性的值。

border-spacing

  • 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。
  • length length: 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个 length 参数，那么定义的是水平和垂直间距。 如果定义两个 length参数，那么第一个设置水平间距，而第二个设置垂直间距。
  • inherit:规定应该从父元素继承 border-spacing 属性的值。

table表格td设置宽度后文字太多导致自动换行：
1.设置表格table的样式为：style=”table-layout:fixed;”
2.然后设置td的样式为：style=”word-wrap:break-word;”

5、合并单元格

有两个能应用在任何单元格中的重要的属性（<td>或<th>）：colspan 和 rowspan 。他们接受任何大于等于2的正整数。如果一个 td 元素的 colspan 值为2（<td colspan="2">），它将仍然是单独的单元格，但它
会在一行中水平的占据两个单元格的空间。rowspan也一样，但它作用于垂直方向。

6、使语义元素表现地像一个表格

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> /

注意这里没有的值，这是因为语义的关系，和的表现实际上是相同的，所以没必要多增加这样一个值。

display: inline-table
表格是自适应宽度的。它就像 inline-block 元素一样。顾名思义，这个值使得它们成为一个 inline-block 元素而不会产生换行。

7、colgroup与col

colgroup、col 标签用来定义表格列的分组。
通过使用 <colgroup>标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。
col标签为表格中一个或多个列定义属性值。
colgroup标签用于对表格中的列进行组合，以便对其进行格式化。

8、“隐含”元素和未关闭的标签

  • <col>标签是属于那种无内容的不需要闭合的标签，类似<br>/<br />；
  • <td>元素在这些情况中是无需闭合的：“如果元素后面没有更多的<td>或<th>元素或者在它父元素中没有更多的内容，闭合标签是可以省略的。”；
  • 缺少的</tr>标签的原理也是相同的：“如果元素后面没有紧跟着一个元素或者如果它父元素组(,
    或者 )没有更多的内容，结束标签是可以省略的。”；

9、高亮鼠标所在的行/列/单元格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
td:hover { 
  background: yellow;
}
tr:hover {
  background: yellow;
}
鼠标移动动一个单元格的时候他所在的列与行全部选中
var allCells = $("td, th");
allCells.on("mouseover", function() {
    var el = $(this),
        pos = el.index();
    el.parent().find("th, td").addClass("hover");
    allCells.filter(":nth-child(" + (pos+1) + ")").addClass("hover");
  })
  .on("mouseout", function() {
    allCells.removeClass("hover");
  });
 表格自身设置圆角时需要设置border-collapse: separate;
分享到