表格的结构
表格是由行和列组成,好比一个excel文件
表格标签
-
标签:表示一个表格
-
标签:表示表格中的一行 标签:表示表格中的列 标签:表示表格中的表头 示例代码:
姓名 年龄 张三 18 运行效果:
总结:
-
表格的主要目的是用来显示特殊数据的
-
一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成,没有列的标签
-
中只能嵌套 类的单元格 -
标签,他就像一个容器,可以容纳所有的元素
表格属性
示例代码:
姓名 性别 年龄 刘德华 男 55 郭富城 男 52 张学友 男 58 黎明 男 18 刘晓庆 女 63 运行效果:
表头单元格标签th
-
作用:
-
一般表头单元格位于表格的第一行或第一列,并且文本加粗居中
-
-
语法:
-
只需用表头标签
替代相应的单元格标签 即可。
-
示例代码:
姓名 性别 电话 小王 女 110 小明 男 120 运行效果:
表格标题caption
定义和用法
我是表格标题
注意:
-
caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上。
-
caption 标签必须紧随 table 标签之后。
-
这个标签只存在表格里面才有意义。你是风儿我是沙
示例代码:
个人信息统计表
姓名 性别 电话 小王 女 110 小明 男 120 运行效果:
合并单元格
合并单元格2种方式
-
跨行合并:rowspan="合并单元格的个数"
-
跨列合并:colspan="合并单元格的个数"
合并单元格顺序
合并的顺序我们按照 先上 后下 先左 后右 的顺序
合并单元格三步曲
-
先确定是跨行还是跨列合并
-
根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 :
-
删除多余的单元格 单元格
示例代码1:
个人简历
姓名:张三 性别:男 年龄:26 照片 身高:178 民族:汉 婚姻:未婚 照片 个人简介 个人简介 个人简介 个人简介 个人作品 个人作品 个人作品 个人作品 运行结果:
示例代码2:
个人简历
姓名:张三 性别:男 年龄:26 照片 身高:178 民族:汉 婚姻:未婚 个人简介 个人简介 个人作品 个人作品 运行结果:
总结表格
标签名 定义 说明 表格标签 就是一个四方的盒子 表格行标签 行标签要再table标签内部才有意义 单元格标签 单元格标签是个容器级元素,可以放任何东西 表头单元格标签 它还是一个单元格,但是里面的文字会居中且加粗 表格标题标签 表格的标题,跟着表格一起走,和表格居中对齐 clospan 和 rowspan 合并属性 用来合并单元格的 -
表格提供了HTML 中定义表格式数据的方法。
-
表格中由行中的单元格组成。
-
表格中没有列元素,列的个数取决于行的单元格个数。
-
表格不要纠结于外观,那是CSS 的作用。
-
表格的学习要求: 能手写表格结构,并且能简单合并单元格。
表格边线合并
border-collapse 设置表格的边线合并,如:border-collapse:collapse;
关注打赏立即登录/注册
微信扫码登录
-
