Question

我写了这段代码：

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

    </style>
    <table>
    <tr>
    <td> a </td>
    <td> b </td>
    <td> c </td>
    </tr>
    <tr>
    <td> a </td>
    <td>   </td>
    <td> c </td>
    </tr>
    <tr>
    <td> a </td>
    <td>   </td>
    <td> c </td>
    </tr>
    </table>
    </body>
    </html>

这会生成一个如下所示的表：

----------------------------------
|a       |     b      |     c    |
----------------------------------
|a       |            |     c    |
----------------------------------
|a       |            |     c    |
----------------------------------

但我想要的是这样的表结构：

----------------------------------
|a       |     b      |     c    |
----------            ------------
|a       |            |     c    |
----------            ------------
|a       |            |     c    |
----------------------------------

合并中间列中的行。我怎么能这样做？

由于

Answer 1

您可以使用rowspan属性td，其中包含b。

<table border="1">
    <tr>
        <td>a</td>
        <td rowspan="3">b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>a</td>
        <td>c</td>
    </tr>
    <tr>
        <td>a</td>
        <td>c</td>
    </tr>
</table>

然后您可以添加CSS以根据您的喜好调整它：

table{
    text-align: center;
    width: 100%;
}

以下是一个例子：https://jsfiddle.net/sntgoy5d/

如果您希望将b放在单元格的顶部，则可以使用css属性vertical-align并将其设置为top。

如何在表格中的一个单元格中制作三个单元格

1 个答案: