HTML怎么让两个表格竖直

今天来教大家一个HTML小技巧,让你的网页更加美观大方！有时候我们会在网页中遇到需要将两个表格竖直排列的情况，那么如何实现这一效果呢？下面就来一步步为大家揭晓答案。

我们要创建两个基本的表格,第一个表格有两行两列，第二个表格有三行两列，以下是基本的HTML代码：

<table>
  <tr>
    <td>表格1-1</td>
    <td>表格1-2</td>
  </tr>
  <tr>
    <td>表格1-3</td>
    <td>表格1-4</td>
  </tr>
</table>
<table>
  <tr>
    <td>表格2-1</td>
    <td>表格2-2</td>
  </tr>
  <tr>
    <td>表格2-3</td>
    <td>表格2-4</td>
  </tr>
  <tr>
    <td>表格2-5</td>
    <td>表格2-6</td>
  </tr>
</table>

我们要让这两个表格竖直排列,这里有一个非常简单的方法，就是利用CSS样式，我们需要给这两个表格分别加上一个class，如下：

<table class="table1">
  <!-- 表格1的内容 -->
</table>
<table class="table2">
  <!-- 表格2的内容 -->
</table>

我们在标签中添加以下CSS代码：

<style>
  .table1, .table2 {
    margin-bottom: 20px; /* 设置表格之间的间距 */
  }
</style>

通过上面的代码,我们已经为两个表格设置了间距，但这样还不足以让它们竖直排列，为了让它们竖直，我们需要在CSS中添加以下代码：

<style>
  .table1, .table2 {
    margin-bottom: 20px; 
    vertical-align: top; /* 设置表格垂直对齐 */
  }
</style>

两个表格就已经竖直排列了！为了让效果更加完美，我们还可以对表格进行一些美化。

HTML怎么让两个表格竖直

<style>
  table {
    width: 50%; /* 设置表格宽度 */
    border-collapse: collapse; /* 边框合并 */
  }
  td {
    border: 1px solid #ddd; /* 设置边框 */
    padding: 8px; /* 设置内边距 */
    text-align: center; /* 文字居中 */
  }
</style>

这样,我们就得到了一个美观大方的竖直排列表格，以下是完整的HTML代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .table1, .table2 {
      margin-bottom: 20px; 
      vertical-align: top;
    }
    table {
      width: 50%;
      border-collapse: collapse;
    }
    td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
<table class="table1">
  <!-- 表格1的内容 -->
</table>
<table class="table2">
  <!-- 表格2的内容 -->
</table>
</body>
</html>

通过以上步骤,相信大家已经学会了如何让两个表格在HTML中竖直排列，赶紧动手试试吧，让你的网页更加美观！

HTML怎么让两个表格竖直