5-表格元素 · 前端教學筆記[更新中...]

# 表格與框架元素 ## 1. 表格元素 - 表格是最重要的數據格式化展示重要工具, 使用頻率非常高 - 表格的數據,存儲在由行與列組成的一系列單元格 - 數據必須存儲在單元格元素中 - 與列表類似, 表格也是由一系列標簽來描述 ### 1.1 元素 | 序號| 標簽 | 描述 | 備注 | | :---:|------- | ----------------------------------- | -------- | | 1|`<table>` | 定義表格, | **必選** | | 2|`<tbody>` | 定義表格主體, 允許定義多次 | **必選** | | 3|`<tr>` | 定義表格中的行, | **必選** | | | 4|`<th>` | 定義表格頭部中的單元格,默認加粗居中 | **必選** | | 5|`<td>` | 定義 g 表格 e 主體與底部的的單元格 | **必選** | | 6|`<caption>` | 定義表格標題, | 可選 | | 7|`<thead>` | 定義表格頭格, 只需定義一次 | 可選 | | 8|`<tfoot>` | 定義表格底, 只需定義一次 | 可選 | | 9|`<col>` | 為一個/多個列設置屬性,僅限 | 可選 | | 10|`<colgroup>` | 將多個`<col>`元素分組管理 | 可選 | ### 1.2 屬性 | 序號|屬性 | 適用元素 | 描述 | | ---|---------- | --------- | ---------------------- | | 1|`border` | `<table>` | 添加表格框 | | 2|`cellpadding` | `<table>` | 設置單元格內邊距 | | 3|`cellspacing` | `<table>` | 設置單元格邊框間隙 | | 4|`align` | 不限 | 設置單元格內容水平居中 | | 5|`bgcolor` | 不限 | 設置背景色 | | 6|`width` | 不限 | 設置寬度 | | 7|`height` | 不限 | 設置高度 | > 表格屬性僅供參考,屬選學內容, 推薦使用 CSS 設置表格樣式 ### 1.3 示例 - 運行效果圖 ![](https://img.kancloud.cn/be/c6/bec687e3b9d0b3badc193f0c3eb96e6e_1166x786.jpg) - 示例代碼 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表格元素</title> </head> <body> <table border="1" cellpadding="5" cellspacing="0" width="500" height="300" align="center" >  <colgroup bgcolor="lightpink">  <col />  <col bgcolor="lightgreen" />  <col bgcolor="yellow" span="2" />  <col />  <col /> </colgroup>  <caption style="font-size: 1.5rem;margin-bottom: 10px;"> 員工信息表 </caption>  <thead bgcolor="lightblue"> <th>部門</th> <th>ID</th> <th>姓名</th> <th>職務</th> <th>手機</th> </thead>  <tbody> <tr> <td rowspan="3" align="center">開發部</td> <td>101</td> <td>小王</td> <td>主管</td> <td>188345****</td> </tr> <tr>  <td>102</td> <td>小張</td> <td>程序員</td> <td>158123****</td> </tr> <tr>  <td>103</td> <td>小李</td> <td>實習生</td> <td>13399*****</td> </tr> </tbody>  <tbody> <tr> <td rowspan="3" align="center">銷售部</td> <td>104</td> <td>小馬</td> <td>主管</td> <td>135345****</td> </tr> <tr>  <td>105</td> <td>小劉</td> <td>客服</td> <td>157123****</td> </tr> <tr>  <td>106</td> <td>小朱</td> <td>實習生</td> <td>138349*****</td> </tr> </tbody>  <tfoot> <tr bgcolor="wheat"> <td align="center">備注:</td> <td colspan="4">所有員工離職必須提交30天提交書面申請</td> </tr> </tfoot> </table> </body> </html> ```