表格与框架元素
1. 表格元素
- 表格是最重要的数据格式化展示重要工具, 使用频率非常高
- 表格的数据,存储在由行与列组成的一系列单元格
- 数据必须存储在单元格元素中
- 与列表类似, 表格也是由一系列标签来描述
1.1 元素
| 序号 | 标签 | 描述 | 备注 | |
|---|---|---|---|---|
| 1 | <table> |
定义表格, | 必选 | |
| 2 | <tbody> |
定义表格主体, 允许定义多次 | 必选 | |
| 3 | <tr> |
定义表格中的行, | 必选 | |
| 4 | <th> |
定义表格头部中的单元格,默认加粗居中 | 必选 | |
| 5 | <td> |
定义 g 表格 e 主体与底部的的单元格 | 必选 | |
| 6 | <caption> |
定义表格标题, | 可选 | |
| 7 | <thead> |
定义表格头格, 只需定义一次 | 可选 | |
| 8 | <tfooter> |
定义表格底, 只需定义一次 | 可选 | |
| 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 示例
- 运行效果图
- 示例代码
<!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><tableborder="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>
作业截图：
