Question

我试图用HTML创建一个表。第一列中有7行，第二列中只有1行。我无法弄明白。我觉得我错过了一些简单的事情。

Answer 1

您希望使用rowspan属性在第一列的行上展开第二列，如下所示。

参考： http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6.1

td {
  border: 1px solid gray;
}

<table>
  <tr>
    <td>C 1</td>
    <td rowspan="7">C 2</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
  <tr>
    <td>C 1</td>
  </tr>
</table>

Answer 2

您可以在第一行中添加第二个td元素，并将其rowspan更改为7

<table border="1" style="width:100%">
  <tr>
    <td>a</td>
    <td rowspan="7">b</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>a</td>
  </tr>
</table>

Answer 3

您可以使用rowspan属性让单元格跨越多行。

代码：

<html>
    <body>
        <table>
            <tr>
                <td>Row 1</td>
                <td rowspan="7">Row 1</td>
            </tr>
            <tr>
                <td>Row 2</td>
            </tr>
            <tr>
                <td>Row 3</td>
            </tr>
            <tr>
                <td>Row 4</td>
            </tr>
            <tr>
                <td>Row 5</td>
            </tr>
            <tr>
                <td>Row 6</td>
            </tr>
            <tr>
                <td>Row 7</td>
            </tr>
        </table>
    </body>
</html>

带有2列的HTML表格;第一列是7行，第二列是1行

3 个答案: