HTML 表格

5.1表格
<table>表格
<caption>表格的标题
<thead>表头的部分
<thody>表格的主体
<tfoot>表尾，汇总信息
<tr>一行
<th>表头有加粗样式
<td>表中信息，主体部分没有加粗样式
<td>的rowspan和colsoan分别定义单元格跨行的行数、跨列的列数
<rowspan>合并几列
<colspan>合并几行
<cellspacing >表格的间距

<table border="1" cellspacing="0" cellpadding="6">    <caption>华鑫信息科技有限公司</caption>    <thead>    <tr>        <th>姓名</th>        <th>性别</th>        <th>出生年月</th>        <th>职务</th>        <th>电话</th>        <th>部门</th>    </tr>    </thead>    <tbody>    <tr>        <td>李东华</td>        <td>男</td>        <td>1995-01-01</td>        <td>学生</td>        <td>12345678901</td>        <td rowspan="4">市场部</td>    </tr>    <tr>        <td>李永刚</td>        <td>男</td>        <td>1996-01-01</td>        <td>学生</td>        <td>12345678901</td>    </tr>    <tr>        <td>李壮壮</td>        <td>男</td>        <td>1997-01-01</td>        <td>学生</td>        <td>12345678901</td>    </tr>    <tr>        <td>李东华</td>        <td>男</td>        <td>1995-01-01</td>        <td>学生</td>        <td>12345678901</td>    </tr>    <tr>        <td>孟玉磊</td>        <td>男</td>        <td>1996-01-01</td>        <td>总经理</td>        <td>12345678901</td>        <td rowspan="2">总经理办公室</td>    </tr>    <tr>        <td>孟玉磊</td>        <td>男</td>        <td>1996-01-01</td>        <td>总经理</td>        <td>12345678901</td>    </tr>    </tbody>    <tfoot>    <tr>        <td colspan="6">共计40人</td>    </tr>    </tfoot></table>

5.2 table布局
布局：是页面的整体结构。
结构特点：从上往下，从左往右。一般每一行的高度是一样的。

<table width="800px" border="1">    <tbody>    <tr>        <td colspan="3"><img src="img/logo.png" alt=""></td>        <!--<td></td>-->        <!--<td></td>-->    </tr>    <tr>        <td colspan="3">            <table border="1">                <tr>                    <td width="260"></td>                    <td>首页</td>                    <td>学院概况</td>                    <td>机构设置</td>                    <td>新闻公告</td>                    <td>教学科研</td>                    <td>招生就业</td>                    <td>数字校园</td>                </tr>            </table>        </td>        <!--<td></td>-->        <!--<td></td>-->    </tr>    <tr>        <td><img src="img/row_2_left.png" alt=""></td>        <td colspan="2"><img src="img/row_2_right.png"></td>        <!--<td></td>-->    </tr>    <tr>        <td><img src="img/row_3_links.png"></td>        <td><img src="img/row_3_new.png"></td>        <td><img src="img/row_3_info.png"></td>    </tr>    </tbody></table>

效果图如下

首页 学院概况 机构设置 新闻公告 教学科研 招生就业 数字校园

   页面的布局可以通过table来实现，一个单元格就是一个布局区域单位。该区域的大小可以通过height和width属性来设置，位置是通过单元格的相对位置来体现。同时可以结合rowspan和colspan两个属性来完成。   当布局比较复杂的时候可以使用teble的嵌套来实现，即在某个单元格在嵌入一个table进行划分