Question

我试图做这样的表（我在Word中做过）

有人可以用rowspan和colspan建议我正确的方法吗？

Answer 1

通常你应该展示你的作品，所以我们可以看到你已经走了多远，我们可以在哪里帮助你。您的表由6行组成。试试这个......

<table>
    <tr>
        <td rowspan="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td rowspan ="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum vel ex sed blandit. Maecenas consequat mi id mi sodales facilisis. Phasellus rhoncus in nulla vel aliquam. Pellentesque laoreet, eros id dapibus auctor, sapien lorem laoreet libero, non ultrices mi neque eu massa. Ut non convallis est, eget sodales lectus. Mauris nec lacus augue. Fusce pellentesque tempor lectus ut mattis.</td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td rowspan ="2">Nam ligula est, consequat vulputate dui nec, tempus dapibus lectus. Fusce aliquam mauris dolor, vitae congue dolor auctor tempor. Integer vel faucibus velit. Praesent hendrerit leo vel nulla egestas convallis. Aenean iaculis dapibus libero ac egestas. Nunc luctus fermentum velit eu faucibus. Nullam consequat dui massa, a pulvinar lacus rutrum non. Cras eu odio eget tellus scelerisque tempus vitae id nunc.</td>
    </tr>
    <tr>
        <td rowspan="3">Praesent pharetra nibh dolor, et pharetra purus pulvinar nec. Quisque dolor orci, dictum et aliquet a, tincidunt vel lectus. Cras vitae ante pulvinar, accumsan lacus in, porttitor ex. Nulla sodales dolor nec fringilla pulvinar. Pellentesque vulputate fermentum enim, ut tristique est efficitur et. Morbi molestie porttitor eros eu eleifend. Nam volutpat porta congue. Vestibulum fringilla nisi nec rutrum egestas. In eu elit ultricies, eleifend orci vulputate, semper leo. Donec vehicula lorem sit amet libero finibus tincidunt in ut mauris. Mauris fermentum est sit amet accumsan tempor. Nunc nec odio et felis congue tincidunt quis sit amet augue. Suspendisse sed hendrerit sapien, id interdum nunc. Donec rutrum augue non velit rhoncus consequat. Duis eleifend molestie magna quis euismod.</td>
    </tr>
    <tr>
        <td rowspan ="2">Morbi id interdum massa. In mollis malesuada ultrices. Pellentesque vehicula tellus ac dictum faucibus. Maecenas nibh tellus, ultrices non dapibus non, tempus sit amet erat. Nunc in lobortis mauris. Vivamus a tristique mi. Aenean egestas justo quis consequat lacinia. Quisque felis eros, ornare sit amet ante vitae, dignissim euismod felis. Pellentesque tempor eget mauris hendrerit porta. Donec venenatis ipsum a neque vestibulum, in ornare ante tempus. Donec vitae mauris sapien. In vel suscipit ex. Mauris sed nunc nec erat accumsan tempor. Etiam cursus lectus a diam eleifend aliquam. Ut dignissim mi et mauris maximus, eget sollicitudin lorem luctus. Morbi ornare rhoncus egestas.</td>
    </tr>
    <tr>
    </tr>
</table>

Rowspan 表示<td>单元格跨越X行数。例如：<td rowspan="2">表示单元格跨越两行。可以在w3school's Rowspan Reference page上找到更多详细信息及其示例。

Colspan ，与rowspan一样，意味着<td>单元格跨越X列数量。例如：<td colspan="2">表示单元格跨越两列。可以在w3school's Colspan Reference page上找到更多详细信息及其示例。

在您的情况下，为了确保rowspan正常工作，确保您的表有足够的行以允许其正确布局是有帮助的。

在您的表格中，它显示第一列包含两个单元格，第二列包含三个单元格。不可能将3分成两个或两个分成三个，所以我认为好的数字是六行。我确保那里有六行，并将<td rowspan="3">和<td rowspan="2">放在他们所属的位置。

如果有任何问题，请告诉我。

Answer 2

要创建这样的表，您只需要四行并设置此行

的行数

<table width="400" height="400" border="1" cellspacing="0" cellpading="0">
            <tr>
                <td rowspan="2">a</td>
                <td>a</td>
            </tr>
            <tr>
                <td rowspan="2">a</td>
            </tr>
            <tr>
                 <td rowspan="2">a</td>
            </tr>
            <tr>
                <td>a</td>
            </tr>
        </table>

Answer 3

我不知道该怎么做，有这个不错的在线工具： http://www.tablesgenerator.com/html_tables

它生成以下代码：

＆＃13;

<table border="1">
  <tr>
    <th rowspan="2">A1</th>
    <th>B1</th>
  </tr>
  <tr>
    <td rowspan="2">B2</td>
  </tr>
  <tr>
    <td rowspan="2">A2</td>
  </tr>
  <tr>
    <td>B3</td>
  </tr>
</table>

＆＃13;

HTML表，第一列有2行，第二列有3行

3 个答案: