5️⃣ HTML5 新属性

⚠️ 大多数浏览器不支持

<table>

• 定义 HTML 表格

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

<caption>

• 定义表格的标题。
• 必须直接放置到 <table> 标签之后。
• 每个表格定义一个标题。

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

<th>

• 定义 HTML 表格中的表头单元格

属性名	值	说明
colspan	number	规定表头单元格可横跨的列数。
headers	header_id	规定与表头单元格相关联的一个或多个表头单元格。
rowspan	number	规定表头单元格可纵跨的行数。
scope	col 规定单元格是列的表头。 colgroup 规定单元格是列组的表头。 row 规定单元格是行的表头。 rowgroup 规定单元格是行组的表头。	规定表头单元格是否是行、列、行组或列组的头部。 scope 属性在普通的 Web 浏览器中没有视觉效果，但可以通过屏幕阅读器使用。

<table border="1">
  <caption>Monthly savings</caption>
    <tr>
    <th id="name" colspan="2">Name</th>
  </tr>
  <tr>
    <th headers="name">Month</th>
    <th headers="name" colspan="2">Savings</th>
    <th rowspan="3">Average</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td>$150</td>
  </tr>
    <tr>
    <td>February</td>
    <td>$100</td>
    <td>$150</td>
  </tr>
</table>

<tr>

• 定义 HTML 表格中的行。

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

<td>

• 定义 HTML 表格中的标准单元格

属性名	值	说明
colspan	number	规定单元格可横跨的列数。 colspan="0" 告知浏览器使单元格横跨到列组 (colgroup) 的最后一列。
rowspan	number	设置单元格可纵跨的行数。
headers	header_id	规定与单元格相关联的一个或多个表头单元格。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
     <td rowspan="2">$300</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

<thead>

• 用于组合 HTML 表格的表头内容。
• 与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

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

<tbody>

• 用于组合 HTML 表格的主体内容。
• 与 <thead> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

<tfoot>

• 用于组合 HTML 表格的页脚内容。
• • 与 <thead> 和 <tbody> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

<col>

• 规定了 <colgroup> 元素内部的每一列的列属性。

属性名	值	说明
span	number	规定列组应该横跨的列数。

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

<colgroup>

• 用于对表格中的列进行组合，以便对其进行格式化。

<table border="1">
  <colgroup>
    <col style="background-color:red">
    <col style="background-color:yellow">
    <col style="background-color:green">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

贡献者: yulc