-
打个分吧:

古老神奇的<table>

凭什么table能兼容IE6?

1分钟阅读
-
-

结构

<table>
  <caption>表格上方的居中标题</caption>
  <colgroup>
    <col span="2" style="">
    <col style="">
  </colgroup>
  <thead>
      <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
  </thead>
  <tody>
      <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
      </tr>
  </tbody>
  <tfoot>
      <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
      </tr>
  </tfoot>
</table>

标签

<caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody>

<caption>标题

对齐方式:

  • 用 CSS 属性 "text-align" 和 "caption-side"
  • caption-side 只有 top 和 bootom 两个,即位于表格上方或下方
  • 用 text-align 来控制左右位置

无其他属性(HTML4.01 的 align 属性被 HTML5 删除)

<colgroup><col> :对列进行组合

对列进行组合

span 属性:定义横跨的列数,无 span 属性默认为 1(类似于 td 的 colspan 属性)

无其他属性(表示样式的 HTML4.01 属性均被 HTML5 删除)

<thead> <tbody> <tfoot>

无属性(样式属性被 HTML5 删除)

默认不会影响表格的样式布局

优点:

  • 使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。
  • 当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
  • 可以方便的定义 三部分 的样式

<table>

属性:border=1 或"" 规定是否有边框

无其他属性(表示样式的 HTML4.01 属性均被 HTML5 删除)

表格行:<tr>

无属性(表示样式的 HTML4.01 属性均被 HTML5 删除)

单元格:<td><th>

差异

  • th:文本粗体,居中
  • td:文本普通,左对齐

属性

  • colspan:横跨的列数
  • rowspan:横跨的行数
  • headers:header_id 单元格关联的一个或多个表头单元格
  • 无其他属性(表示样式的 HTML4.01 属性均被 HTML5 删除)

自动居中

  • 如果给 td 定义了尺寸,且子元素的尺寸小于 td 尺寸,子元素会自动垂直居中
  • 居中后子元素与 td 的边距,不属于 td 的 padding 值,也不属于子元素的 margin 值
  • IE6 居中随便写,写不出来算我输

CSS 属性:border-collapse

默认情况:单元格之间有间隔隔开,border-collapse:separate

一般不需要隔开:

table {
  border-collapse: collapse;
}

"你大爷还是你大爷"
上次更新:

评论区