表格样式的使用-CSS入门基础（019）

最新推荐文章于 2022-04-20 17:11:06 发布

虾米大王

最新推荐文章于 2022-04-20 17:11:06 发布

阅读量329

点赞数

分类专栏： CSS 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/modern358/article/details/111738817

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们分享关于表格样式的内容。

表格内框合并border-collapse：

在了解表格内框合并之前，我们先看一下，默认情况下表格的显示效果。

示例代码：

<html>  <head>    <title>表格表框默认</title>    <style type="text/css">      table,th,td { border: 1px solid black;}    </style>  </head>  <body>    <table>      <caption>表格标题</caption>      <thead>        <tr>          <th>表头1</th>          <th>表头2</th>        </tr>      </thead>      <tbody>        <tr>          <td>单元格1</td>          <td>单元格2</td>        </tr>      </tbody>      <tfoot>        <tr>          <td>汇总格1</td>          <td>汇总格2</td>        </tr>      </tfoot>    </table>  </body></html>

表格默认情况下，单元格与单元格之间有一定的空隙。这样的表格看起来不美观，在css中，我们可以使用border-collapse属性去除空隙的。

语法：

border-collapse:属性值；

此属性是表格独有的，其他元素没有这个属性。

border-collapse属性取值
属性值	说明
separate	边框分开，不合并，默认值
collapse	边框合并，相邻共用

示例代码：

<html>  <head>    <title>边框合并</title>    <style type="text/css">      table,th,td { border:1px solid black;}      table { border-collapse:collapse;}    </style>  </head>  <body>    <table>      <caption>表格标题</caption>      <thead>        <tr>          <th>表头1</th>          <th>表头2</th>        </tr>      </thead>      <tbody>        <tr>          <td>单元格1</td>          <td>单元格2</td>        </tr>      </tbody>      <tfoot>        <tr>          <td>汇总格1</td>          <td>汇总格2</td>        </tr>      </tfoot>    </table>  </body></html>

设定表格边框合并时，只需要针对table设定就可以了。

表格边框间距border-spacing:

在css中，我们可以使用它来定义表格边框间距。

语法：

border-spacing:像素值；

该属性指定单元格边界之间的距离。指定一个像素值时，作用于横向和纵向的间距；当指定两个值时，第一个作用于横向间距，第二个作用于纵向间距。

示例代码：

<html>  <head>    <title>表格间距</title>    <style type="text/css">      table,th,td { border:1px solid black;}      table { border-spacing:15px 20px;}    </style>  </head>  <body>    <table>      <tr>        <th>表头1</th>        <th>表头2</th>      </tr>      <tr>        <td>单元格1</td>        <td>单元格2</td>      </tr>      <tr>        <td>汇总格1</td>        <td>汇总格2</td>      </tr>    </table>  </body></html>