<tfoot> | HTML表格页脚标签的定义与用法

由 hcduguo

定义与用法

  • <tfoot>标签用于定义HTML表格页脚部分，<tfoot>标签必须包含一个或多个<tr>元素。
  • <tfoot>标签与<thead>和<tbody>标签一起作为<table>的子元素，其中<thead>定义表头，而<tbody>定义表体。

提示：<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

语法格式

  <tfoot>  

<tr>…</tr>  

<tr>…</tr>  

 </tfoot>  

示例代码

<table>  
    <tr>  
        <th>书名</th>  
        <th>数量</th>  
        <th>总价</th>  
    </tr>  
    <tr>  
        <td>HTML教程</td>    
        <td>5</td>  
        <td>250</td>  
    </tr>  
    <tr>  
       <td>JavaScript教程</td>   
       <td>5</td>  
       <td>350</td>  
    </tr>      
    <tr>  
      <td>Python教程</td>      
      <td>2</td>  
      <td>200</td>  
    </tr>
    <tfoot>  
        <tr>  
          <th>Total</th>  
          <th>12</th>  
          <th>800</th>  
        </tr>  
   </tfoot>  
  </table>

效果展示：

书名 数量 总价
HTML教程 5 250
JavaScript教程 5 350
Python教程 2 200
Total 12 800

HTML 4.01 与 HTML5差异

在 HTML 5 中，不再支持 HTML 4.01 中 <tfoot> 标签的任何属性。

浏览器支持

所有主流浏览器都支持 <tfoot> 标签。

标签属性

属性值描述
alignright
left
center
justify
char		HTML5 不支持。定义 <tfoot> 元素中内容的对齐方式。
charcharacterHTML5 不支持。规定 <tfoot> 元素中内容根据哪个字符来对进行文本对齐。
charoffnumberHTML5 不支持。规定 <tfoot> 元素中内容的第一个对齐字符的偏移量。
valigntop
middle
bottom
baseline		HTML5 不支持。规定 <tfoot> 元素中内容的垂直对齐方式。

全局属性

<tfoot> 标签支持 HTML 的全局属性。

事件属性

<tfoot> 标签支持 HTML 的事件属性。

相关