如何构造html表

Question

我正在尝试制作一张看起来像图片的桌子，但我无法弄明白......这对你来说一定是那么简单的问题但是我在制作这个工作时遇到了麻烦......任何人都可以帮我？请。

这是我目前的代码：

<table width="100%" border="1">
<tr>
<th>Name of Candidates</th>
<th>Educational Attainment</th>
<th>Exprerience</th>
<th>In-Service Trainings & Seminars Attended</th>
<th>Eligibility</th>
<th>Other Qualifications</th>
<th>Interview</th>
<th>Total</th>
<th>Remarks</th>
</tr>
</table>

Answer 1

使用rowspan和colspan

的组合

<强> example

第一行将包含占据2行的所有单元格和1个在4列上展开的单元格（示例中为灰色背景）。第二行将包含在4个细胞上扩散的细胞下的4个细胞。

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Answer 2

使用 colspan增加单元格的宽度：

colspan="4"

文档colspan

---

使用 rowspan来增加单元格的高度：

rowspan="2"

文档rowspan

Answer 3

<table>
    <tr>
        <td></td>
        <td></td>
        <td colspan="7" rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

这对于困难的表格生成器来说是个好帮手。 http://html-tables.com/

Answer 4

在这里，使用colspan跨越多列。

<table widtd="100%" border="1">
    <tr>
        <td>Name of Candidates</td>
        <td colspan="4">Educational Attainment</td>
        <td>Otder Qualifications</td>
        <td>Interview</td>
        <td>Total</td>
        <td>Remarks</td>
    </tr>
    <tr>
        <td>Name of Candidates</td>
        <td>Educational Attainment</td>
        <td>Exprerience</td>
        <td>In-Service Trainings & Seminars Attended</td>
        <td>Eligibility</td>
        <td>Otder Qualifications</td>
        <td>Interview</td>
        <td>Total</td>
        <td>Remarks</td>
    </tr>
</table>

同样，您可以使用rowspan来跨越多行。