给表格宽度100%

在网页设计中，表格是一种常用的元素，可以用来显示数据、排版等。确定表格的宽度是一个需要注意的问题。在一些情况下，我们需要把表格的宽度设置为100%，以适应网页的宽度。

HTML实现

我们可以用HTML的<table>标签来创建一个表格。为了让表格宽度100%，可以在<table>标签中使用width属性，将它的值设为100%。示例代码如下：

<table width="100%">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>20</td>
    <td>女</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>男</td>
  </tr>
</table>

在代码中，我们定义了一个宽度为100%的表格，其中包含了一个表头和两行数据。实际效果如下：

CSS实现

我们也可以使用CSS来设置表格的宽度。具体做法是设置表格的样式，这里的样式指的是CSS样式表。为了让表格宽度100%，我们需要将其宽度设置为100%。示例代码如下：

<style>
table {
  width: 100%;
}
</style>
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>20</td>
    <td>女</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>男</td>
  </tr>
</table>

在代码中，我们使用了<style>标签来定义CSS样式表。样式表中的table选择器表示选择所有的表格元素，然后通过width属性将它的宽度设置为100%。设置完样式表之后，在HTML中，我们只需要写出表格的结构即可。

实际效果与前述HTML实现完全一致。

小结

以上就是如何给表格宽度100%的介绍，可以通过HTML属性或CSS样式表两种方式进行设置。在实际开发中，可以根据需要选择使用的方式。