Question

我正在尝试创建一个包含4列和多行的表。当我尝试向表中添加更多数据时，信息不会丢失在正确的标题下。假设属于第3个表头的信息属于我的第一个标题下的信息的底部。这是我的代码。

<table>
<table style="width:800px">
<tr>
  <th><h4>I.T. Department</h4></th>
  <th><h4>Accounting Department</h4></th> 
  <th><h4>Tax Filings & Surplus Lines Department</h4></th>
  <th><h4>Licensing Department<h4></th>
</tr>
<tr>
<td align="center" rowspan="2"><br>Test Test<br>I.T. Manager<br>xxx-xxx-xxxx<br><br>                 <br>Test Test<br>I.T. Operations Supervisor<br>xxx-xxx-xxxx</td></tr>
<tr><td align="center" rowspan="2">Test Test<br>Accounting Supervisor<br>xxx-xxx-   xxxx<br><br><br>Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx</td></tr>



</table>

这是我用来尝试添加更多数据的行。

<tr><td align="center" rowspan="2">Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx<br><br><br>Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx</td></tr>

我做错了什么？

Answer 1

这会产生您正在寻找的输出吗？

<table border="1">
<tr>
  <th><h4>I.T. Department</h4></th>
  <th><h4>Accounting Department</h4></th> 
  <th><h4>Tax Filings & Surplus Lines Department</h4></th>
  <th><h4>Licensing Department<h4></th>
</tr>

<tr>

    <!-- IT -->
    <td align="center">
        <br>Test Test<br>I.T. Manager<br>xxx-xxx-xxxx<br><br><br>Test Test<br>I.T. Operations Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- ACCOUNTING -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-   xxxx<br><br><br>Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- TAX -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx<br><br><br>Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- LICENSING -->
    <td align="center">
    </td>

</tr>

</table>

我删除了“rowspans”和额外的TR标记，并添加了边框以进行故障排除。

如果要添加更多行，请复制并粘贴TR和TD，并更改TD标记中的信息。

更好的是，这里的数据分成多行：

<table border="1">
<tr>
  <th><h4>I.T. Department</h4></th>
  <th><h4>Accounting Department</h4></th> 
  <th><h4>Tax Filings & Surplus Lines Department</h4></th>
  <th><h4>Licensing Department<h4></th>
</tr>

<tr>
    <!-- IT -->
    <td align="center">
        Test Test<br>I.T. Manager<br>xxx-xxx-xxxx
    </td>

    <!-- ACCOUNTING -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- TAX -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- LICENSING -->
    <td align="center">
    </td>

</tr>

<tr>
    <!-- IT -->
    <td align="center">
        Test Test<br>I.T. Operations Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- ACCOUNTING -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- TAX -->
    <td align="center">
        Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx
    </td>

    <!-- LICENSING -->
    <td align="center">
    </td>

</tr>

</table>

Answer 2

在表格中，每个<tr>开始一个新行，<td>指定一行中的列。所以它应该是：

<tr>
    <td align="center" rowspan="2"><br>Test Test<br>I.T. Manager<br>xxx-xxx-xxxx<br><br>                 <br>Test Test<br>I.T. Operations Supervisor<br>xxx-xxx-xxxx</td>
    <td align="center" rowspan="2">Test Test<br>Accounting Supervisor<br>xxx-xxx-   xxxx<br><br><br>Test Test<br>Accounting Supervisor<br>xxx-xxx-xxxx</td>
</tr>

要添加其他列，只需在<td>...</td>块中添加另一个<tr>...</tr>块。

HTML表和表数据对齐

2 个答案: