HTML 使表格列的宽度相同

在 HTML 中，表格（table）是非常常见的元素，我们可以使用表格展示各种各样的数据。但是，当表格中有不同长度的列时，表格会显得非常难看。这时我们需要让每一列的宽度相同，以便表格更加美观和整洁。那么，在 HTML 中，如何使表格列的宽度相同呢？

一、使用 width 属性

我们可以使用 HTML 中的 width 属性来设置每一个单元格和头部单元格的宽度。可以设置具体的像素值，也可以使用百分比来设置宽度。下面是一个使用 width 属性的例子：

<table>
  <thead>
    <tr>
      <th width="33%">Name</th>
      <th width="33%">Age</th>
      <th width="33%">Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="33%">Tom</td>
      <td width="33%">18</td>
      <td width="33%">Male</td>
    </tr>
    <tr>
      <td width="33%">Jane</td>
      <td width="33%">20</td>
      <td width="33%">Female</td>
    </tr>
    <tr>
      <td width="33%">John</td>
      <td width="33%">22</td>
      <td width="33%">Male</td>
    </tr>
  </tbody>
</table>

上面的代码中，我们使用了 width 属性来设置每一个单元格和头部单元格的宽度为 33%。这样，每一列的宽度就会相同。

二、使用 CSS 样式

除了使用 width 属性，我们还可以使用 CSS 样式来设置表格的宽度。这样，我们可以将样式和 HTML 分离，提高代码的可重用性。下面是一个使用 CSS 样式的例子：

<style>
  table {
    width: 100%;
  }
  th, td {
    width: 33.33%;
  }
</style>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td>18</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>20</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>John</td>
      <td>22</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

上面的代码中，我们使用了 CSS 样式来设置表格的宽度和每一个单元格的宽度为 33.33%。这样，每一列的宽度就会相同。注意，我们在表格外使用了一个