本系列可作為前端學習系列的筆記，代碼的運行環境是在HBuilder中，小編會將代碼復制下來，大家復制下來就可以練習了，方便大家學習。
系列文章目錄?
HTML-1.1 文本字體樣式-字體設置、分割線、段落標簽、段內回車以及特殊符號
HTML-2.1 文本字體樣式之加粗、斜體、回車、下劃線、上標標簽、下標標簽以及字號變小和變大
HTML-2.2 列表--無序列表、有序列表、定義列表
HTML-2.3 超鏈接-外部鏈接，內部鏈接，書簽鏈接
HTML-2.4 滾動字幕marquee
HTML-3.1?表格table
?HTML-3.2 表格的跨行跨列（課表制作實例）
?HTML中應用CSS樣式的三種常見方法??
HTML-3.3 表格布局（學校官網簡易布局實例）
HTML-3.4 表單form
HTML-實戰之 百度百科（影視劇介紹）?
目錄
系列文章目錄?
前言
一、HTML 中的 thead、tbody 和 tfoot 元素詳解
1.? thead- 表格頭部
2.? tbody- 表格主體
3.? tfoot- 表格頁腳
4.組合使用示例
5.注意事項
(1)視覺順序 vs DOM 順序
(2)樣式應用
二、代碼示例-簡易的學校官網
總結
前言
小編作為新晉碼農一枚，會定期整理一些寫的比較好的代碼，作為自己的學習筆記，會試著做一下批注和補充，如轉載或者參考他人文獻會標明出處，非商用，如有侵權會刪改！歡迎大家斧正和討論！
一、HTML 中的 thead、tbody 和 tfoot 元素詳解
在 HTML 表格中，<thead>、<tbody>?和?<tfoot>?是用于組織表格內容的語義化元素，它們有助于提高表格的可訪問性和結構清晰度。
1.?<thead>?- 表格頭部
<thead>?元素定義表格的頭部區域，通常包含列標題。
特點：
- 必須包含一個或多個?
<tr>（表格行）元素 - 通常第一行包含?
<th>（表頭單元格）元素 - 一個表格只能有一個?
<thead>
示例：
<table><thead><tr><th>姓名</th><th>年齡</th><th>職業</th></tr></thead><tbody><!-- 表格內容 --></tbody>
</table>2.?<tbody>?- 表格主體
<tbody>?元素定義表格的主體內容，包含表格的主要數據。
特點：
- 包含表格的實際數據行
- 可以包含一個或多個?
<tr>?元素 - 一個表格可以有多個?
<tbody>（用于邏輯分組） - 如果省略，瀏覽器會自動創建一個隱式的?
<tbody>
示例：
<table><thead><!-- 表頭 --></thead><tbody><tr><td>張三</td><td>28</td><td>工程師</td></tr><tr><td>李四</td><td>32</td><td>設計師</td></tr></tbody>
</table>
3.?<tfoot>?- 表格頁腳
<tfoot>?元素定義表格的頁腳區域，通常包含匯總行或注釋。
特點：
- 可以出現在?
<thead>?之前（視覺上會顯示在底部） - 包含匯總行或注釋信息
- 一個表格只能有一個?
<tfoot>
示例：
<table><thead><!-- 表頭 --></thead><tbody><!-- 表格內容 --></tbody><tfoot><tr><td colspan="2">總計</td><td>100人</td></tr></tfoot>
</table>
4.組合使用示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>組合使用</title></head><body><table border="1"><thead><tr><th>月份</th><th>收入</th><th>支出</th></tr></thead><tbody><tr><td>一月</td><td>5000</td><td>3000</td></tr><tr><td>二月</td><td>5500</td><td>3200</td></tr></tbody><tfoot><tr><td>總計</td><td>10500</td><td>6200</td></tr></tfoot></table></body>
</html>
代碼運行：
5.注意事項
(1)視覺順序 vs DOM 順序
<tfoot>?可以在?<thead>?之前定義，但在頁面上仍會顯示在表格底部。
(2)樣式應用
可以為這些部分單獨應用 CSS 樣式，例如：
thead {background-color: #f2f2f2;font-weight: bold;
}
tfoot {background-color: #e6e6e6;
}這些元素雖然不是強制性的，但使用它們可以使表格結構更清晰，提高代碼可讀性和可維護性。
二、代碼示例-簡易的學校官網
總的代碼塊如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格布局(學校 網頁)</title><style type="text/css">body{background-color: aliceblue;background-image: url();background-size: 1000px auto;/* background-size:100% auto;background-size:contain;background-size:cover;*/}</style></head><body><!-- thead(表格頭部) tbody（表格主體） tfoot（設計表尾樣式） 收納tr --><table border="1px" align="center" width="1000px"><thead><tr><td><img src="../img/5.141.jpg" width="1000px" ></td></tr><tr align="center"><td><a href="https://www.ujn.edu.cn/"><img src="../img/5.142.jpg" width="1000px"></a></td></tr></thead><tbody><table border="1px" align="center" width="1000px"><tr><td colspan="2"><a href="https://www.ujn.edu.cn/"><img src="../img/dangdaihui.jpg" ></a></td><td>濟南大學召開本科教學工作審核推薦評估會</td><td>濟南大學召開研究生教學工作審核推薦評估會</td></tr><tr><td colspan="2"><a href="https://www.ujn.edu.cn/"><img src="../img/dangdaihui.jpg" ></a></td><td>濟南大學召開本科教學工作審核推薦評估會</td><td>濟南大學召開研究生教學工作審核推薦評估會</td></tr></table></tbody><tfoot><table border="1px" align="center" width="1000px"><tr align="center"><td colspan="10" align="center"><b align="center">濟南大學版權所有 ? 1995-2024 非經營性互聯網信息服務審批號：魯ICP備09051414號</b><br> </td></tr></table></tfoot></body></html>
代碼運行：
總結
以上就是今天要講的內容，本文簡單記錄了HTML-3.3 表格布局（學校官網簡易布局實例），僅作為一份簡單的筆記使用，大家根據注釋理解
![[服務器面板對比] 寶塔、aaPanel、Plesk、cPanel 哪家強？功能、性能與價格橫評 (2025)](http://pic.xiahunao.cn/[服務器面板對比] 寶塔、aaPanel、Plesk、cPanel 哪家強？功能、性能與價格橫評 (2025))
