WEB前端开发学习----2.HTML表格table标签
[html]view plain copy
- css没用流行之前,网页都是用表格,也就是table标签制作的。虽然现在不用table做网页了,但是我们还是应该掌握这个标签。
[html]view plain copy
其中
为行标签,即表格的行。 为单元格数据标签。也就是说一个表格为3行3列,则有3个 标签,3个 标签。
[html]view plain copy这是个3行3列的表格
第1行第1列 第1行第2列 第1行第3列 第2行第1列 第2行第2列 第2行第3列 第3行第1列 第3行第2列 第3行第3列
caption属性为表格的标题。为了好看,我在这里border属性是给表格加上了边框。也可以不加,默认是没有的。
【WEB前端开发学习----2.HTML表格table标签】跨行列表格
rowspan 跨行属性 假如跨两行则为
colspan 跨列属性
文章图片
cellpadding 单元格的填充
cellspacing 单元格之间的空间
注意第三个表格,边框只有1px.
思路:将表格背景设为黑色,然后将单元格背景设为白色,单元格无边框,这样覆盖在表格上,且单元格之间距离为零,就可得到此效果。
代码如下:
[html]view plain copy-
这是正常成绩表 姓名 小明 小花 学科 语文 100 98 数学 96 97 外语 90 100 这是粗边框成绩表(1px框) 姓名 小明 小花 学科 语文 100 98 数学 96 97 外语 90 100 这是细边框成绩表(1px框) 姓名 小明 小花 学科 语文 100 98 数学 96 97 外语 90 100
推荐阅读
- 深入理解Go之generate
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 私有化轻量级持续集成部署方案--03-部署web服务(下)
- Jsr303做前端数据校验
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- 我的软件测试开发工程师书单
- spring|spring boot项目启动websocket
- echart|echart 双轴图开发
- NPDP拆书(三)(新产品开发战略(经营与创新战略))
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
-