alert中添加表格_⼀篇⽂章带你了解HTML表格及其主要属性介
绍
⼀、定义⼀个HTML表格
使⽤标签定义HTML表格。
标签定义表中的每⼀⾏使⽤。使⽤标签定义表头。默认情况下,表标题是粗体和居中的。⼀个表的数据/单元使⽤ 标签定义。
Firstname Lastname Age Jill Smith 50 Eve Jackson 94
注意: 元素是表的数据容器。它们可以包含所有的HTML元素; ⽂本、图像、列表、其他表格等。
1. HTML表格 - 添加边框
如果不指定表的边框,则将不显⽰边框。
使⽤CSS设置表格的边框如下:
记住为表和表单元格定义边框。
2. HTML 表格 - 折叠边框
如果你想要的边框折叠成⼀个边框,添加CSS border-collaps边框属性:
3. HTML 表格 - 添加单元格填充(padding)
单元格填充(padding)指定单元格内容及其边框之间的空间。
如果不指定填充(padding),则将显⽰表单元格⽽不填充(padding)。
设置填充,使⽤css padding属性:
4. HTML表格 - 左对齐标题
默认情况下,表标题是粗体和居中的。
左对齐的表格标题,使⽤CSS text-align属性:css表格样式
th { text-align: left;}
5. HTML表格 - 添加边框间距
边框间距指定单元格之间的空间。
设置⼀个表空间的边界,使⽤CSS border-spacing属性:
table { border-spacing: 15px; /*添加边框间距*/}
注意:如果表已经是collapsed折叠边框,边框间距没有影响。
6. HTML表格单元格跨多列
使表格单元格跨越多个列,使⽤colspan属性:
姓名电话 Bill Gates 55577854 55577855
7. HTML表中 - 单元格跨多⾏
使表格单元格跨多个⾏,使⽤rowspan属性:
姓名: ⽐尔电话: 55577854 55577855
8. HTML表格 - 添加标题
若要向表添加标题,请使⽤`标签:
每⽉储蓄⽉储蓄 January $100 February $50
注意:` 标签必须⽴即插⼊在``标签之后。
⼆、项⽬
为表格指定⼀个特殊样式
为表格指定⼀个特殊样式, 添加⼀个 id 属性:
Firstname Lastname Age Eve Jackson 94
现在您可以为这个表定义⼀个特殊的样式:
table#t01 { width: 100%; background-color: #f1f1c1; border: 2px solid black; }
添加更多样式:
table#t01 tr:nth-child(even) { background-color: #eee;}table#t01 tr:nth-child(odd) { background-color: #fff;}table#t01 th { color: white; background-color: black
⼩总结
标签描述
定义⼀个表格标题
定义表中的单元格
属性描述border属性定义⼀个边框border-collapse定义折叠单元格边框的属性padding添加到单元格中的填充text-align对齐单元格⽂本
border-spacing设置单元格之间的间距colspan使单元格跨越多个列rowspan使单元格跨越多⾏id唯⼀表⽰⼀个表格
三、总结
本⽂主要介绍了HTML表格,对表格中主要的属性进⾏了详细的介绍。对遇到的问题进⾏详细的解答。⽅便⼤家表格的标签的了解。希望对
⼤家的学习有帮助。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论