css 纵向合并_表格标题位置CSS入门基础（020）

客官°小女子只卖身不卖艺 2023-01-02 04:24 125阅读 0赞

--------------------

今天我们接着分享表格样式的内容。默认情况下，表格标题位置是在表格的上方，但是如果我们想要把表格标题放在表格下方呢？在css中，我们可以使用caption-side属性来定义表格标题的位置。语法：

caption-side:属性值；

<table> 
 <tbody> 
  <tr> 
   <td colspan="2" align="center">caption-side属性取值</td> 
  </tr> 
  <tr> 
   <td align="center">属性值</td> 
   <td align="center">说明</td> 
  </tr> 
  <tr> 
   <td align="center">top</td> 
   <td align="center">默认值，标题在顶部</td> 
  </tr> 
  <tr> 
   <td align="center">bottom</td> 
   <td align="center">标题在底部</td> 
  </tr> 
 </tbody> 
</table>

示例代码：

表格标题          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            ` `    `