网页设计-表格、表单及框架

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<td valign=top>垂直<br>顶对齐</td>
<td valign=middle>垂直中对齐</td> </tr>
</ຫໍສະໝຸດ Baiduable>
</body>
第7页
3.1.3 合并单元格
日常使用的表格中，常有些格子需要跨多行或多列，例如下面的学生表。
实际上，跨多列的格子就是将一行的多个格子合并到一起，也就是该格子占多列。类似地，跨多行的格子就是将一列的多个格子合并到一起，也即该格子占多行。于是，
设置属性后的表格结构如下：
<table width=100% height=100%> <tr> <th colspan=2> </th> <th width=40 height=40></th> </tr> <tr> <th colspan=3 ></th> </tr> <tr> <td rowspan=2 width=25%> </td> <th colspan=2 ></th> </tr> <tr> <th colspan=2></th> </tr> </table>
<td>姓名</td>
<td>性别</td>

</tr>
<tr>

<td>08003301</td><td>王明</td><td>男</td>
</tr>
<tr>

<td>08003302</td><td>张鸿</td><td>女</td>
设自己的Web站点，编写自己的Web网页。HTML正是创建网页的基础语言。</th> </tr> <tr> <th colspan=2><a href="">点击进入</a> </th> </tr> </table> </body>
</tr>
</table>

</body></html>
第3页
常见的表格上面往往有个标题，第一行(表头)也常常用突出的字体(如黑体、粗体等)等来显示，以突显其内容。这些在HTML表格中可以利用表格下面两个标签来实现：
<caption></caption> —— 标题标签对，用于定义一个表格标题，它只能放在<table>标签对中，并在<tr>之前。<caption> 的align、valign属性用于设置标题的对齐方式，取值同<td>，默认在表的上方中间。
例：<td rowspan=2>…</td>，指定单元格占2行。
第8页
【例3-4】创建前面所示的学生表表格
<body>
<table border cellspacing=0 > <caption valign=top>学生表</caption>
<tr> <th colspan=3>基本信息</th>
<i>网页编程学习网站</i></font> </th> <th background=a1.gif width=40 height=40></th> </tr> <tr> <th colspan=3 background=a2.gif height=8></th> </tr> <tr> <td rowspan=2 background=a3.gif width=25%> </td> <th colspan=2 >&nbsp&nbsp&nbsp如今，公司、企业和个人都在建
<td>水平<br>左对齐</td>
<td>水平左对齐</td>
<td align=right width=150 >水平右对齐</td> </tr>
<tr height=80>

<th>第3行<br>高80</th>
<td valign=bottom>垂直底对齐</td>
<tr align=right>

<th>第1行<br>水平右对齐</th>
<td>水平<br>右对齐</td>
<td>水平右对齐</td>
<td align=center>水平中对齐</td> </tr>
<tr>

