Question

+------------------------------------+
|        |         |   col3          |
| col1   | col2    |-----------------| 
|        |         |subcol1 | subcol2|
+------------------------------------+
| Value 1 | Value 2| Val1.1|Val1.2   |
|------------------------------------|
| Value 1 | Value 2| Val2.1|Val2.2   |
+------------------------------------+

如何使用html表格进行操作？有人可以帮我吗？

Answer 1

如果你真的想使用表格：

<html>
<head>
<style>
table, th, td {
    border: 1px black solid;
}
</style>
</head>
<body>

<table>
  <tr>
    <th rowspan='2'>col1</th>
    <th rowspan='2'>col2</th>
    <th colspan='2'>col3</th>
  </tr>
  <tr>
    <th>subcol1</th>
    <th>subcol2</th>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
    <td>Val1.1</td>
    <td>Val1.2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
    <td>Val1.1</td>
    <td>Val1.2</td>
  </tr>
</table>

</body>
</html>

Answer 2

您需要知道的是：

当我使用colspan时，我在同一行创建x td，所以我不需要提供它们

当我使用rowspan时，我会在接下来的x行中创建1个td，所以我不需要提供它们

<html>
<body>
    <table border="1">
        <tr>
            <td rowspan="2">col1</td>
            <td rowspan="2">col2</td>
            <td colspan="2">col3</td>
        </tr>
        <tr>
            <td>subcol1</td>
            <td>subcol2</td>
        </tr>
        <tr>
            <td>Value 1</td>
            <td>Value 2</td>
            <td>Val1.1</td>
            <td>Val1.2</td>
        </tr>
        <tr>
            <td>Value 1</td>
            <td>Value 2</td>
            <td>Val2.1</td>
            <td>Val2.2</td>
        </tr>
    </table>
</body>
</html>

如何制作html表colspan

2 个答案: