如何為HTML表格添加上下邊框？

一、使用CSS樣式添加表格邊框

為HTML表格添加上下邊框可以通過CSS樣式實現。我們可以通過設置表格的border屬性來定義表格的邊框。例如：

<table style="border:1px solid black;">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

在上面的代碼中，我們使用樣式屬性border定義了表格的邊框，其中「1px」表示邊框線的寬度，而「solid black」則表示邊框顏色和樣式。通過設置表格的border屬性，我們就可以為表格添加上下邊框。

二、使用表格標籤屬性添加表格邊框

除了使用CSS樣式，我們還可以通過HTML表格的標籤屬性來定義表格邊框。可以通過在表格標籤中添加border屬性來為表格添加邊框。例如：

<table border="1">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

在上面的代碼中，我們使用border屬性定義了表格的邊框。通過設置border屬性，我們就可以為表格添加上下邊框。

三、使用偽類選擇器添加表格邊框

使用CSS偽類選擇器可以為HTML表格添加漂亮的邊框樣式。我們可以使用:before和:after偽類選擇器來為表格添加上下邊框。例如：

<style>
  table {
    position: relative;
    border-collapse: collapse;
    width: 100%;
  }
  table:before,
  table:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    background-color: black;
  }
  table:after {
    bottom: 0;
    top: auto;
  }
</style>
<table>
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

在上面的代碼中，我們使用:before和:after偽類選擇器來為表格添加上下邊框。我們首先設置表格為相對定位，然後使用:before和:after偽類選擇器來為表格添加上下邊框。在偽類選擇器中設置content屬性，將其設為空串，然後定義position為絕對定位，top為0，width為100%，height為1px，background-color為黑色，就可以為表格添加上下邊框了。