HTML <th> colspan 属性

在 HTML 表格中，<th> 元素用于定义表格的表头单元格。colspan 属性用于指定一个表头单元格横跨的列数。

语法

<th colspan="number">

colspan 属性的值为一个整数，表示表头单元格横跨的列数。

用途

colspan 属性常用于合并表头单元格，使表格更具可读性和美观性。通过设置colspan属性，可以将多个列合并为一个大的表头单元格，提高表格的可视化效果。

示例

假设我们有一个简单的表格，包含两行两列的表头：

// www.javascriptcn.com code example
<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

如果我们想要将“姓名”和“年龄”合并为一个表头单元格，可以使用colspan属性：

// www.javascriptcn.com code example
<table border="1">
  <tr>
    <th colspan="2">个人信息</th>
  </tr>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

在上面的示例中，colspan="2"表示“个人信息”这个表头单元格横跨了两列。

注意事项

• colspan 属性的值必须是一个正整数，否则会被忽略。
• 合并表头单元格时，需要保证合并后的单元格不会与其他单元格冲突，否则会导致表格结构混乱。

通过合理使用colspan属性，我们可以更好地控制表格的布局和展示效果，提升用户体验和页面设计的质量。