Question

在HTML 5中获取此类表格的最简单方法是什么？我觉得我的解决方案（每个td的设置风格）不是最佳方式。

＆＃13;

<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>

＆＃13;

Answer 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中。祝你好运！

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: