HTML <th> width 属性

在 HTML 表格中，<th> 元素用于定义表格的表头单元格。<th> 元素与<td>元素的区别在于，<th> 元素通常用于表格的第一行或第一列，表示表格的标题或者重要的内容。在<th>元素中，可以使用width属性来定义单元格的宽度。

使用方法

width属性可以在<th>元素中直接设置，也可以通过 CSS 样式表进行设置。在 HTML 中，width属性的取值可以是一个具体的像素值，也可以是一个百分比值。

直接设置

// www.javascriptcn.com code example
<table>
  <tr>
    <th width="100">Name</th>
    <th width="200">Age</th>
    <th width="150">Gender</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>Male</td>
  </tr>
</table>

在上面的示例中，我们分别为三个表头单元格设置了具体的宽度值。

使用 CSS 样式表

// www.javascriptcn.com code example
<style>
  th {
    width: 100px;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>Male</td>
  </tr>
</table>

在上面的示例中，我们使用 CSS 样式表为所有的<th>元素统一设置了宽度值。

注意事项

• width属性设置的值可以是一个具体的像素值，也可以是一个百分比值。
• 如果表格的内容超出了单元格的宽度，浏览器会自动调整单元格的宽度以适应内容的显示。

总结

<th>元素的width属性可以帮助我们控制表格的布局，使表格更加美观和易于阅读。在实际开发中，根据具体情况选择合适的宽度值来设置<th>元素的宽度，可以提升用户体验和页面的整体美感。