如何在 table 中使用多个 rowspan？

Question

我在 HTML table 中遇到 rowspan 问题，但我仍然没有配置如何解决我的问题
下图显示了我想要的东西：

我使用了以下代码，但它没有给我想要的东西：

 <table border="1">

    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
            <th>Title 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="5">Title 1 example</td>
            <td rowspan="3">Title 2 example</td>
            <td rowspan="2">Title 2 example</td>
            <td rowspan="2">Title 3 example</td>
            <td rowspan="1">Title 3 example</td>
            <td rowspan="1">Title 3 example</td>
            <td rowspan="1">Title 3 example</td>

            <td rowspan="1">Title 4 example</td>
            <td rowspan="1">Title 4 example</td>
            <td rowspan="1">Title 4 example</td>
            <td rowspan="1">Title 4 example</td>
            <td rowspan="1">Title 4 example</td>


        </tr>
    </tbody>
</table>

但它给了我以下 table：我不知道我错过了什么？

Answer 1

<tr> 代表一行，所以如果你想要 5 行带有“Title 4 example”，你需要 5 <tr>s。在每个 <tr> 中，只需忽略 <td>s，因为它的 rowspan 已经存在前一个。指定 rowspan="1" 永远不会有用（除非您只是想保留它作为对自己的提醒），因为它是默认值。

<table border="1">
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
            <th>Title 4</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td rowspan="5">Title 1 example</td>
            <td rowspan="3">Title 2 example</td>
            <td rowspan="2">Title 3 example</td>
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <!-- Nothing in column 2 -->
            <!-- Nothing in column 3 -->
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <!-- Nothing in column 2 -->
            <td rowspan="2">Title 3 example</td>
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <td rowspan="2">Title 2 example</td>
            <!-- Nothing in column 3 -->
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <!-- Nothing in column 2 -->
            <td>Title 3 example</td>
            <td>Title 4 example</td>
        </tr>
    </tbody>
</table>

你可以在那里看到结果：https://jsfiddle.net/eskn6fhz/

Answer 2

根据您添加的图像，这是您的确切 table 格式，

 <table border="1">
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
            <th>Title 4</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td rowspan="11">Title 1 example</td>
            <td rowspan="6">Title 2 example</td>
            <td rowspan="3">Title 3 example</td>
            <td rowspan="1">Title 4 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 5 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 6 example</td>
        </tr>
        <tr>
            <td rowspan="3">Title 7 example</td>
            <td rowspan="1">Title 8 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 5 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 6 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 7 example</td>
            <td rowspan="1">Title 8 example</td>
            <td rowspan="1">Title 9 example</td>
        </tr>
        <tr>
            <td rowspan="4">Title 10 example</td>
            <td rowspan="3">Title 11 example</td>
            <td rowspan="1">Title 12 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 13 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 14 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 15 example</td>
            <td rowspan="1">Title 16 example</td>
        </tr>
        <tr>
            <td rowspan="7">Title 17 example</td>
            <td rowspan="6">Title 18 example</td>
            <td rowspan="4">Title 19 example</td>
            <td rowspan="1">Title 20 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 21 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 22 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 23 example</td>
        </tr>
        <tr>
            <td rowspan="2">Title 24 example</td>
            <td rowspan="1">Title 25 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 26 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 27 example</td>
            <td rowspan="1">Title 28 example</td>
            <td rowspan="1">Title 29 example</td>
        </tr>
    </tbody>
</table>

HTML 中的 rowspan 属性 指定单元格应跨越的行数。也就是说，如果一行跨越两行，则意味着它将占用 table 中两行的 space。它允许单个 table 单元格跨越多个单元格或行的高度。它提供的功能与 “合并单元格” 在 Excel.

等电子表格程序中的功能相同

用法： 它可以与 <td> 和 <th> 元素一起使用在 HTML Table.

属性值：它包含一个值，即指定 table 单元格应跨越的行数的值。

<td>: 当与 <td> 标签一起使用时，rowspan 属性决定了它应该跨越的标准单元格的数量。

Reference Geeksforgeeks

如何在 table 中使用多个 rowspan？

How to use multiple rowspan in a table?

html

php

html-table