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进行划分