[分享]css两个表格上下有间隔

在网页设计中，经常需要使用表格来展示数据或者内容。但是有时候我们会遇到两个表格需要在同一个页面上并列显示，但是却需要有一定的间隔。这时候就需要使用CSS来进行调整。下面是一个例子，展示了两个表格如何在...

在网页设计中，经常需要使用表格来展示数据或者内容。但是有时候我们会遇到两个表格需要在同一个页面上并列显示，但是却需要有一定的间隔。这时候就需要使用CSS来进行调整。

下面是一个例子，展示了两个表格如何在页面上有一定的间隔：

  <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>John</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Lisa</td>
        <td>30</td>
      </tr>
    </table>

    <table>
      <tr>
        <th>Country</th>
        <th>Population</th>
      </tr>
      <tr>
        <td>China</td>
        <td>1.4 billion</td>
      </tr>
      <tr>
        <td>India</td>
        <td>1.3 billion</td>
      </tr>
    </table>

    <strong>/* 添加间隔 */</strong>
    <style>
      table {
        margin-bottom: 50px;
      }
    </style> 

在这个例子中，我们首先展示了两个简单的表格，分别展示了人名和国家信息。使用CSS来添加样式，我们为所有的表格添加了一个下方 margin 值为 50px 的间隔。

这种方法可以确保两个表格之间有一定的距离，使内容更加清晰易读。值得注意的是，如果页面上有多个表格需要考虑间隔，可以给所有的表格添加同样的 margin-bottom 或者 padding-bottom 属性值