HTML5 Table 可变宽度

HTML5表格是一种常用的网页元素，用于展示和组织数据。其中一个常见的需求是让表格的宽度可以根据屏幕大小或内容长度进行自适应调整。在本文中，我们将探讨如何使用HTML5和CSS来创建具有可变宽度的表格，并提供一些代码示例。

使用HTML5创建表格

首先，让我们创建一个基本的HTML5表格结构。以下是一个简单的示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

上面的代码创建了一个包含表头和数据行的基本表格。现在，我们将使用CSS来使表格具有可变宽度。

使用CSS设置表格宽度

要使表格具有可变宽度，我们可以使用CSS的width属性。我们可以将表格的宽度设置为百分比值，以使其根据父容器的宽度进行自适应调整。以下是示例代码：

<style>
table {
  width: 100%;
}

td, th {
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

上面的CSS代码将表格的宽度设置为100%。这意味着表格将填满其父容器的宽度。此外，我们还设置了表格单元格的内边距和对齐方式，并为表头添加了背景颜色。

调整列宽

有时候，我们还可能需要手动调整特定列的宽度。在HTML5中，我们可以使用<colgroup>和<col>元素来定义表格的列。以下是一个示例代码：

<style>
table {
  width: 100%;
}

td, th {
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.col1 {
  width: 40%;
}

.col2 {
  width: 30%;
}

.col3 {
  width: 30%;
}
</style>

<table>
  <colgroup>
    <col class="col1">
    <col class="col2">
    <col class="col3">
  </colgroup>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

在上面的示例中，我们使用<colgroup>和<col>元素为每一列指定了一个样式类。在CSS中，我们可以使用这些样式类来设置特定列的宽度。

在这个例子中，我们将第一列的宽度设置为40%，第二列和第三列的宽度都设置为30%。这样，我们就可以手动调整表格的列宽了。

结论

通过使用HTML5和CSS，我们可以轻松地创建具有可变宽度的表格。通过设置表格的宽度为百分比值，我们可以使其根据父容器的宽度进行自适应调整。此外，我们还可以使用<colgroup>和<col>元素来手动