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

HTML table代码常规的大家都会写，无非是th、tr、td的用法，新手站长网来说说table代码的升级版，table代码跨行跨列，一行对多列或者一列对多行的用法：

跨行跨列、一行占多列或者一列占多行主要使用的代码是colspan和rowspan，跨多列时使用colspan，跨多行时使用rowspan。例如一行跨2列，可以写colspan="2"，好了，新手站长网拿实例说话吧：文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

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

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

效果如下：文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

代码说明原理：HTML代码首先是一行一行的读，先读第1行，碰到了colspan＝"2"后，就会预先占2列的位置。然后读第2行，先读第1列，再读第2列。文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

table代码一列跨2行

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

效果如下：文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

代码说明原理：HTML代码一行一行到读，先读第1行第1列，读到第2列后，碰到rowspan="2"，预留2行的位置，然后再读第2行第1列。文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

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

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

效果如下：文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

跨行跨列复杂组合

<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跨多行多列复杂组合

效果如下：文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html