HTML | 宽度属性

HTML中的<col>元素允许开发者定义表格列的默认属性，例如宽度、颜色和字体等，从而可以为整个表格列节省时间和代码。

<col>元素可以放置在<colgroup>元素中，在<table>元素中定义的所有列上应用共同的样式，从而提高了表格的可维护性。开发者可以使用width属性为表格列定义宽度。

语法

<col>元素的语法如下：

<col width="value">

其中，width属性为可选属性，用于定义表格列的宽度，value为用于定义表格列宽度的值，可以指定一个具体的像素值px、百分比%或相对宽度em，例如：

<col width="100px">
<col width="50%">
<col width="10em">

如果定义了多个<col>元素，则会依次应用宽度属性。如果表格中的某些列定义了宽度属性，而同时又在<colgroup>元素中定义了宽度属性，那么表格列的宽度将受到<col>元素和<colgroup>元素中定义的宽度属性的共同影响。

实例

以下示例演示如何使用<col>元素定义表格列的宽度属性：

<table>
  <col width="20%">
  <col width="30%">
  <col width="50%">
  <tr>
    <th>项目</th>
    <th>人员</th>
    <th>截止日期</th>
  </tr>
  <tr>
    <td>项目A</td>
    <td>张三</td>
    <td>2022-01-01</td>
  </tr>
  <tr>
    <td>项目B</td>
    <td>李四</td>
    <td>2022-02-01</td>
  </tr>
  <tr>
    <td>项目C</td>
    <td>王五</td>
    <td>2022-03-01</td>
  </tr>
</table>

效果如下：

在上例中，我们通过使用<col>元素定义表格列的宽度，成功为表格中的所有列定义了不同的宽度。