表格设计（html）

我正在为一个我必须要做的设计而挣扎，我搜索了这个实现，但我发现并不是我真正需要的，我有以下表格：

表1:

 ----------------------------------------------------------
 | Title1 | Title2  | Title3 | Title 4 | Title 5 | Title6 |
 ----------------------------------------------------------
 |Content1|Content2 |Content3|Content4 |Content5 |Content6|
 ----------------------------------------------------------

-------------------------------------
| Title1 | Title2 | Title3 | Title5 |
-------------------------------------
|        |        |Content3|Content5|
|        |        |------------------
|Content1|Content2| Title4 | Title6 |
|        |        -------------------
|        |        |Content4|Content6|
-------------------------------------

-------------------
| Title1 | Title2  |
-------------------|
|Content1|         |
---------| Content3|
|Content2|         |
-------------------|

我想做的是：

表2:

 ----------------------------------------------------------
 | Title1 | Title2  | Title3 | Title 4 | Title 5 | Title6 |
 ----------------------------------------------------------
 |Content1|Content2 |Content3|Content4 |Content5 |Content6|
 ----------------------------------------------------------

-------------------------------------
| Title1 | Title2 | Title3 | Title5 |
-------------------------------------
|        |        |Content3|Content5|
|        |        |------------------
|Content1|Content2| Title4 | Title6 |
|        |        -------------------
|        |        |Content4|Content6|
-------------------------------------

-------------------
| Title1 | Title2  |
-------------------|
|Content1|         |
---------| Content3|
|Content2|         |
-------------------|

我很难做到这一点，因为我看到的每个rowspan/colspan示例都只是将两个单元格放在同一个单元格标题下，如：

表3:

 ----------------------------------------------------------
 | Title1 | Title2  | Title3 | Title 4 | Title 5 | Title6 |
 ----------------------------------------------------------
 |Content1|Content2 |Content3|Content4 |Content5 |Content6|
 ----------------------------------------------------------

-------------------------------------
| Title1 | Title2 | Title3 | Title5 |
-------------------------------------
|        |        |Content3|Content5|
|        |        |------------------
|Content1|Content2| Title4 | Title6 |
|        |        -------------------
|        |        |Content4|Content6|
-------------------------------------

-------------------
| Title1 | Title2  |
-------------------|
|Content1|         |
---------| Content3|
|Content2|         |
-------------------|

如何将表1转换为表2？

试试：

<table>
    <tr>
        <td>Title 1</td>
        <td>Title 2</td>
        <td>Title 3</td>
        <td>Title 5</td>
    </tr>
    <tr>
        <td rowspan="3">Content 1</td>
        <td rowspan="3">Content 2</td>
        <td>Content 3</td>
        <td>Content 5</td>
    </tr>
    <tr>
        <td>Title 4</td>
        <td>Title 6</td>
    </tr>
    <tr>
        <td>Content 4</td>
        <td>Content 6</td>
    </tr>
</table>

标题1
标题2
标题3
标题5
内容1
内容2
内容3
内容5
标题4
标题6
内容4
内容6

您可以尝试以下操作：

<table border=1>
<tr class='tableheader'>
    <td>Title 1</td>
    <td>Title 2</td>
    <td>Title 3</td>
    <td>Title 5</td>
</tr>
<tr>
    <td rowspan="3">Content 1</td>
    <td rowspan="3">Content 2</td>
    <td>Content 3</td>
    <td>Content 5</td>
</tr>
<tr class='tableheader'>
    <td>Title 4</td>
    <td>Title 6</td>
</tr>
<tr>
    <td>Content 4</td>
    <td>Content 6</td>
</tr>
</table>

标题1
标题2
标题3
标题5
内容1
内容2
内容3
内容5
标题4
标题6
内容4
内容6

---

在css中，您可以为类应用特定格式

tableheader

，以清楚区分标题行。

请不要将表格用于布局任务。您可以通过几个div和CSS轻松实现这种布局

HTML:

---

试试-4行4列。然后拖动要合并的单元格（Content1然后Content2），然后单击“合并”。这将为您提供HTML，您可以看到rowspan是如何工作的。感谢您向我展示此网站：）感谢您也向我展示了tableheader的特定格式！