项目三 公告栏的设计
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<tr> <td>红酒</td>
</tr> <td width="79">白酒</td>
</tr> <tr> <td>化妆品</td> </tr>
<tr> <td>家具</td> </tr>
<tr> <td>灯具</td> </tr> </table></table> </body> </html>
<tr> <td>第 1 个单元格的内容</td> <td>第 2 个单元格的内容</td>
...... </tr>
<tr> <td>第 1 个单元格的内容</td> <td>第 2 个单元格的内容</td>
...... </tr>
</table>
3.1.2 表格的基本结构
表格是网页中常用的信息组织方式，它是有指定数目的行和列组成，文字和图片按照相 应的行和列进行分类和显示。表格都有若干行（<tr>），这些行又被分成若干单元格（<td>）。 单元格的内容可以是文字、图像、列表、表格等。
<tr><td colspan="3">学生成绩</td></tr> <tr>
<td>语文</td> <td>98</td>
</tr> <tr>
<td>数学</td><td>95</td> </tr> </table> </body> </html> 浏览页面，其效果如图 7-2 所示：
3.2.2 跨行
<table border="2"> <tr> <td>1 行 1 列的单元格</td> <td>1 行 2 列的单元格</td> <td>1 行 3 列的单元格</td> </tr> <tr> <td>2 行 1 列的单元格</td> <td>2 行 2 列的单元格</td> <td>2 行 3 列的单元格</td> </tr>
同；
表格中常用的标签还有：
（1）<th> 用于定义表头，其中的字体显示为加粗； （2）<caption> 用于定义表格的标题，要写在<table>和第一个<tr>之间。 创建表格分为三步：
（1）创建表格标签 （2）在表格标签中创建行标签，可以有多行。 （3）在行标签中创建单元格标签，可以有多个单元格。
图 3-5 表格的高级标签
3.3 表格布局
3.3.1 应用场景
表格布局最典型的应用有图文布局和表单布局。 1、图文布局 将图像和文本都看成单元格的组成内容，然后设置他们所占的行数和列数。 2、表单布局 将表单中每一项看成一行，每一项的标题显示的同一列，填写的信息和提示信息也分别 显示在同一列的布局方式。
</tr> <tr>
<td rowspan="4"><img src="images/a_left.jpg" alt="公告左侧图" /></td> <td width="79">电视</td> </tr> <tr> <td>手机</td> </tr> <tr> <td>笔记本</td> </tr>
表格中常用的标签还有：
（1）<th> 用于定义表头，其中的字体显示为加粗； （2）<caption> 用于定义表格的标题，要写在<table>和第一个<tr>之间。
属性：
（1）width 宽度，其值为尺寸值； （2）height 高度，其值为尺寸值； （3）border 边框宽度，其值为尺寸值，默认为 0（无边框）； （4）cellpadding 单元格内边距，其值为尺寸值； （5）cellspacing 单元格间距，其值为尺寸值； （6）colspan 横跨列数，其值为整数； （7）rowspan 横跨行数，其值为整数； （8）align 定义单元格内内容的相对位置，其值与<img>相应的值相同； （9）bgcolor 定义表格、行、列或单元格的背景颜色，其值为颜色值 （10）background 定义表格、行、列或单元格的背景图像，其值与<img>的 src 属性相
</table> </body> </html> 浏览页面，其效果如图 3-1 所示
图 3-1 基本表格
3.2 跨行跨列表格
对于比较复杂的表格，需要实现 跨行跨列。
3.2.1 跨列
跨列是指单元格的横向合并，其语法如下： <table width="500" border="1">
<tr> <td rowspan="所跨列数">单元格内容</td>
为了显示表格的轮廓，一般需要设置<table>标签的”border”边框属性，指定边框的宽 度。
【案例 3-1】表格结构 <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>基本表格</title> </head> <body>
单元格：表格的最小单位，一个或多个单元格纵横排列组成单元格。 行：一个或多单元格横向堆叠形成行 列：由于单元格的宽度必须一致，所以单元格总线划分形成了列。
3.1.3 表格的基本语法
创建表格的语法： <table>
<tr> <td>第 1 个单元格的内容</td>
<td>第 2 个单元格的内容</td> ...... </tr>
<tr> <td>5 月</td> <td>100</td> </tr> <tr> <td>6 月</td> <td>200</td> </tr> </tbody> <tfoot style="background: #FF0">
<tr> <td>平均月收入</td> <td>196.67</td> </tr> <tr> <td>总计</td> <td>1180</td> </tr> </tfoot> </table> </body> </html> 浏览页面，其效果如图 3-5 所示
<table width="200" border="1"> <tr>
<td colspan="3">学生成绩</td>
</tr> <tr>
<td rowspan="2">张三</td>
<td>语文</td> <td>98</td>
</tr> <tr>
<td>数学</td> <td>95</td>
3、表格的分组标签<thead>、<tbody>、<tfooter> 分组标签标签一般配合使用，对报表数据进行逻辑分组，<thend>标签对应报表的页眉， 即表格的表头部分；<tbody>对应报表的数据主体，即详细的数据描述部分；<tfooter>对应 报表的页脚，即对各分组数据进行汇总的部分。各分组标签内由多行<tr>组成。 【案例 3-5】年终数据报表 <html xmlns="/1999/xhtml"> <head> <title>等分组用法</title> </head> <body> <table width="100%"> <caption>年终数据报表</caption>
项目三 公告栏的设计----表格的应用和布局
项目任务 （1）制作表格图文布局--公告栏页面 （2）制作表格布局表单页面--登录页面 项目目标 （1）使用表格显示数据 （2）使用表格实现页面布局
3.1 表格基础
3.1.1 为什么要使用表格
1、简单通用 由于表格行列的简单结构，且在生活中的广泛使用，对他的理解和编写都很方便。 2、结构稳定 表格每行的列数通常一致，同行单元格高度一致且水平对齐，同列单元格的宽度一致且 垂直对齐。这种严格的约束形成一个不容易变形的长方形结构，堆叠排列起来结构稳定。 语法： <table>
图 7-2 跨列的表格 图 3-3 跨行的表
3.2.3 跨行跨列
表格中既有跨行也有跨列的情况。 【案例 3-4】跨行跨列的表格 <html xmlns="/1999/xhtml"> <head> <title>跨行跨列的表格</title> </head> <body>
3.3.2 图文布局
图文布局常用于局部布局。比如公告栏。 【案例 3-6】图文布局 <html xmlns="/1999/xhtml"> <head> <title>买卖公告栏</title> </headx">
<tr> <td colspan="2"><img src="images/a_title.jpg" alt="公告栏" /></td>
在具体设计表格时，一般采用以下步骤：
（1）分析并确定表格的行列数，分析时以最小单元格作为依据。只有该单元格不存在
跨行合伙跨列即是最小单元格。
（2）编写对应 m 行 n 列的 表格。在表格中可以设置 border 属性，可以加空格 
对齐文字。
（3）确定合并单元格 （4）增加 colspan 及 rowspan 属性。 （5）设置 border 和 width 属性。
<tr> <td rowspan="2">张三</td> <td>语文</td><td>98</td>
</tr> <tr>
<td>数学</td><td>95</td> </tr> <tr>
<td rowspan="2">李四</td> <td>语文</td><td>88</td> </tr> <tr> <td>数学</td><td>91</td> </tr> </table> </body> </html> 浏览页面，其效果如图 3-3 所示
跨行是指单元格垂直方向合并，其语法如下： <table >
<tr> <td rowspan="所跨的行数">单元格内容</td>
</tr> </table> 【案例 3-3】跨行的表格 <html xmlns="/1999/xhtml"> <head> <title>跨行跨列的表格</title> </head> <body> <table width="200" border="1">
跨行跨列后，不改变表格的特点，同行的总高度一致，同列的总宽度一致。表格各单元
格的高度或宽度互相影响，结构相对稳定，但缺点是不能灵活地进行布局控制。
3.2.4 表格的高级标签
1、表格标题<caption> 用于描述整个表格的标题
2、表格头 <th> 用于定义表格的表头，一般表格的第一行数据，以粗体、居中方式显示。
</tr> </table> Colspan:col 列的缩写，span：跨度 【案例 3-2】跨列表格 <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>跨行跨列的表格</title> </head> <body> <table width="200" border="1">
</tr> <tr>
<td rowspan="2">李四</td>
<td>语文</td> <td>88</td>
</tr> <tr>
<td>数学</td> <td>91</td>
</tr> </table> </body> </html>
浏览页面，其效果如图 3-4 所示：
图 3-4 跨行跨列的表格
<tr> <td>第 1 个单元格的内容</td> <td>第 2 个单元格的内容</td>
...... </tr>
</table> 其中：<table>...</table> 表格标签