今天我们接着分享表格样式的内容。
默认情况下，表格标题位置是在表格的上方，但是如果我们想要把表格标题放在表格下方呢？
在css中，我们可以使用caption-side属性来定义表格标题的位置。
语法：
caption-side:属性值；
| caption-side属性取值 | |
| 属性值 | 说明 |
| top | 默认值，标题在顶部 |
| bottom | 标题在底部 |
示例代码：
<html><head><title>表格标题</title><style type="text/css">table,td { border:1px solid black;}caption { caption-side:bottom;}</style></head><body><table><caption>表格标题</caption><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr></table></body></html>
这个大家了解一下就好了，因为我们中国人制作表格，基本标题都会在上方使用，在下面的很少见。
本章总结：
边框合并border-collapse：
语法：
border-collapse：属性值；
它是表格独有的属性，其他元素没有这个属性。
属性取值有，
separate，边框分开不合并，
collapse，边框合并，相邻共用。
边框边距border-spacing:
语法：
border-spacing:像素值；
该属性指定单元格边界之间的距离。指定一个像素值时，作用于横向和纵向上的间距；指定两个像素值时，第一个作用于横向间距，第二个作用于纵向间距。
标题位置caption-side：
语法：
caption-side：属性值；
属性取值，
top，上方
bottom，下方
表格在网页设计中，使用的还是比较多的，大家如果需要掌握表格的应用，就需要多加练习，下面给一段示例代码，写一个我们经常见到的场景。
<html><head><title>表格示例</title><style type="text/css">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;}</style></head><body><table><caption>卖场货品统计表</caption><thead><tr><th>序号</th><th>品名</th><th>数量</th><th>单价（元）</th><th>金额(元)</th></tr></head><tbody><tr><td>1</td><td>牛奶</td><td>20箱</td><td>30.00</td><td>600.00</td></tr><tr><td>2</td><td>苹果</td><td>70斤</td><td>10.00</td><td>700.00</td></tr><tr><td>3</td><td>青岛啤酒</td><td>100桶</td><td>5.00</td><td>500.00</td></tr></tbody><tfoot><tr><td colspan="4">合计金额</td><td>1800.00</td></tr></tfoot><table></body></html>
之前给大家分享时，这些代码都是我手动敲上去的，也希望大家多加练习，也是手动敲上去，但是随着属性学习多了后，手动容易出错，难以调试，在这里建议大家去下载一些可以IDE工具，比如webstrom，phpstorm等等，有了工具的帮助后，学习代码会轻松些。
2729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