<th align=left>第2行<br>水平左对齐</TH>
bgcolor
设置背景颜色
background 设置背景图片
width
设置表格的宽度
height
设置表格的高度
cellspacing 设置表格中格子间的空隙
cellpadding 设置表格的格子中内容与边框间的空隙
align
设置表格在网页中的位置(左,中,右）
属性值
像素值，默认值为1 颜色值，默认值为黑色颜色值，默认值为白色同页面背景图片设置像素值或占窗口的百分比像素值或占窗口的百分比像素值像素值
3.表格填充具体代码最后，填入各单元格的具体内容，根据需要修正属性并
完善代码。Cha3-5.htm文档最后内容如下：
<body> <table cellspacing=3 width=100% height=100%> <tr> <th colspan=2><font face="隶书" size=6 color=green>
<tr> <th></th> </tr>

<tr> <td> </td><th></th> </tr> 
<tr> <th></th> </tr>

</table>
第 11 页
2.设置表格属性根据各元素的特点和网页的整体布局，可基本定出表格的属性。
<td rowspan=2>计算机基础</td> <td>92</td> </tr>
<tr align=center> <td>08003302</td>
<td>张鸿</td> <td>85</td>
</tr>
<tr align=center>
<td rowspan=2>网络<br>一班</td> <td>08003331</td> <td>李晓娟</td> <td rowspan=2>网络编程</td> <td>73</td> </tr> <tr align=center> <td>08003332</td> <td>刘刚</td> <td>90</td> </tr>
<tr> <td>08003302</td><td>张鸿</td><td>女</td> </tr>
</table>

<p> 
<table border=1 width=300 cellpadding=10 >
<tr> <td>学号</td> <th>姓名</th> <td>性别</td>
<caption>学生表</caption> 
<tr>
<th>学号</th>

<th>姓名</td>

<th>性别</td>

</tr>
<tr> <td>08003301</td><td>王明</td><td>男</td> </tr>
根据6个元素的布局，划分出网格如图3-8所示。虽然网页中只有6个元素，但有些元素需要占多个单元格，总共需要4行。
第 10 页
根据6个元素的布局，划分出网格如右图所示。
再根据各个元素所占位置，合并相关格子得到 6 个元素的单元格，如右图。
由上面分析可知，表格结构应该如下：
<table>
<tr> <th></th><th></th> </tr> 
第5页
设置单元格背景图片
属性值像素值或百分比像素值或百分比颜色值，默认值为白色 left(默认)、center、right top、middle(默认)、bottom 颜色值，默认值为黑色同页面背景图片设置
【例3-2】<table>属性设置示例
<body>

<table border=10 width=90% cellspacing=10 >
创建HTML表格需要使用下列标签：
(1) <table>、</table> —— 表格标签对，用于定义一个表格； (2) <tr>、</tr> —— 行标签对，用于定义一个行，只能嵌套在表格标签对中 (3) <td>、</td> —— 单元格标签对，用于定义一个单元格，只能嵌套在
行标签对中。<td>、</td>中放单元格内容，即要显示的数据。
在HTML中，就是使用指定单元格占多行或多列来创建跨多行或多列的单元格，即合并单元格。
<th>、<td> 标签都有指定单元格占的行数或列数的属性： colspn属性 —— 设置单元格占的列数，默认值是1。
例：<td colspan=3>…</td>，指定单元格占3列。 rowspan属性 —— 设置单元格占的行数，默认值是1。
第3章表格、表单及框架 3.1 表格 3.2 表单 3.3 框架
第1页
3.1 表格
3.1.1 表格的基本结构
用表格显示信息条理清楚，使浏览者一目了然。表格在网页中还有协助布局的作用，可以把文字、图像、声音甚至视频，或者另一个表格，组织到表格的不同行列中，以制作整齐、清晰的页面。
HTML具有强大的建立、显示表格的功能。 HTML的表格由行和列组成，每一行的一个列就是一个单元格，如右图所示：
<th colspan=2>成绩</th>
</tr>
<tr> <th>班级</th> <th>学号</th> <th>姓名</th>
<th>课程</th> <th>分数</th> </tr>
<tr align=center>
<td rowspan=2>计算机 <br> 一班</td>
<td>08003301</td> <td>王明</td>
<th></th> —— 要突出某个单元格内容，只要将希望突显内容的单元格标签对<td>、</td>改用表头单元格标签对<th>、 </th>即可，甚至只需要将<td>改为<th>就可以了。
第4页
3.1.2 表格的常用属性
1. <table>的常用属性
属性
用途
border
设置边框的宽度
bordercolor 设置边框的颜色
left、center、right
2. 行、单元格的常用属性
属性
用途
width
设置行或单元格的宽度
height
设置行或单元格的高度
bgcolor
设置行或单元格背景颜色
align
单元格中内容的水平对齐方式
valign
单元格中内容的垂直对齐方式
bordercolor 设置单元格边框的颜色
background
第2页
3.1.1 表格的基本结构
【例3-1】创建一个简单表格，放一组学生信息。
<html><head><title>简单表格示例</title></head>
<body>
<table > <tr>
 
<td>学号</td>

</table>
</body>
第9页
3.1.4 利用表格布局网页示例
使用表格设计网页格局，布局比较规则、容易，也使网页看上去更加整齐。表格布局中，不同的对象放在各自的单元格中，可以对它们进行不同的处理，而不用担心不同对象之间的影响。
【例3-5】利用表格布局创建如图所示网页
1.根据网页中元素设计表格网页中有以下6个元素： ① 网页标题“网页编程学习网站”； ② 带学位帽人图片，文件是“a1.gif”； ③ 装饰条图片，文件是“a2.gif”； ④ 竹子图片，文件是“a3.gif”； ⑤ 文字“如今…”； ⑥ 文字超链接“点击进入” (为简化,并不真链接)。
 
</tr>
<tr> <td>08003301</td><td>王明</td><td>男</td> </tr>
<tr> <td>08003302</td><td>张鸿</td><td>女</td> </tr>
</table>

</body> 第 6 页
【例3-3】设置行及单元格的对齐方式示例
<body>
<table border>
<caption valign=top>行、单元格的对齐方式</caption>
<tr> <th></th>
<th>表头行单元2</th>
<th>表头行单元3</th>
<th>表头行单元4</th> </tr>