第02章-前端核心技术-HTML排版
第02章-前端核心技术-HTML排版
学习目标
掌握HTML表格的基本使用
掌握HTML表格排版的技术 重点
掌握HTML整体页面排版的技术 重点 难点
掌握HTML内联框架的使用场景
掌握HTML内联框架的使用方法
HTML 表格
HTML表格标签
标签描述<table>表格<th>表格的表头单元格<td>表格的行<td>表格单元格<catpion>表格标题<thead>表格的头部区域<tbody>表格的中间主体部分<tfoot>表格的底部区域
如下表格结构图
案例1
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table>
<tr>
<th>第1行第1列</th>
<th>第1行第2列</th>
<th>第1行第3列</th>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
</table>
</body>
</html>
效果展示：
属性
属性值描述alignleft |center| rightHTML5 不支持。HTML 4.01 已废弃。规定表格相对周围元素的对齐方式。bgcolorrgb(x,x,x) #xxxxxx 颜色名称HTML5 不支持。HTML 4.01 已废弃。规定表格的背景颜色。cellpadding像素HTML5 不支持。单元边格沿与其内容之间的空白。cellspacing像素HTML5 不支持。单元格之间的空白。width像素|百分百HTML5 不支持。表格的宽度。height 像素|百分百HTML5 不支持。表格的高度border像素，默认值1规定表格单元是否拥有边框。
案例01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<table width="80%" bgcolor="aqua" align="center">
<caption>受理统计系统</caption>
<tr height="50">
<th>受理员</th>
<th>受理数</th>
<th>自办数</th>
<th>直接解答</th>
<th>同意</th>
<th>比例</th>
<th>数量</th>
<th>比例</th>
<th>建议件</th>
<th>诉求件</th>
<th>咨询件</th>
</tr>
<tr bgcolor="blueviolet">
<td>王艳</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#c3c3c3">
<td>总计</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
</tr>
</table>
</body>
</html>
效果展示：
<th>和<td>属性
属性值描述alignleft| right |centerHTML5 不支持。规定单元格内容的水平对齐方式。bgcolorrgb(x,x,x) |#xxxxxx |颜色名称HTML5 不支持。HTML 4.01 已废弃。 规定单元格的背景颜色。height像素|百分百HTML5 不支持。HTML 4.01 已废弃。 设置单元格的高度。valigntop| middle| bottom |baselineHTML5 不支持。规定单元格内容的垂直排列方式。width像素|百分百HTML5 不支持。HTML 4.01 已废弃。 规定单元格的宽度。colspan列数规定单元格可横跨的列数。Columnrowspan行数设置单元格可纵跨的行数。Row
案例02：制作计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title></head>
<body>
<table border="5" cellspacing="10" cellpadding="20" align="center" bgcolor="beige">
<caption>计算器</caption>
<tr>
<td colspan="4" align="center" height="18" bgcolor="bisque"></td>
</tr>
<tr>
<td>C</td>
<td>%</td>
<td>/</td>
<td>*</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
<td align="center">+</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
<td align="center" rowspan="2" bgcolor="aquamarine">=</td>
</tr>
<tr>
<td align="center">C</td>
<td align="center">0</td>
<td align="center">.</td>
</tr>
</table>
</body>
</html>
效果展示：
案例03：制作课程表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课程表</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="5">
<caption>课程表</caption>
<tr bgcolor="aquamarine">
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td rowspan="3" bgcolor="antiquewhite">上午</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td colspan="2">自习</td>
</tr>
<tr>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td colspan="2">自习</td>
</tr>
<tr>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td colspan="2">自习</td>
</tr>
<tr>
<td rowspan="4" bgcolor="beige">下午</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td colspan="2">自习</td>
</tr>
<tr>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td colspan="2">自习</td>
</tr>
<tr>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td colspan="2">自习</td>
</tr>
<tr>
<td>Android</td>
<td>Android</td>
<td>Android</td>
<td>Android</td>
<td>Android</td>
<td colspan="2">自习</td>
</tr>
</table>
</body>
</html>
效果展示：
案例04：漂亮的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<table width="80%" border="4" cellspacing="2" cellpadding="5" align="center" bordercolor="#CCCCCC">
<tr bgcolor="burlywood">
<td align="center" height="60" colspan="12">受理员业务统计表</td>
</tr>
<tr>
<td align="right" height="25" colspan="12">2017-01-02---2017-05-02</td>
</tr>
<tr bgcolor="#e9faff">
<th colspan="2" rowspan="2">受理员</th>
<th width="10%" rowspan="2">受理数</th>
<th width="10%" rowspan="2">自办数</th>
<th width="10%" rowspan="2">直接解答</th>
<th colspan="2" >拟办意见</th>
<th colspan="2" >返回修改</th>
<th colspan="3" >工单类型</th>
</tr>
<tr bgcolor="#f3f3f3">
<td width="8%">同意</td>
<td width="8%">比例</td>
<td width="8%">数量</td>
<td width="8%">比例</td>
<td width="8%">建议件</td>
<td width="8%">诉求件</td>
<td width="8%">咨询件</td>
</tr>
<tr bgcolor="#f3f3f3">
<td width="7%" rowspan="4" bgcolor="#f2fbfe">受理处</td>
<td width="7%">王艳</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>王艳</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>王艳</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>总计</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
</tr>
<tr bgcolor="#f3f3f3">
<td width="7%" rowspan="4" bgcolor="#f2fbfe">话务组</td>
<td width="7%">王艳</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>王艳</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>王艳</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>王艳</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>总计</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
</tr>
</table>
</body>
</html>
效果展示：
案例05：制作导航栏
如果把整个表格看作一个整体，那么所有单元格的宽度总和应该等于100%，
换句话说，如果给部分单元格设置宽度，并且总和小于100%，那么剩下的单元格会分摊剩下的空间。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="20">
<tr align="center" height="50px" bgcolor="coral">
<td width="10%"></td>
<td width="10%">
<img src="img/06.jpg" height="35px" />
<br/>
<i>电脑版本</i>
</td>
<td></td>
<td width="5%">
<a href="">首页</a>
</td>
<td width="5%">
<a href="">发现</a>
</td>
<td width="5%">
<a href="">职位</a>
</td>
<td width="5%">
<a href="">活动</a>
</td>
<td width="5%">
<a href="">素材</a>
</td>
<td width="5%">
<a href="">课程</a>
</td>
<td width="5%">
<a href="">更多</a>
</td>
<td></td>
<td width="5%">
<a href=""><img src="img/07.jpg"height="35px" ></a>
</td>
<td width="5%">
<a href=""><img src="img/07.jpg" height="35px"></a>
</td>
<td width="10%"></td>
</tr>
</body>
</html>
效果展示：
案例06：实现图文排版
涉及到图文排版的时候，图片总是以图片自身的宽高显示，如果想让图片自动适应上级元素的宽高，则需要给图片添加width=“100%”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图文排版</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="5" width="80%" align="center">
<caption><h2>图文排版</h2></caption>
<tr align="center">
<td width="16%" colspan="3">
<img src="img/1-1.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/1-2.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/1-3.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/1-4.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/1-5.jpg" width="100%" />
</td>
</tr>
<tr align="center">
<td width="16%" colspan="3">
理是国家而根据彭
</td>
<td width="16%" colspan="3">
理是国家而根据彭
</td>
<td width="16%" colspan="3">
时间管理是国家而根据彭
</td>
<td width="16%" colspan="3">
理是国家而根据彭
</td>
<td width="16%" colspan="3">
理是国家而根据彭
</td>
</tr>
<tr align="center">
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
</tr>
<tr height="40"></tr>
<tr align="center">
<td width="16%" colspan="3">
<img src="img/2-1.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/2-2.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/2-3.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/2-4.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/2-5.jpg" width="100%" />
</td>
</tr>
<tr align="center">
<td width="16%" colspan="3">
理是国家而根据彭
</td>
<td width="16%" colspan="3">
理是国家而根据彭
</td>
<td width="16%" colspan="3">
时间管理是国家而根据彭
</td>
<td width="16%" colspan="3">
理是国家而根据彭
</td>
<td width="16%" colspan="3">
理是国家而根据彭
</td>
</tr>
<tr align="center">
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
</tr>
</table>
</body>
</html>
效果展示：
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
HTML中有很多框架标签，但是大多数都弃用了，沿用至今的就是
浙公网安备 33010602011771号