表格标题位置-CSS⼊门基础（020）今天我们接着分享表格样式的内容。
默认情况下，表格标题位置是在表格的上⽅，但是如果我们想要把表格标题放在表格下⽅呢？
在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;
css表格样式
}
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。