登录 注册
【建设网站】表格应用综合实例
发表日期：2018-11-09 05:47:16

 【建设网站】

表格应用综合实例
【案例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中提供了“布局”模式，在后面的章节中将详细讲解。

上一篇： 【建设网页公司】HTML文档的结构、标签的格式

下一篇： 【企业怎么做网站建设】元素常用属性的含义如下

400-611-0508
全方位的营销咨询
精准的解决方案
一对一贴心服务
地址：北京市丰台科技园汉威国际四区8号楼7层
copynght 2018 yishenzhou.com 版权所有
北京易神州网络技术有限公司
京ICP备06029384号