# 表格与框架元素
## 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-容器中行与列之间的间距