今天我们接着分享表格样式的内容。默认情况下,表格标题位置是在表格的上方,但是如果我们想要把表格标题放在表格下方呢?在css中,我们可以使用caption-side属性来定义表格标题的位置。语法:
caption-side:属性值;
caption-side属性取值 | |
属性值 | 说明 |
top | 默认值,标题在顶部 |
bottom | 标题在底部 |
表格标题 table,td { border:1px solid black;} caption { caption-side:bottom;}
表格标题
单元格
单元格
单元格
单元格
这个大家了解一下就好了,因为我们中国人制作表格,基本标题都会在上方使用,在下面的很少见。本章总结:边框合并border-collapse:语法:
border-collapse:属性值;
它是表格独有的属性,其他元素没有这个属性。属性取值有,separate,边框分开不合并,collapse,边框合并,相邻共用。边框边距border-spacing:语法:
border-spacing:像素值;
该属性指定单元格边界之间的距离。指定一个像素值时,作用于横向和纵向上的间距;指定两个像素值时,第一个作用于横向间距,第二个作用于纵向间距。标题位置caption-side:语法:
caption-side:属性值;
属性取值,top,上方bottom,下方表格在网页设计中,使用的还是比较多的,大家如果需要掌握表格的应用,就需要多加练习,下面给一段示例代码,写一个我们经常见到的场景。
表格示例 table,th,td { border:1px solid black; } th { height:30px;} td { height:24px;} table { border-collapse:collapse; text-align:center; width:60%; margin: 0 auto; } caption { caption-side:top; font-size:20px; margin-bottom:20px; font-family: "黑体","宋体"; font-weight:bold; } thead { background-color:#666666; font-size:18px; font-family: "楷体","宋体"; } tbody { background-color:#dddddd; font-size:15px; font-family:"Arial","新宋体"; } tfoot { background-color:yellow; font-size:18px; }
卖场货品统计表
序号
品名
数量
单价(元)
金额(元)
1
牛奶
20箱
30.00
600.00
2
苹果
70斤
10.00
700.00
3
青岛啤酒
100桶
5.00
500.00
合计金额
1800.00