18.2　让单元格跨越多列或多行

可以通过colspan和rowspan属性让th或td跨越一个以上的列或行。对该属性指定的数值表示的是跨越的单元格的数量，如图18.2.1和图18.2.2所示。

  1. ...
  2. <body>
  3. <table>
  4.      <caption>TV Schedule</caption>
  5.      <thead> <!-- 表格头部 -->
  6.         <tr>
  7.            <th scope="rowgroup">Time</th>
  8.            <th scope="col">Mon</th>
  9.            <th scope="col">Tue</th>
  10.            <th scope="col">Wed</th>
  11.         </tr>
  12.      </thead>
  13.      <tbody> <!-- 表格主体 -->
  14.         <tr>
  15.            <th scope="row">8 pm</th>
  16.            <td>Staring Contest</td>
  17.            <td colspan="2">Celebrity Hoedown</td>
  18.         </tr>
  19.         <tr>
  20.            <th scope="row">9 pm</th>
  21.            <td>Hardy, Har, Har</td>
  22.            <td>What's for Lunch?</td>
  23.            <td rowspan="2">Movie of the Week</td>
  24.         </tr>
  25.         <tr>
  26.            <th scope="row">10 pm</th>
  27.            <td>Healers, Wheelers & Dealers</td>
  28.            <td>It's a Crime</td>
  29.         </tr>
  30.      </tbody>
  31. </table>
  32. </body>
  33. </html>

图18.2.1　通过在包含Celebrity Hoedown演出的td上应用colspan="2"，指示该演出的上映时间包含周二和周三晚上8点这两个时间。类似地，在包含Movie of the Week的td上添加了rowspan="2"，因为该演出持续两个小时。同时，注意Time这个th设置了scope="rowgroup"，因为它是它正下方的每个行标题组的标题

18.2　让单元格跨越多列或多行 - 图1

图18.2.2　仅仅通过查看代码，很难判断colspan和rowspan对表格的影响，但在浏览器中查看就清楚多了。这个表格还用CSS添加了一些样式，完整的样式表见本书的配套网站（www.bruceontheloose.com/htmlcss/examples/）

  1. 让单元格跨越两个或两个以上列的步骤

  • 在需要定义跨越一个以上的列的单元格的地方，输入和一个空格。

  • 输入colspan="n">，这里的n是单元格要跨越的列数。

  • 输入单元格的内容。

  • 输入。

  • 根据18.1节中的介绍，完成表格的其余部分。如果创建了一个跨越两列的单元格，在该行就应该少定义一个单元格；如果创建了一个跨越三列的单元格，在该行就应该少定义两个单元格，以此类推。

  1. 让单元格跨越两个或两个以上行的步骤

  • 在需要定义跨越一个以上的行的单元格的地方，输入和一个空格。

  • 输入rowspan="n">，这里的n是单元格要跨越的行数。

  • 输入单元格的内容。

  • 输入。

  • 根据“结构化表格”一节中的介绍，完成表格的其余部分。如果创建了一个rowspan等于2的单元格，就不需要定义下一行中该单元格对应的单元格了；如果创建了一个rowspan等于3的单元格，就不需要定义下面两行中该单元格对应的单元格了，以此类推。

提示　表格中的每一行都应具有相同的单元格数量。跨越多列的单元格应算做多个单元格，它的colspan属性值为多少，就算做多少个单元格。

　

提示　表格中的每一列都应具有相同的单元格数量。跨越多行的单元格应算做多个单元格，它的rowspan属性值为多少，就算做多少个单元格。