具有复杂结构的 HTML 表格

Question

我在创建下图中的表格时遇到困难:

complex table (图片本身没有出现，请点击链接)

我在 stackoverflow 上搜索过，但 answer没有太多解释。以下是仅针对复杂行的代码，即以包含“星期二”的单元格开头的行

<table border="1">
  <tr>
    <td rowspan="6">Tuesday</td>
    <td rowspan="2">8:00 am</td>
    <td rowspan="2">11:00 am</td>
    <td rowspan="3">XPath</td>
  </tr>
  <tr>
    <td rowspan="2">11:00 am</td>
    <td rowspan="2">2:00 pm</td>
    <td rowspan="3">XSL Transformations</td>
  </tr>
  <tr>
    <td rowspan="2">2:00 am</td>
    <td rowspan="2">5:00 pm</td>
  </tr>
</table>

在上面的代码中，我使用了三个 TR，预计会生成三行，但实际上只生成了一行。上面代码的结果如下所示。我不明白为什么以“11:00 am”开头的行，即带圆圈的行不在新行上。

actual result (图片本身没有出现，请点击链接)

Answer 1

您创建了 6 行的结构，但您的标记只有 3 行，并且第 2 行包含来自第 1 行的跨单元格和第 2 行中定义的单元格。这就是浏览器试图水平堆叠它们的原因。

要获得所需的结果，您应该向表中添加 3 个额外的行并在它们之间分配单元格，以便每个单元格都从正确的行开始(第 4 行中的“XSL 转换”，其他行中的第 1、3 和 5 行)行):请参见下面的第一个示例。

顺便说一句，同样的视觉效果可以只用 4 行来实现:见下面的第二个例子。

<table border="1">
  <tr>
    <td rowspan="6">Tuesday</td>
    <td rowspan="2">8:00 am</td>
    <td rowspan="2">11:00 am</td>
    <td rowspan="3">XPath</td>
  </tr>
  <tr></tr><!-- needed to accomodate cells with rowspan="2" from above -->
  <tr>
    <td rowspan="2">11:00 am</td>
    <td rowspan="2">2:00 pm</td>
  </tr>
  <tr>
    <td rowspan="3">XSL Transformations</td>
  </tr>
  <tr>
    <td rowspan="2">2:00 am</td>
    <td rowspan="2">5:00 pm</td>
  </tr>
  <tr></tr><!-- needed to accomodate cells with rowspan="2" from above -->
</table>

<hr>

<table border="1">
  <tr><!-- row 1 -->
    <td rowspan="4">Tuesday</td><!-- spans rows 1-4 -->
    <td>8:00 am</td><!-- spans row 1 only -->
    <td>11:00 am</td><!-- spans row 1 only -->
    <td rowspan="2">XPath</td><!-- spans rows 1-2 -->
  </tr>
  <tr><!-- row 2 -->
    <td rowspan="2">11:00 am</td><!-- spans rows 2-3 -->
    <td rowspan="2">2:00 pm</td><!-- spans rows 2-3 -->
  </tr>
  <tr><!-- row 3 -->
    <td rowspan="2">XSL Transformations</td><!-- spans rows 3-4 -->
  </tr>
  <tr><!-- row 4 -->
    <td>2:00 am</td><!-- spans row 4 only -->
    <td>5:00 pm</td><!-- spans row 4 only -->
  </tr>
</table>