Question

我的HTML表格有一个特殊的标题，其中包含3个具有自己的表格行的子标题。我尝试使用rowspan和colspan来完成它，但我在两者之间迷茫。我会尽力说明我想用HTML表格实现的目标。

/-------------------------------------------------------------\
|          |              Two             |         |         |
|  One     |------------------------------|  Three  |  Four   |
|          |  Two A  |  Two B   |  Two C  |         |         |
|-----------------------------------------|---------|---------|
|  1.0     | 20.00   |   40.00  |  52.00  |    45   |   62    |
|-----------------------------------------|---------|---------|
|  2.0     | 60.00   |   70.00  |  84.00  |    54   |   45    |
\-------------------------------------------------------------/

这可以仅使用HTML表格完成，还是需要托管任何其他方法？

Answer 1

这是另一个只有rowspan和colspan的解决方案

<!DOCTYPE html>
<html>

<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        
        th,
        td {
            padding: 5px;
            text-align: center;
        }
    </style>
</head>

<body>

    <table style="width:100%">
        <tr>
            <th rowspan="2">One</th>
            <th colspan="3">Two</th>
            <th rowspan="2">Three</th>
            <th rowspan="2">Four</th>
        </tr>
        <tr>
            <th>Two A</th>
            <th>Two B</th>
            <th>Two C</th>
        </tr>
        <tr>
            <td>1.0</td><td>10.00</td><td>40.00</td><td>52.00</td><td>40</td><td>62</td>
        </tr>
        <tr>
            <td>2.0</td><td>60.00</td><td>70.00</td><td>84.0</td><td>54</td><td>45</td>
        </tr>
    </table>

</body>

</html>

Answer 2

这就是你要找的东西。如果你需要在表头中嵌套一个表。

＆＃13;

<table>
<tr>
<th>1</th><th colspan="2">MAIN<table><tr><td>2</td><td>3</td></tr></table></th><th>4</th>
</tr>
<tr>
 <td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</table>

＆＃13;

标头中的多个表头

2 个答案: