跳到主要内容

html 表格标签

表格基础​

表格结构​

  • table: 表格标签;
  • tr: 换行标签;
  • th: 单元格标题标签;
  • td: 单元格标签;
<table>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

td 和 th element​

属性​
  • 通用属性;
    • headers: 表示与 th 的对应关系, 为 th 的 id 属性值, 空格分隔;
    • colspan: 表示单元格跨列数量;
    • rowspan: 表示单元格跨行数量;
  • th 特有属性;
    • scopes: 表示 th 与 td 的对印关系;
<table>
  <tr>
    <th scope="col">Player</th>
    <th scope="col" id="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row" id="row">Mia Oolong</th>
    <td colspan="1" rowspan="1" headers="row col">9</td>
    <td>6,219</td>
  </tr>
</table>
scopes 属性详解​
  • row: 表明与对应行所有单元格相关;
  • col: 表明与对应列所有单元格相关;
  • rowgroup: 表明与多列对应行所属所有单元格相关;
  • colgroup: 表明与多列对应列所属所有单元格相关;

可访问性​

  • 使用 th 标签 中的 scope attribute 和 id attribute;
  • 使用 td 标签 的 header attribute;

表格进阶​

可选标签​

  • caption: 表格标题;
  • colgroup: 表格列样式;
  • col: 嵌套于 colgroup 中, 定义具体列样式
    • span 属性对应 col 对应的列数量, 默认为 1;
<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td> </td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
</table>

表格结构​

  • thead 标签: 表示表头;
  • tbody 标签: 表示表格主体内容;
  • tfoot 标签: 表示表尾;
<table>
  <thead>
    <tr>
      <th>Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

嵌套表格​

  • 在 td 标签中嵌套一个表格;
<table id="table1">
  <tr>
    <th>title1</th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td id="nested">
      <table id="table2">
        <tr>
          <td>cell1</td>
          <td>cell2</td>
          <td>cell3</td>
        </tr>
      </table>
    </td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
</table>