网页设计_表格、表单和框架
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第2页
3.1.1 表格的基本结构
【例3-1】创建一个简单表格，放一组学生信息。
<html><head><title>简单表格示例</title></head>
<body>
<table > <tr>
<!-- 定义一个表 --> <!-- 定义一行表格(第1行) -->
<td>学号</td>
<!-- 第1行的第1列 -->
设自己的Web站点，编写自己的Web网页。HTML正是创建网页的 基础语言。</th> </tr> <tr> <th colspan=2><a href="">点击进入</a> </th> </tr> </table> </body>
<tr> <td>08003302</td><td>张鸿</td><td>女</td> </tr>
</table>
<!-- 表格1结束 -->
<p> <!-- 表格2 -->
<table border=1 width=300 cellpadding=10 >
<tr> <td>学号</td> <th>姓名</th> <td>性别</td>
根据6个元素的布局，划分出网格如图3-8所示。虽然网页中只有6个元 素，但有些元素需要占多个单元格，总共需要4行。
第 10 页
根据6个元素的布局， 划分出网格如右图所示。
再根据各个元素所占位置，合并相关格子得到 6 个元素的单元格，如右图。
由上面分析可知，表格结构应该如下：
<table>
<tr> <th></th><th></th> </tr> <!-- 第1行有2个元素 -->
<td>水平<br>左对齐</td>
<td>水平左对齐</td>
<td align=right width=150 >水平右对齐</td> </tr>
<tr height=80>
<!-- 第3行水平左对齐 -->
<th>第3行<br>高80</th>
<td valign=bottom>垂直底对齐</td>
在HTML中，就是使用指定单元格占多行或多列来创建跨多行或多列的单元格， 即合并单元格。
<th>、<td> 标签都有指定单元格占的行数或列数的属性： colspn属性 —— 设置单元格占的列数，默认值是1。
例：<td colspan=3>…</td>，指定单元格占3列。 rowspan属性 —— 设置单元格占的行数，默认值是1。
<td>姓名</td>
<td>性别</td>
<!-- 第1行的第3列 -->
</tr>
<tr>
<!-- 定义第2行 -->
<td>08003301</td><td>王明</td><td>男</td>
</tr>
<tr>
<!-- 定义第3行 -->
<td>08003302</td><td>张鸿</td><td>女</td>
3.表格填充具体代码 最后，填入各单元格的具体内容，根据需要修正属性并
完善代码。Cha3-5.htm文档最后内容如下：
<body> <table cellspacing=3 width=100% height=100%> <tr> <th colspan=2><font face="隶书" size=6 color=green>
<td valign=top>垂直<br>顶对齐</td>
<td valign=middle>垂直中对齐</td> </tr>
</table>
</body>
第7页
3.1.3 合并单元格
日常使用的表格中，常有些格子需要跨多行或多列，例如下面的学生表。
实际上，跨多列的格子就是将一行的多个格子合并到一起，也就是该格子占多列。 类似地，跨多行的格子就是将一列的多个格子合并到一起，也即该格子占多行。于是，
<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>
<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 >   如今，公司、企业和个人都在建
bgcolor
设置背景颜色
background 设置背景图片
width
设置表格的宽度
height
设置表格的高度
cellspacing 设置表格中格子间的空隙
cellpadding 设置表格的格子中内容与边框间的空隙
align
设置表格在网页中的位置(左,中,右）
属性值
像素值，默认值为1 颜色值，默认值为黑色 颜色值，默认值为白色 同页面背景图片设置 像素值或占窗口的百分比 像素值或占窗口的百分比 像素值 像素值
<!-- 普通单元格 --> <!-- 表头单元格 -->
</tr>
<tr> <td>08003301</td><td>王明</td><td>男</td> </tr>
<tr> <td>08003302</td><td>张鸿</td><td>女</td> </tr>
</table>
<!-- 表格2结束 -->
left、center、right
2. 行、单元格的常用属性
属性
用途
width
设置行或单元格的宽度
height
设置行或单元格的高度
bgcolor
设置行或单元格背景颜色
align
单元格中内容的水平对齐方式
valign
单元格中内容的垂直对齐方式
bordercolor 设置单元格边框的颜色
background
创建HTML表格需要使用下列标签：
(1) <table>、</table> —— 表格标签对，用于定义一个表格； (2) <tr>、</tr> —— 行标签对，用于定义一个行，只能嵌套在表格标签对中 (3) <td>、</td> —— 单元格标签对，用于定义一个单元格，只能嵌套在
行标签对中。<td>、</td>中放单元格内容，即要显示的数据。
<th></th> —— 要突出某个单元格内容，只要将希望突显内 容的单元格标签对<td>、</td>改用表头单元格标签对<th>、 </th>即可，甚至只需要将<td>改为<th>就可以了。
第4页
3.1.2 表格的常用属性
1. <table>的常用属性
属性
用途
border
设置边框的宽度
bordercolor 设置边框的颜色
第3章 表格、表单及框架 3.1 表格 3.2 表单 3.3 框架
第1页
3.1 表格
3.1.1 表格的基本结构
用表格显示信息条理清楚，使浏览者一目了然。表格在网页中还有协助布 局的作用，可以把文字、图像、声音甚至视频，或者另一个表格，组织到表格 的不同行列中，以制作整齐、清晰的页面。
HTML具有强大的建立、显示表格的功能。 HTML的表格由行和列组成， 每一行的一个列就是一个单元 格，如右图所示：
<caption>学生表</caption> <!-- 定义表格标题 -->
<tr>
ቤተ መጻሕፍቲ ባይዱ
<th>学号</th>
<!-- 表头单元格 -->
<th>姓名</td>
<!-- 表头单元格 -->
<th>性别</td>
<!-- 表头单元格 -->
</tr>
<tr> <td>08003301</td><td>王明</td><td>男</td> </tr>
</table>
</body>
第9页
3.1.4 利用表格布局网页示例
使用表格设计网页格局，布局比较规则、容易，也使网页看上去更加整齐。 表格布局中，不同的对象放在各自的单元格中，可以对它们进行不同的处理， 而不用担心不同对象之间的影响。
【例3-5】利用表格布局创建如图所示网页
1.根据网页中元素设计表格 网页中有以下6个元素： ① 网页标题“网页编程学习网站”； ② 带学位帽人图片，文件是“a1.gif”； ③ 装饰条图片，文件是“a2.gif”； ④ 竹子图片，文件是“a3.gif”； ⑤ 文字“如今…”； ⑥ 文字超链接“点击进入” (为简化,并不真链接)。
</tr>
</table>
<!-- 表格结束 -->
</body></html>
第3页
常见的表格上面往往有个标题，第一行(表头)也常常用突出的字 体(如黑体、粗体等)等来显示，以突显其内容。这些在HTML表格中 可以利用表格下面两个标签来实现：
<caption></caption> —— 标题标签对，用于定义一个表格标 题，它只能放在<table>标签对中，并在<tr>之前。<caption> 的align、valign属性用于设置标题的对齐方式，取值同<td>， 默认在表的上方中间。
<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>
例：<td rowspan=2>…</td>，指定单元格占2行。
第8页
【例3-4】创建前面所示的学生表表格
<body>
<table border cellspacing=0 > <caption valign=top>学生表</caption>
<tr> <th colspan=3>基本信息</th>
设置属性后的表格结构如下：
<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>
<tr align=right>
<!-- 第1行水平右对齐-->
<th>第1行<br>水平右对齐</th>
<td>水平<br>右对齐</td>
<td>水平右对齐</td>
<td align=center>水平中对齐</td> </tr>
<tr>
<!-- 第2行水平左对齐 -->
<th align=left>第2行<br>水平左对齐</TH>
第5页
设置单元格背景图片
属性值 像素值或百分比 像素值或百分比 颜色值，默认值为白色 left(默认)、center、right top、middle(默认)、bottom 颜色值，默认值为黑色 同页面背景图片设置
【例3-2】<table>属性设置示例
<body>
<!-- 表格1 -->
<table border=10 width=90% cellspacing=10 >
</body> 第 6 页
【例3-3】设置行及单元格的对齐方式示例
<body>
<table border>
<caption valign=top>行、单元格的对齐方式</caption>
<tr> <th></th>
<th>表头行单元2</th>
<th>表头行单元3</th>
<th>表头行单元4</th> </tr>
<tr> <th></th> </tr>
<!-- 第2行有1个元素,占整行 -->
<tr> <td> </td><th></th> </tr> <!-- 第3行第1单元格占2行 -->
<tr> <th></th> </tr>
<!-- 第4行只剩1个元素 -->
</table>
第 11 页
2.设置表格属性 根据各元素的特点和网页的整体布局，可基本定出表格的属性。
3.1.1 表格的基本结构
【例3-1】创建一个简单表格，放一组学生信息。
<html><head><title>简单表格示例</title></head>
<body>
<table > <tr>
<!-- 定义一个表 --> <!-- 定义一行表格(第1行) -->
<td>学号</td>
<!-- 第1行的第1列 -->
设自己的Web站点，编写自己的Web网页。HTML正是创建网页的 基础语言。</th> </tr> <tr> <th colspan=2><a href="">点击进入</a> </th> </tr> </table> </body>
<tr> <td>08003302</td><td>张鸿</td><td>女</td> </tr>
</table>
<!-- 表格1结束 -->
<p> <!-- 表格2 -->
<table border=1 width=300 cellpadding=10 >
<tr> <td>学号</td> <th>姓名</th> <td>性别</td>
根据6个元素的布局，划分出网格如图3-8所示。虽然网页中只有6个元 素，但有些元素需要占多个单元格，总共需要4行。
第 10 页
根据6个元素的布局， 划分出网格如右图所示。
再根据各个元素所占位置，合并相关格子得到 6 个元素的单元格，如右图。
由上面分析可知，表格结构应该如下：
<table>
<tr> <th></th><th></th> </tr> <!-- 第1行有2个元素 -->
<td>水平<br>左对齐</td>
<td>水平左对齐</td>
<td align=right width=150 >水平右对齐</td> </tr>
<tr height=80>
<!-- 第3行水平左对齐 -->
<th>第3行<br>高80</th>
<td valign=bottom>垂直底对齐</td>
在HTML中，就是使用指定单元格占多行或多列来创建跨多行或多列的单元格， 即合并单元格。
<th>、<td> 标签都有指定单元格占的行数或列数的属性： colspn属性 —— 设置单元格占的列数，默认值是1。
例：<td colspan=3>…</td>，指定单元格占3列。 rowspan属性 —— 设置单元格占的行数，默认值是1。
<td>姓名</td>
<td>性别</td>
<!-- 第1行的第3列 -->
</tr>
<tr>
<!-- 定义第2行 -->
<td>08003301</td><td>王明</td><td>男</td>
</tr>
<tr>
<!-- 定义第3行 -->
<td>08003302</td><td>张鸿</td><td>女</td>
3.表格填充具体代码 最后，填入各单元格的具体内容，根据需要修正属性并
完善代码。Cha3-5.htm文档最后内容如下：
<body> <table cellspacing=3 width=100% height=100%> <tr> <th colspan=2><font face="隶书" size=6 color=green>
<td valign=top>垂直<br>顶对齐</td>
<td valign=middle>垂直中对齐</td> </tr>
</table>
</body>
第7页
3.1.3 合并单元格
日常使用的表格中，常有些格子需要跨多行或多列，例如下面的学生表。
实际上，跨多列的格子就是将一行的多个格子合并到一起，也就是该格子占多列。 类似地，跨多行的格子就是将一列的多个格子合并到一起，也即该格子占多行。于是，
<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>
<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 >   如今，公司、企业和个人都在建
bgcolor
设置背景颜色
background 设置背景图片
width
设置表格的宽度
height
设置表格的高度
cellspacing 设置表格中格子间的空隙
cellpadding 设置表格的格子中内容与边框间的空隙
align
设置表格在网页中的位置(左,中,右）
属性值
像素值，默认值为1 颜色值，默认值为黑色 颜色值，默认值为白色 同页面背景图片设置 像素值或占窗口的百分比 像素值或占窗口的百分比 像素值 像素值
<!-- 普通单元格 --> <!-- 表头单元格 -->
</tr>
<tr> <td>08003301</td><td>王明</td><td>男</td> </tr>
<tr> <td>08003302</td><td>张鸿</td><td>女</td> </tr>
</table>
<!-- 表格2结束 -->
left、center、right
2. 行、单元格的常用属性
属性
用途
width
设置行或单元格的宽度
height
设置行或单元格的高度
bgcolor
设置行或单元格背景颜色
align
单元格中内容的水平对齐方式
valign
单元格中内容的垂直对齐方式
bordercolor 设置单元格边框的颜色
background
创建HTML表格需要使用下列标签：
(1) <table>、</table> —— 表格标签对，用于定义一个表格； (2) <tr>、</tr> —— 行标签对，用于定义一个行，只能嵌套在表格标签对中 (3) <td>、</td> —— 单元格标签对，用于定义一个单元格，只能嵌套在
行标签对中。<td>、</td>中放单元格内容，即要显示的数据。
<th></th> —— 要突出某个单元格内容，只要将希望突显内 容的单元格标签对<td>、</td>改用表头单元格标签对<th>、 </th>即可，甚至只需要将<td>改为<th>就可以了。
第4页
3.1.2 表格的常用属性
1. <table>的常用属性
属性
用途
border
设置边框的宽度
bordercolor 设置边框的颜色
第3章 表格、表单及框架 3.1 表格 3.2 表单 3.3 框架
第1页
3.1 表格
3.1.1 表格的基本结构
用表格显示信息条理清楚，使浏览者一目了然。表格在网页中还有协助布 局的作用，可以把文字、图像、声音甚至视频，或者另一个表格，组织到表格 的不同行列中，以制作整齐、清晰的页面。
HTML具有强大的建立、显示表格的功能。 HTML的表格由行和列组成， 每一行的一个列就是一个单元 格，如右图所示：
<caption>学生表</caption> <!-- 定义表格标题 -->
<tr>
ቤተ መጻሕፍቲ ባይዱ
<th>学号</th>
<!-- 表头单元格 -->
<th>姓名</td>
<!-- 表头单元格 -->
<th>性别</td>
<!-- 表头单元格 -->
</tr>
<tr> <td>08003301</td><td>王明</td><td>男</td> </tr>
</table>
</body>
第9页
3.1.4 利用表格布局网页示例
使用表格设计网页格局，布局比较规则、容易，也使网页看上去更加整齐。 表格布局中，不同的对象放在各自的单元格中，可以对它们进行不同的处理， 而不用担心不同对象之间的影响。
【例3-5】利用表格布局创建如图所示网页
1.根据网页中元素设计表格 网页中有以下6个元素： ① 网页标题“网页编程学习网站”； ② 带学位帽人图片，文件是“a1.gif”； ③ 装饰条图片，文件是“a2.gif”； ④ 竹子图片，文件是“a3.gif”； ⑤ 文字“如今…”； ⑥ 文字超链接“点击进入” (为简化,并不真链接)。
</tr>
</table>
<!-- 表格结束 -->
</body></html>
第3页
常见的表格上面往往有个标题，第一行(表头)也常常用突出的字 体(如黑体、粗体等)等来显示，以突显其内容。这些在HTML表格中 可以利用表格下面两个标签来实现：
<caption></caption> —— 标题标签对，用于定义一个表格标 题，它只能放在<table>标签对中，并在<tr>之前。<caption> 的align、valign属性用于设置标题的对齐方式，取值同<td>， 默认在表的上方中间。
<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>
例：<td rowspan=2>…</td>，指定单元格占2行。
第8页
【例3-4】创建前面所示的学生表表格
<body>
<table border cellspacing=0 > <caption valign=top>学生表</caption>
<tr> <th colspan=3>基本信息</th>
设置属性后的表格结构如下：
<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>
<tr align=right>
<!-- 第1行水平右对齐-->
<th>第1行<br>水平右对齐</th>
<td>水平<br>右对齐</td>
<td>水平右对齐</td>
<td align=center>水平中对齐</td> </tr>
<tr>
<!-- 第2行水平左对齐 -->
<th align=left>第2行<br>水平左对齐</TH>
第5页
设置单元格背景图片
属性值 像素值或百分比 像素值或百分比 颜色值，默认值为白色 left(默认)、center、right top、middle(默认)、bottom 颜色值，默认值为黑色 同页面背景图片设置
【例3-2】<table>属性设置示例
<body>
<!-- 表格1 -->
<table border=10 width=90% cellspacing=10 >
</body> 第 6 页
【例3-3】设置行及单元格的对齐方式示例
<body>
<table border>
<caption valign=top>行、单元格的对齐方式</caption>
<tr> <th></th>
<th>表头行单元2</th>
<th>表头行单元3</th>
<th>表头行单元4</th> </tr>
<tr> <th></th> </tr>
<!-- 第2行有1个元素,占整行 -->
<tr> <td> </td><th></th> </tr> <!-- 第3行第1单元格占2行 -->
<tr> <th></th> </tr>
<!-- 第4行只剩1个元素 -->
</table>
第 11 页
2.设置表格属性 根据各元素的特点和网页的整体布局，可基本定出表格的属性。