HTML | colspan 属性

简介

colspan 是 HTML 表格中 <th> 和 <td> 标签的一个属性，用于控制一个单元格跨越多列。

例如，我们想让一个表格头单元格跨越两个列，可以使用 colspan="2"。

<table>
  <tr>
    <th colspan="2">表格头</th>
  </tr>
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
</table>

语法

colspan 的语法如下：

<th colspan="number">

其中 number 指定单元格要跨越的列数。

注意事项

• 如果一个单元格使用了 colspan 属性，那么该单元格所在行的其他单元格数必须和该单元格跨越的列数相加。
• 如果一个单元格同时使用了 colspan 和 rowspan 属性，则需要特别注意其他单元格的数量。

示例

以下是一个跨越多列的例子：

<table>
  <tr>
    <th colspan="2">学生信息</th>
  </tr>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>19</td>
  </tr>
</table>

渲染结果如下：

| 学生信息 | | | :------: | :-: | | 姓名 | 年龄 | | 张三 | 18 | | 李四 | 19 |

总结

colspan 属性可以让我们控制表格单元格的列数，从而让表格更加灵活和美观。在使用时，需要特别注意其他单元格的数量，避免出现布局错误。