HTML代碼教程
【HTML教程】HTML的tbody標簽|html入門知識
時間: 2025-03-26 22:38:46 瀏覽次數:10
常用的html標簽匯總、以及操作過程中的一些bug問題解決方法,以下龍騰飛網絡科技-小吳在建站實操中筆記記錄,一路走來,一步步學習、總結、整理的一些資料,不用死記硬背,保存使用非常方便,實操過程中遇到了就查詢搜索一下,實踐出真章,做多了自然就熟悉了: 【定義和用法】 tbody標簽

常用的html標簽匯總、以及操作過程中的一些bug問題解決方法,以下龍騰飛網絡科技-小吳在建站實操中筆記記錄,一路走來,一步步學習、總結、整理的一些資料,不用死記硬背,保存使用非常方便,實操過程中遇到了就查詢搜索一下,實踐出真章,做多了自然就熟悉了:


【定義和用法】

tbody標簽用于對 HTML 表格中的正文內容進行分組。

tbody元素與 thead和 tfoot元素結合使用,以指定表格的每個部分(正文、頁眉、頁腳)。

瀏覽器可以使用這些元素,使得在滾動表格正文時,頁眉和頁腳可以獨立顯示。此外,當打印跨多個頁面的大型表格時,這些元素可以使得表格的頁眉和頁腳在每頁的頂部和底部打印出來。

注意:tbody元素內部必須有一個或多個 tr標簽。

tbody標記必須在以下上下文中使用:作為 table元素的子元素,在任何 caption、colgroup和 thead元素之后。

提示:默認情況下,thead、tbody和 tfoot元素不會影響表格的布局。但是,您可以使用 CSS 來設置這些元素的樣式(請參閱下面的例子)!


【實例】

例子 1

包含 thead、tbody和 tfoot元素的 HTML 表格:

<table>
  <thead>
    <tr>
      <th>月份</th>
      <th>儲蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>¥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>¥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>¥7900</td>
    </tr>
  </tfoot></table>

例子 2

使用 CSS 設置 thead、tbody和 tfoot的樣式:

<html><head><style>thead {color: green;}tbody {color: blue;}tfoot {color: red;}table, th, td {
  border: 1px solid black;}</style></head><body><table>
  <thead>
    <tr>
      <th>月份</th>
      <th>儲蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>¥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>¥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>¥7900</td>
    </tr>
  </tfoot></table>

例子 3

如何對齊 tbody中的內容(使用 CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>月份</th>
      <th>儲蓄</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>一月</td>
      <td>¥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>¥4500</td>
    </tr>
  </tbody></table>

例子 4

如何垂直對齊 tbody中的內容(使用 CSS):

<table style="width:50%;">
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>一月</td>
      <td>¥3400</td>
    </tr>
    <tr style="height:100px">
      <td>二月</td>
      <td>¥4500</td>
    </tr>
  </tbody></table>

【默認的 CSS 設置】

大多數瀏覽器將使用以下默認值顯示 tbody元素:

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;}


友情鏈接: 知識付費 | EDU指南導航 | 貴州網站建設公司 |
Copyright?2011 Guangzhou Longtengfei Network Technology Co., Ltd. 廣州龍騰飛網絡科技有限公司 粵ICP備18029205號 XML地圖 | 系統開發專題地圖
主站蜘蛛池模板: 日本人与物videos另类| 91高清免费国产自产| 波多野结衣在线观看3人| 国产精品亚洲专区无码唯爱网| 久久国产精品一国产精品金尊| 精品一区二区三区无卡乱码| 国产精品免费视频网站| tube8中国69videos| 手机在线观看av片| 久久精品人妻一区二区三区| 窝窝女人体国产午夜视频| 国产亚洲午夜高清国产拍精品| 一级一级女人真片| 性欧美18~19sex高清播放| 亚洲制服丝袜精品久久| 老师你好电影高清完整版在线观看| 国内精品伊人久久久久AV一坑| 久久婷婷丁香五月综合五| 欧美天天综合色影久久精品| 嘟嘟嘟www免费高清在线中文| 777久久精品一区二区三区无码| 无码人妻少妇久久中文字幕| 亚洲av产在线精品亚洲第一站 | 乱人伦中文字幕电影| 网曝门精品国产事件在线观看| 国产精品自产拍在线观看| 久久久久久久综合综合狠狠| 欧美特黄三级电影aaa免费| 四虎最新紧急更新地址| 18禁无遮挡羞羞污污污污免费| 成人黄页网站免费观看大全| 亚洲乱亚洲乱少妇无码| 毛片免费视频观看| 四虎影视在线永久免费看黄| 香港三级理论在线影院| 国内色综合精品视频在线| segui久久综合精品| 性猛交xxxxx按摩欧美| 中文字幕最新在线| 日本chinese人妖video| 亚洲国产欧美久久香综合|