前端基礎-HTML基礎（三）
- 2019 年 12 月 17 日
- 筆記
本文目錄
表格標籤
table標籤caption標籤th/tr/td標籤表格的刪除與合併表格行列的刪除表格行列的合併參考
表格標籤
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格標籤</title> </head> <body> <!-- 代表是一個表格 tr : table row 行 td : table data 數據格 th : table header 表頭 --> <!-- table的屬性 align : 對齊方式 border : 邊框的寬度 width : 表格的寬度 padding : 內邊距 cellpadding : 格子里的內容和格子的間距 cellspacing : 格子和格子之間的間距 frame : 外邊框的顯示 rules : 內邊框的顯示 --> <table rules="rows" frame="above" border="10px" align="center" width="90%" cellpadding="20px" cellspacing="0"> <!-- 指定標題 caption標籤必須寫在 table標籤之後 --> <caption>人員資訊表</caption> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> <tr> <td>001</td> <td>張三</td> <td>11</td> </tr> <tr> <td>002</td> <td>李四</td> <td>22</td> </tr> </table> <table border="1px" align="center" width="90%" > <!-- 指定標題 caption標籤必須寫在 table標籤之後 --> <caption>人員資訊表</caption> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> <tr> <td>001</td> <td>張三</td> <td>11</td> </tr> <tr> <td>002</td> <td>李四</td> <td>22</td> </tr> </table> </body> </html>
用於定一個表格，或用於頁面布局。
table標籤
- 代表標籤中的內容是表格。
- 屬性：
border：邊框寬度。
width：寬度。height：高度。
align：對齊方式。cellpadding：格子里的內容和格子的間距。
cellspacing：格子和格子之間的間距。frame：外邊框的顯示。
rules：內邊框的顯示。
caption標籤
- 指定表格的標題。
- html是從上到下、從左往右的載入的，caption必須寫在table標籤之後。
th/tr/td標籤
tr：table row 行。td：table data 數據格。th：table header 表頭。align屬性，用於定義對齊方式。
表格的刪除與合併
表格行列的刪除
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格標籤</title> </head> <body> <!-- 瀏覽器在解析表格的時候,會把table標籤作為一個整體進行解析 為了提高用戶的使用體驗,表格應該使用結構標籤 --> <table border="1px" align="center" width="90%"> <!-- 指定標題 caption標籤必須寫在 table標籤之後 --> <caption>人員資訊表</caption> <!-- 表頭 --> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <!-- 內容區 --> <tbody> <tr> <td>001</td> <td>張三</td> <td>11</td> </tr> <tr> <td>002</td> <td>李四</td> <td>22</td> </tr> <tr> <td>001</td> <td>張三</td> <td>11</td> </tr> </tbody> <!-- 頁腳 --> <tfoot> </tfoot> </table> </body> </html>
thead，tbody，tfoot，跟順序無關。- 行的刪除 : 刪除tr包括裡面的td。
- 列的刪除 : 要刪除所有行中對應的列,否則表格會發生錯位。
表格行列的合併
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行列的合併</title> </head> <!-- rowspan : 指定行的合併, 從上往下,找到第一個格子,設置rowspan屬性 屬性值 :指定總共合併了多少個格子 被合併的格子要刪除 colspan : 指定列的合併, 從左往右,找到第一個格子,設置colspan屬性 屬性值 :指定總共合併了多少個格子 被合併的格子要刪除 --> <body> <table border="1" cellspacing="0" width="90%"> <tr> <th rowspan="3">指標</th> <th colspan="2">招生數</th> <th colspan="2">在校生數</th> <th colspan="2">畢業生數</th> </tr> <tr> <td>萬人</td> <td>比上年增長(%)</td> <td>萬人</td> <td>比上年增長(%)</td> <td>萬人</td> <td>比上年增長(%)</td> </tr> <tr> <td>1.0</td> <td>3.5</td> <td>1.0</td> <td>3.5</td> <td>1.0</td> <td>3.5</td> </tr> <tr> <td>中等職業學校</td> <td>1.0</td> <td>3.5</td> <td>1.0</td> <td>3.5</td> <td>1.0</td> <td>3.5</td> </tr> </table> </body> </html>
rowspan：指定行的合併。- 從上往下，找到第一個格子，設置rowspan屬性。
- 屬性值：指定總共合併了多少個格子。
- 被合併的格子要刪除。
colspan: 指定列的合併。- 從左往右,找到第一個格子，設置colspan屬性。
- 屬性值 :指定總共合併了多少個格子。
- 被合併的格子要刪除。
參考
- 黑馬程式設計師 120天全棧區塊鏈開發 開源教程 https://github.com/itheima1/BlockChain
