# 表格與框架元素
## 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 示例
- 運行效果圖

- 示例代碼
```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中設置的屬性對所有列均有效 -->
<colgroup bgcolor="lightpink">
<!-- 如果不想自定義某一列屬性,只寫元素不寫屬性 -->
<col />
<!-- 第二列個性化定制: 背景為淺綠色 -->
<col bgcolor="lightgreen" />
<!-- 第三列背景為黃色,并跨越2列都有效 -->
<col bgcolor="yellow" span="2" />
<!-- 第四列,使用第3列的樣式 -->
<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>
<!-- 表格主體1 -->
<tbody>
<tr>
<td rowspan="3" align="center">開發部</td>
<td>101</td>
<td>小王</td>
<td>主管</td>
<td>188345****</td>
</tr>
<tr>
<!-- <td>開發部</td> -->
<td>102</td>
<td>小張</td>
<td>程序員</td>
<td>158123****</td>
</tr>
<tr>
<!-- <td>開發部</td> -->
<td>103</td>
<td>小李</td>
<td>實習生</td>
<td>13399*****</td>
</tr>
</tbody>
<!-- 表格主體2 -->
<tbody>
<tr>
<td rowspan="3" align="center">銷售部</td>
<td>104</td>
<td>小馬</td>
<td>主管</td>
<td>135345****</td>
</tr>
<tr>
<!-- <td>開發部</td> -->
<td>105</td>
<td>小劉</td>
<td>客服</td>
<td>157123****</td>
</tr>
<tr>
<!-- <td>開發部</td> -->
<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>
```
- 教學大綱
- HTML5基礎
- 1-html基礎知識
- 2-語義化結構元素
- 3-語義化文本元素
- 4-鏈接/列表/圖像元素
- 5-表格元素
- 6-表單與控件元素[重點]
- CSS3基礎
- 1-css與html文檔
- 2-css選擇器
- 3-細說盒模型
- Flex布局[精簡版]
- 1-Flex概論
- 2-Flex布局是什么
- 3-Flex基本概念
- 4-Flex容器屬性
- 5-Flex項目屬性
- Flex布局[細說版]
- 1-flex 布局概述
- 2-flex 容器與項目
- 3-flex 容器主軸方向
- 4-flex 容器主軸項目換行
- 5-flex 容器主軸與項目換行簡寫
- 6-flex 容器主軸項目對齊
- 7-flex 容器交叉軸項目對齊
- 8-flex 多行容器交叉軸項目對齊
- 9-flex 項目主軸排列順序
- 10-flex 項目交叉軸單獨對齊
- 11-flex 項目放大因子
- 12-flex 項目收縮因子
- 13-flex 項目計算尺寸
- 14-flex 項目縮放的簡寫
- Flex布局[案例版]
- 1-調整項目順序
- Grid布局[精簡版]
- 1. 常用術語
- 2. 容器屬性
- 3. 項目屬性
- 4. 布局實例
- 1. 經典三列布局
- 2. 媒體查詢
- Grid布局[細說版]
- 1-必知術語
- 2-容器創建與行列劃分
- 3-單元格常用單位
- 4-項目填充到單元格
- 5-項目填充到網格區域
- 6-對齊容器中的所有項目
- 7-對齊單元格中所有項目
- 8-對齊單元格中某個項目
- 9-容器中行與列之間的間距