html - 结构复杂的 HTML 表格

Question

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

复杂表（图片本身没有出现，请点击链接）

我在stackoverflow上进行了搜索，但给出的答案没有太多解释。下面是仅用于复杂行的代码，即以包含“星期二”的单元格开头的行

<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”开头的行，即带圆圈的行不在新行上。

实际效果（图片本身没有出现，请点击链接）

标签： htmlhtml-table

Answer 1

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

要获得所需的结果，您应该在表格中添加 3 个额外行并在它们之间分配单元格，以便每个单元格从正确的行开始（“XSL 转换”在第 4 行，其他分别在第 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>