【建设网站】
表格应用综合实例
【案例4-5l制作职工工资一览表的页面。
【案例展示】本例文件4-5.html在浏览器中显示的效果如图4-9所示。
图4-9职工工资一览表
【学习目标】掌握使用表格显示数据的基本操作。
【知识要点】通过设置表格和单元格的属性，将文本和图像按行、列排列。
代码如下：
<! doctype html>
<html>
<head><title>职工工资一览表</title></head>
<body>
<table border="3" width="640" height="120" bgcolor="ivory" bordercolor="red" align="center">
<caption align="left">设置表格边框、尺寸以及背景和边框色彩的工资一览表</caption>
<tr><th>I号</th><th>姓名</th><th>应发工资</td><th>扣款</th><th>实发工资</th>
<tr><td>1001</td><td>张三丰</td><td>1992 </td><td>92</td><td>1900</td>
<tr><td>1002</td><td>王天宝</td><td>2088 </td><td>8 8</td><td>2000</td>
</table><br/>
<table border="l" cellspacing="8" cellpadding="10">
<caption align="center">设置表格表项间隙和表项内部空白的工资一览表</caption>
·56·
<tr><th>工号</th><th>姓名</th><th>应发工资</td><th>扣款</th><th>实发工资</th>
<tr><td>1001</td><td>张三丰</td><td>1 992 </td><td>92</td><td>1 900</td>
<tr><td>1002</td><td>王天宝</td><td>2088 </td><td>88 </td><td>2000 </td>
</table><br/>
<table border'''3" width="60%" height="200">
<caption align="right">设置表格内文字水平对齐和垂直对齐的工资一览表</caption>
<tr><th>工号</th><th>姓名</th><th>应发工资</td><th>扣款</th><th>实发工资</th>
<tr><td align=”left'’>1001<／td><td align=”center”>张三丰<／td><td align=”right”>1992<／td> <td
align="justify”>92</td><td>1900<／td>
<tr><td valign=”top”>1002<／td><td valign=”middle”>王天宝<／td><td valign=”bottom”>2088
</td><td valign=”baseline”>88<／td><td>2000<／td>
<／table>
<／body>
</html>
【案例说明】在设计页面时，常需要利用表格来定位页面元素。使用表格可以导入表格化数据，设计页面分栏，定位页面上的文本和图像等。最初创建表格是为了显示表格数据，而不是用于对Web页进行布局。为了简化使用表格进行页面布局的过程，Dreamweaver中提供了“布局”模式，在后面的章节中将详细讲解。
