table标签

css table表格

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

 

 上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框

 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

 

thead tfoot tbody

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

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

thead{
    color: green;
}
tbody{
    color: blue;
}
tfoot{
    color: red;
}

 

 

 

 

 

border-collapse 属性设置是否将表格边框折叠为单一边框：

border-collapse:collapse;（separate，默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。）

 

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

 

 

如果定义一个 length 参数，那么定义的是水平和垂直间距。

 

caption-side 属性设置表格标题的位置。

 

注释：如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side 属性。

 

 可以设置标题在上，还是在下

top	默认值。把表格标题定位在表格之上。
bottom	把表格标题定位在表格之下。

empty-cells
隐藏空单元格上的边框和背景

值	描述
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。

 

利用padding会增加div大小的特性，有时候可以不去特地设置td,th大小。只需要设置padding，table自然跟着增大

 

 

  设置了td,th  padding：10px后

 

 

 

 

display：table

目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？

1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大

2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示

3、非表格内容用table来装，不符合标签语义化要求，不利于SEO

4、table的嵌套性太多，用DIV代码会比较简洁

特点
table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性。说到table-cell的布局，不得不说一下“匿名表格元素创建规则”：

 

display:table布局可以实现一些其他布局比较难实现的场景，如下：

要实现这种多行文字居中显示在一个固定大小的容器里面，如果是其他的css布局实现，我们常用的做法还需要用到定位，还要用到transfrom才能完成；但是用display:table布局可以很简单的实现；

<div>
    <span>我是简单的两行文字</span>
</div>


div{
    display:table;
}
span{
    diaplay:table-cell;
    vertical-align: middle;//对其方式为middle
}

 

1、table布局除了上面3种常用的值还有以下的

2、table至少有一个display:table和display:table-cell这个其实是跟html的table一致的，那么使用了table布局之后就可以对应的使用一些table常用的css样式：如border-collapse，text-align 和 vertical-align，border-spacing，caption-side，empty-cells等等；详细的可以参考http://www.w3school.com.cn/css/css_table.asp；

3、table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。

4、设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

 

js获取表格元素tr、th、td相对于父节点的索引

rowIndex 

可以获取 tr 相对于根节点所有 tr 的索引，会计算之前所有的 tr。

ectionRowIndex 

可以获取 tr 相在当前 table 下的索引。
以下面的第二个 tr 为例，rowIndex 的值是 1，sectionRowIndex 的值是 0。

 

cellIndex 

可以获取 th、td 相对于父节点的索引。