HTML table表单colspan和rowspan跨行和跨列元素详解

HTML中的table表单元素colspan和rowspan表示表格跨行或者跨列,colspan和rowspan用于将行或者列合并,码笔记分享 table表单colspan和rowspan详细用法:

table表单colspan和rowspan

colspan是跨列(合并列),rowspan是跨行(合并行),用于td和th标签中。

colspan

colspan是指跨列,colspan用来合并列,colspan=2的话就是合并两列。colspan用来指定table中单元格横向跨越的列数。

col:英文解释为“列”,span是跨度、范围的意思。

rowspan

rowspan是指跨行,rowspan用来合并行,rowspan=2的话就是合并两行。rowspan用来指定table中单元格纵向跨越的行数。
row:英文解释为“行”,span是跨度、范围的意思。

colspan和rowspan使用方法示例

table代码一行跨2列,右侧跨2行

<table border="1">
  <tr>
    <td colspan="2">aaa</td>
  </tr>
  <tr>
    <td>bbb</td>
    <td>ccc</td>
  </tr>
</table>
// table一行跨2列

效果如下:

aaa
bbb ccc

代码说明原理:HTML代码首先是一行一行的读,先读第1行,碰到了colspan="2"后,就会预先占2列的位置。然后读第2行,先读第1列,再读第2列。

table代码一列跨2行

<table border="1">
  <tr>
    <td>aaa</td>
    <td rowspan="2">bbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>
// table一列跨2行代码

效果如下:

aaa bbb
ccc

代码说明原理:HTML代码一行一行到读,先读第1行第1列,读到第2列后,碰到rowspan="2",预留2行的位置,然后再读第2行第1列。

table代码一行跨2列,左侧跨2行

<table>
  <tr>
    <td rowspan="2">aaa</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>
// table一列跨2行

效果如下:

aaa bbb
ccc

跨行跨列复杂组合

<table border="1">
  <tr>
    <td rowspan="2">aaa</td>
    <td>bbb</td>
    <td>ccc</td>
  </tr>
  <tr>
    <td>ddd</td>
    <td>eee</td>
  </tr>
  <tr>
    <td>fff</td>
    <td colspan="2">ggg</td>
  </tr>
</table>
// table跨多行多列复杂组合

效果如下:

aaa bbb ccc
ddd eee
fff ggg

2024年云服务器租用优惠价格,11月最新: