请解释 rowspan 和 colspan、col 和 colgroup

Question

谁能解释一下 rowspan 和 colspan, col 和 colgroup？这些 W3C 有效且语义正确吗？这些在什么情况下有用？

Answer 1

科尔斯潘

<table border="1">
  <tr>
    <th colspan="2">people are...</th>
  </tr>
  <tr>
    <td>monkeys</td>
    <td>donkeys</td>
  </tr>
</table>

行跨度

<table border="1">
  <tr>
    <th rowspan="2">monkeys are...</th>
    <td>... real monkeys</td>
  </tr>
  <tr>
    <td>... 'unreal' monkeys (people...)</td>
  </tr>
</table>

万维网

如您所见，这是用于连接表格单元格 - 因为有时这是必要的，所以它是有效的（RegDwights 链接将提供更多信息...）。

列/列组

colgroup 和 col 用于为表中的每一行设置属性（因此您不必编写 width="80" 为了第一 td 在每一行（tr)):

<table border="1">
  <colgroup>
    <col width="80">
    <col width="100">
    <col width="320">
  </colgroup>
  <tr>
    <td>first line, first column</td>
    <td>first line, second column</td>
    <td>first line, third column</td>
  </tr>
  <!-- more table-lines... -->
</table>

您还可以对列进行分组，假设第一列和第二列应该得到 with 80 中，第三个应该得到 320：

<table border="1">
  <colgroup width="80" span="2"></colgroup>
  <colgroup width="320" span="1"></colgroup>
  <tr>
    <td>first line, first column</td>
    <td>first line, second column</td>
    <td>first line, third column</td>
  </tr>
  <!-- more table-lines... -->
</table>

Answer 2

是的，它们都是W3C推荐的。以下是文档的直接链接：

• col
• colgroup
• colspan
• rowspan

Answer 3

和rowspan colspan是允许设计者“合并”细胞属性 - 很像在Excel（例如）

的相同的命令。

和col colgroup允许设计者应用CSS到垂直柱，而不是申请的CSS到单个细胞中的一列。如果没有这些，这个任务将更加困难，因为HTML表格是基于行。

的这些所有四种是有效的。

有关将来参考，尝试 http://reference.sitepoint.com/html