HTML案例：表格

题目

表格是HTML中重要的组成部分，实现是非常简单的。主要使用表格标签table、行标签tr以及单元格标签td组成。下面做一个简单的表格招聘需求申请表。

分析

首先确定表格有几行几列，有几行table里面就有几个tr，有几列tr里面就有几个td(合并暂时不算)。

如图所示，共计7行6列(把合并的单元格拆开看)。

编写代码

7行6列表格HTML代码如下：

<table border="1">
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <td>总经理审批</td>
        <td></td>
        <td></td>
        <td>日期</td>
        <td></td>
        <td></td>
    </tr>
</table>

效果如图所示：

合并单元格

合并单元格代码如下：

<table border="1">
    <tr>
        <td colspan="6">招聘需求申请表</td>
    </tr>
    <tr>
        <td>部门</td>
        <td></td>
        <td>招聘岗位</td>
        <td></td>
        <td>招聘人数</td>
        <td></td>
    </tr>
    <tr>
        <td>现从事该岗位的总人数</td>
        <td></td>
        <td>现部门总人数</td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td>需求原因</td>
        <td colspan="5"></td>
    </tr>
    <tr>
        <td>部门负责人签名</td>
        <td colspan="2"></td>
        <td>日期</td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td>人事部门审批</td>
        <td colspan="2"></td>
        <td>日期</td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td>总经理审批</td>
        <td colspan="2"></td>
        <td>日期</td>
        <td colspan="2"></td>
    </tr>
</table>

效果如图：

细化

• 设置表头
• 设置表格的单元格间距(cellpadding)与单元格边距(cellspacing)。
• 设置文本对齐为居中对齐。
• 设置列的宽度

代码实现如下：

<table border="1" cellspacing="0" width="600" cellpadding="10">
    <tr align="center">
        <th colspan="6">招聘需求申请表</th>
    </tr>
    <tr align="center">
        <td width="100">部门</td>
        <td width="100"></td>
        <td width="100">招聘岗位</td>
        <td width="100"></td>
        <td width="100">招聘人数</td>
        <td width="100"></td>
    </tr>
    <tr align="center">
        <td>现从事该岗位的总人数</td>
        <td></td>
        <td>现部门总人数</td>
        <td colspan="3"></td>
    </tr>
    <tr align="center">
        <td>需求原因</td>
        <td colspan="5"></td>
    </tr>
    <tr align="center">
        <td>部门负责人签名</td>
        <td colspan="2"></td>
        <td>日期</td>
        <td colspan="2"></td>
    </tr>
    <tr align="center">
        <td>人事部门审批</td>
        <td colspan="2"></td>
        <td>日期</td>
        <td colspan="2"></td>
    </tr>
    <tr align="center">
        <td>总经理审批</td>
        <td colspan="2"></td>
        <td>日期</td>
        <td colspan="2"></td>
    </tr>
</table>

效果如图：