尝试在 html 中布局表格答案

【问题标题】：Trying to layout a table in html尝试在 html 中布局表格
【发布时间】：2016-04-18 13:01:14
【问题描述】：

我正在尝试布局一个包含四列的表格：第一列单元格是六行深；第 2 列单元格有六行深；第 3 列包含一个四行深的单元格和 2 个一行深的单元格；第 4 列包含一个深三行的单元格和一个深一行的单元格，该列中的最后两个单元格为空且未指定。

A B C D A B C D A B C D ABCE ABFx ABGx

我试图遵循我认为这样做的规则，即：第一个

包含第一行中所有内容的；第二个包含 (s) 以填充第一个未指定列[在本例中称为“E”的单元格]，接下来的两个 s 包含一个分别代表“F”和“G”。

以下代码是我的尝试：

    <table border='1'>
        <tr>
            <td rowspan='6'>A<br/>A<br/>A<br/>A<br/>A<br>A</td>
            <td rowspan='6'>B<br/>B<br/>B<br/>B<br/>B<br>B</td>
            <td rowspan='4'>C<br/>C<br/>C<br/>C</td>
            <td rowspan='3'>D<br/>D<br/>D</td>
        </tr>
        <tr>
            <td>E</td>
        </tr>
        <tr>
            <td>F</td>
        </tr>
        <tr>
            <td>G</td>
        </tr>
    </table>

这给了我：

ABCDx ABCDx ABCDE ABCDF ABCGx

如果我用不需要的列“引导它”：

1ABCD 2ABCD 3ABCD 4ABCE 5ABF 6ABG

使用：

    <table border='1'>
        <tr>
            <th>1</th>
            <td rowspan='6'>A<br/>A<br/>A<br/>A<br/>A<br>A</td>
            <td rowspan='6'>B<br/>B<br/>B<br/>B<br/>B<br>B</td>
            <td rowspan='4'>C<br/>C<br/>C<br/>C</td>
            <td rowspan='3'>D<br/>D<br/>D</td>
        </tr>
        <tr>
            <th>2</th>
        </tr>
        <tr>
            <th>3</th>
        </tr>
        <tr>
            <th>4</th>
            <td>E</td>
        </tr>
        <tr>
            <th>5</th>
            <td>F</td>
        </tr>
        <tr>
            <th>6</th>
            <td>G</td>
        </tr>
    </table>

它按预期出现。那我做错了什么？

【问题讨论】：

感谢您的敏锐观察。您是不正确的，因为我确实理解“rowspan”用于将单元格扩展到后续行。这在我使用它时应该很明显。
@JamieBarker 感谢您的敏锐观察。您是不正确的，因为我确实理解“rowspan”用于将单元格扩展到后续行。我确实检查了 HTML5 和 CSS All-in-One for Dummies、HTML、CSS 和 Javascript Web Publishing、HTML & CSS 设计和构建网站、Beginning HTML with CSS and XHTML Modern Guide and Reference、掌握 HTML，以及在 stackoverflow 困扰您之前的大量网络搜索.没有显示 <tr> </tr> 作为修复。
我的意思是，当您最多有 4 行时，您的行跨度为 6，我认为如果您了解行跨度/列跨度，这将是显而易见的。显然不是，我的错。

标签： html html-table

【解决方案1】：

在包含E的行之前添加两个空行

  <table border='1'>
    <tr>
        <td rowspan='6'>A<br/>A<br/>A<br/>A<br/>A<br>A</td>
        <td rowspan='6'>B<br/>B<br/>B<br/>B<br/>B<br>B</td>
        <td rowspan='4'>C<br/>C<br/>C<br/>C</td>
        <td rowspan='3'>D<br/>D<br/>D</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr>
        <td>E</td>
    </tr>
    <tr>
        <td>F</td>
    </tr>
    <tr>
        <td>G</td>
    </tr>
</table>

【讨论】：

【解决方案2】：

首先，要激活 6 行跨度，您需要 6 个非空行，例如 http://codepen.io/Toomean/pen/dMeaqd

<table border='1'>
  <tr>
    <td rowspan='6'>A<br/>A<br/>A<br/>A<br/>A<br>A</td>
    <td rowspan='6'>B<br/>B<br/>B<br/>B<br/>B<br>B</td>
    <td rowspan='4'>C<br/>C<br/>C<br/>C</td>
    <td rowspan='3'>D<br/>D<br/>D</td>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr>
    <td>E</td>
  </tr>
  <tr>
    <td>F</td>
  </tr>
  <tr>
    <td>G</td>
  </tr>
</table>

【讨论】：