如何在 HTML 5 中创建带有简单边框的表格答案

【问题标题】：How to create table with simple border in HTML 5如何在 HTML 5 中创建带有简单边框的表格
【发布时间】：2015-09-10 03:34:10
【问题描述】：

在HTML 5 中获得如下表的最简单方法是什么。我觉得我的解决方案（为每个td 设置样式）不是最好的方法。

<table style="border-collapse: collapse; border: 1px solid;">
  <tr>
    <td style="border: 1px solid;">1</td>
    <td style="border: 1px solid;">2</td>
  </tr>
  <tr>
    <td style="border: 1px solid;">3</td>
    <td style="border: 1px solid;">4</td>
  </tr>
</table>

【问题讨论】：

我希望在 html 4 中有类似边框属性的东西。但是我看到我需要使用 CSS。

标签： html css

【解决方案1】：

您尝试做的最好的方法是使用内部 CSS 样式表，而不是在表格元素上使用内联样式。以下是如何使用 CSS 样式表来设置表格样式的示例。

首先，给表格一个id，如下所示：

<table id="thetable" border="1">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

然后在桌子上使用CSS：

#thetable {
    border-collapse: collapse;
    border: 1px solid;
}

#thetable td {
    border: 1px solid;
}

整个 HTML 文档看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Table Page</title>
    <style>
    #thetable {
        border-collapse: collapse;
        border: 1px solid;
    }

    #thetable td {
        border: 1px solid;
    }
    </style>
  </head>
  <body>
    <table id="thetable" border="1">
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>
  </body>
</html>

Here is a tutorial 了解如何使用样式表将 CSS 放入 HTML。祝你好运！

【讨论】：

【解决方案2】：

使用 CSS 类。

table.MyClass {
    /* Whatever table styles here */
    border-collapse: collapse;
    border: 1px solid;
}
table.MyClass td {
    /* Whatever cell styles within the table here */
    border: 1px solid;
}

<table class="MyClass">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

【讨论】：

【解决方案3】：

将 CSS 外部化为单独的样式表。

table {
  border-collapse: collapse;
  border: 1px solid;
}
td {
  border: 1px solid red;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

【讨论】：