HTML table跨行跨列一行占多列一列占多行用法

阿里云服务器

HTML 中的表格元素 <table> 可以实现跨行跨列的效果,使得一行可以占据多列,一列也可以占据多行。下面是使用 <td> 元素的 rowspan 和 colspan 属性实现这种效果的方法。

跨行跨列一行占多列

要在 HTML 表格中实现一行跨越多列的效果,需要使用 <td> 元素的 colspan 属性。colspan 属性的值表示该单元格跨越的列数。<tr>

<td>第二列</td>

<td>第三列</td>

<td>第四列</td>

<td>第五列</td>

</tr>

</table>

css在上面的代码中,第一行的单元格跨越了三列,因此该行只有两个单元格,而第二行有五个单元格。


### 跨行跨列一列占多行


要在 HTML 表格中实现一列跨越多行的效果,需要使用 `<td>` 元素的 `rowspan` 属性。`rowspan` 属性的值表示该单元格跨越的行数。<tr>

    <td>第二列</td>

  </tr>

</table>


在上面的代码中,第一行的单元格跨越了两行,因此第一列只有两个单元格,而第二行只有一个单元格。