表格的创建:之前表格是用来布局的,现在只用来展示数据
表格中的计算属性:像生活中的安检在每个单元格中进行检索内容,内容较多就会分配更多的空间给到当前单元格
一:表格创建的标签
1.table 表示表格
2.tr 表示表格中的行
3.td 表示表格中的列(单元格)
二:表格中的HTML属性
1.width/height/border
2.bordercolor/bgcolor
3.设置对齐方式
- 水平方向对齐 align:left、right、center
- table、tr、td都可以控制水平对齐方式
- 垂直方向对齐 valign:top、bottom、middle
- table设置没有效果、tr、td控制行和列的垂直方向
4.设置单元格的间距显示(父级)
- cellspacing 单元格与单元格之间的间距
- cellpadding 单元格与内容之间的间距
5.表格中的行列合并(重点、难点)
- 列合并 colspan
- 行合并 rowspan
- span属性:表示选择几个 属性值需要设置数字
Document
| 姓名 | 性别/年龄 | |
| 志强 | 不详 | 18 |
| 少杰 | 不详 | |
效果图：
举例：
Document
| 会员姓名 | 出生日期 | ||
| 身份证号 | |||
| 通信地址 | |||
| 联系电话 | |||
| 会员卡号 | |||
表格中的HTML标签
1.表格的标题 caption 要写在table的里面
2.表格的列标题 th(作用和td是一样的) 默认加粗和居中显示
3.表格的列分组:可以选择到几列分为一组进行设置宽度
- 第一种可以使用单标签
- 第二种可以使用双标签
- 注意:表格列分组的时候只能使用span和width属性
4.表格的行分组
- thead 表格的头部
- tbody 表格的主体
- tfoot 表格的底部
- tbody默认有一个,设置无数个,thead和tfoot只能有一个并且是成对出现
5.分割线 rules="groups/rows/cols/all/none"
- all 表示所有的线都有
- groups 表示根据行列分组
Document
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 志强 | 不详 | 18 |
| 少杰 | 不详 | 18 |
| 总计 | 分类 | 平均 |
表格中CSS的相关属性
1.单元格与单元格之间的间距(cellspacing)
- 属性:border-spacing
- 属性值:数值加单位(0可以不用设置单位)
2.合并相邻单元格的边框
- 属性:border-collapse(合并)
- 属性值:collapse(常用)/separate(分开)
3.单元格无内容时候显示方式
- 属性:empty-cells
- 属性值:show(显示)/hide(隐藏)
4.表格中的计算属性
- 属性:table-layout
- 属性值:auto(自动)/fixed(固定 没有计算属性)
Document
| 姓名 | 性别 | 年龄 |
| 志强你好帅 假的 | 不详 | 180 |
| 不详 | 18 |
案例-表格的制作：
Document
案例-坤坤的简历制作：
Document
| 姓名 | 坤坤 | 性别 | 男 | |
| 出生年月 | 1998年1月 | 名族 | 汉 | |
| 籍贯 | 学历 | 本 | ||
| 毕业院校 | 千锋教育 | 专业 | 唱跳rap | |
| 政治面貌 | 群众 | 家庭住址 | ||
| 健康状况 | 健康 | 联系电话 | ||
| 获得职业证书 | ||||
| 自我评价 | ||||
| 工作经历 | ||||
案例 表单的制作
Document
暑期编程PK赛 得CSDN机械键盘等精美礼品！
