HTML 表格行之间的行 - HTML

在 HTML 表格中，通常我们可以给行设置不同的样式，以使其更醒目。但有时候，我们可能需要在行与行之间增加一些特殊的行，以突出它们之间的关系，这就是 HTML 表格行之间的行。

如何在 HTML 表格中添加行之间的行？

在 HTML 表格中，我们可以使用 border-spacing 属性来指定行之间的间距。同时，我们也可以设置一个背景颜色来强调它们之间的关系。

以下是代码片段，演示如何在 HTML 表格中添加行之间的行：

<table style="border-spacing: 0px 10px;">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr style="background-color: #eee;">
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr style="background-color: #eee;">
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

如上代码片段中，我们首先使用 border-spacing 属性指定 row 和 column 之间的间距，这里设置 row 之间的间距为 10px。然后，我们给偶数行添加了一个背景颜色，以使它们更加醒目。

建议

在 HTML 表格中，使用单独的 <tbody> 元素来组织行，它可以让你更好地控制行之间的关系，并更好地组织你的表格。在这种情况下，你只需在 CSS 样式表中设置 border-spacing 属性即可。

<table>
  <tbody style="border-spacing: 0px 10px;">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

这样，你就可以更轻松地对表格的布局进行更改。