第7章表格清华大学出版社.

Slides:

Advertisements

Similar presentations

第5章表格的设计与制作. 内容提要表格的创建、编辑表格的属性设置特效表格的制作布局表格的基本操作表格和布局表格的应用.

Advertisements

Web 开发基础第二章表格与页面布局. 回顾 Internet 和万维网网页的工作原理网页的基本结构标记及其属性段落标记，图片标记，超级链接标记相对路径，绝对路径，物理路径.

教师资格定期注册申请人工作流程. 注意事项： 1. 申请人拟进行定期注册的教师资格证书的资格种类或任教学科与申请人现任教学段所对应的资格种类或现任教学科不一致的，在填写教师资格证书信息时， “ 资格种类 ” 和 “ 任教学科 ” 项须如实按照证书上的内容填写（不得填写申请人现任教学段所对应的资格种类或现任教学科）；

慢性病防治與運動你今天運動了嗎？.

HyperText Markup Language

第六章网页设计与制作基础.

ASP.NET 網頁製作教本 -- 從基本語法學起

第八章：网络应用制作技术本章介绍网络各种应用中所涉及的基本概念和制作技术，包括HTML、网页的制作、Java、Java Script语言的初步基础，VRML语言的基本功能，以及网络环境下分布式数据库系统和客户服务体系的构造方法及技术。

HTML第一课李伟 HTML开发语言基础.

第5章 HTML 標籤介紹.

佛山科学技术学院第7章 HTML Internet及多媒体应用.

第8讲 HTML与PHP基础静态网页 vs. 动态网页.

动态网页制作第1章 HTML语言1.

HTML概念 HTML（Hyper Text Markup Language 超文本标识语言）是一种用来制作超文本文档的简单标记语言。

第三讲站点链接与表格布局.

教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页.

北京学生海洋意识教育年主题系列活动竞赛报名系统

DREAMWEVAER MX 2004入门楼斌 BBS ID：lou 生命科学学院

网页设计与制作.

第8章 CSS基础知识【学习目标】对于一个网页设计者来说，对HTML语言一定不感到陌生，因为它是网页制作的基础，但是如果希望网页能够美观、大方，并且升级维护方便，那么仅仅知道HTML还是不够的，还需要了解CSS。了解CSS基础知识，可以为后面的学习打下基础。本章主要内容包括：为什么在网页中加入CSS。

2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤

第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口

模块1 网页设计基础实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件

使用HTML製作個人網頁柴惠敏台灣大學物理治療學系.

第二部分 HTML语言控制本次课的主要内容： 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用

HTML 語法教學授課：彭穎聰老師.

国开学习网/形考模块

第6章网页图像处理通过本章学习，应该掌握以下内容：能够选择合适的网页颜色了解网页图像的基本格式掌握使用网页图像的要点

数据访问页.

CT212 (02/03)-Network Programming and design

網際網路的應用服務 – Web 概念與網頁語言

第二章網際網路網頁的設計.

ASP动态网页设计实用教程主讲教师：开课单位:.

　　本章共分21个实例，主要内容包括HTML 创建与测试、html的文档结构、常用标记的使用、表格和层的使用技灵活掌握等内容。

第3章超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>

CSS简介 WEB前端三剑客之二.

建國技術學院資訊管理學系饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班建國技術學院資訊管理學系饒瑞佶 2004/7/5.

PHP程式設計二、HTML & PHP基本語法建國科技大學資訊管理學系饒瑞佶.

湖北职院计科系.

教師: 陳明瑤電郵: 網際網路應用-網頁設計3 教師: 陳明瑤電郵:

行政院研究發展考核委員會【網頁無障礙設計】說明會

HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法

網路概念 APACHE PHP MYSQL HTML BY 董仔 08/01/14.

HTML 钟晖云 QQ：

Ch.13 HTML網頁實作.

第2章超文本标记语言HTML.

8 网页制作基础知识赵国庆博士北京师范大学教育技术学院

Ch03 HTML5 + CSS 表格與多媒體網頁程式設計.

無障礙網頁公關室.

授课教师：姬广永 QQ: TEL: 学习交流网站:

主讲：陶建平华中科技大学网络与计算中心

W3C标准网页制作主讲教师：张涛.

W3C标准网页制作主讲教师：张涛.

武汉纺织大学传媒学院 cm.wtu.edu.cn

W3C标准网页制作主讲教师：张涛.

Open方法和close方法主讲人：傅伟玉.

程式語言與邏輯高慧君　台北市立南港高中 2006年12月22日.

HTML – 表格資訊教育.

表格页面表格标签 1、标题标签<Caption>用于定义表格的标题。 align属性：控制标题位置。取值为：

網站(web) 授課:方順展.

布局大师——表格.

第6章框架实现多窗口网页.

表格 (Table).

第2章块级标签经济管理学院.

PHP5與MySQL5 入門學習指南凱文瑞克著第 12 章迴圈指令.

教师：李金双网页制作教师：李金双

Presentation transcript:

第7章表格清华大学出版社

主要内容熟悉表格的常用属性，制作表格利用表格来容纳表格式数据利用表格进行页面的排版布局

6.1表格简介表格在网站应用中非常广泛，几乎所有的HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中定位，使浏览页面的人一目了然，赏心悦目。所以说要制作好网页，就要学好表格，熟练掌握和运用表格的各种属性。

6.2.1表格基本标记在HTML语法中，表格主要通过3个标签来构成：<table>、<tr>、<td>。基本语法： <table> <tr> <td>…</td> … </tr> </table>

6.2.1表格基本标记  <html> <head> <title>定义表格</title> </head> <body> <table width="600" border="1"> <tr>  <td>节次</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> </tr> <tr>

6.2.1表格基本标记 <td>第12节</td> <td>体育</td> <td>Web开发</td> </tr> <tr>  <td>第34节</td> <td>数据结构</td> <td>Web开发实验</td> </table> </body> </html>

6.2.1表格基本标记

6.2.2表格标题表格标题，就是对表格内容的简单说明，用<caption>标签实现。基本语法： <caption>…</caption>

6.2.2表格标题  … <table width="600" border="1"> <caption>课程表</caption> <tr>  <td>节次</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> </tr> </table

6.2.2表格标题

6.2.3表格表头表头，指表格的第一行，文字样式为居中、加粗显示，通过<th>标签实现。基本语法： <table> <tr> <th>…</th> … </tr> <td>…</td> </table>

6.2.3表格表头  … <table width="600" border="1"> <caption>课程表</caption> <tr>  <th>节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </table>

6.2.3表格表头

6.2.4设置划分结构的表格 <thead>…</thead> 为了清楚区分表格结构，将一个表格分三个部分在网页上显示出来，HTML语言规定了<thead>、<tbody>、<tfoot>3个标签分别对应于表格的表首、表主体和表尾。基本语法： <thead>…</thead> <tbody>…</tbody> <tfoot>…</tfoot>

6.2.4设置划分结构的表格  <html> <head> <title>定义表格结构</title> </head> <body> <table width="600" border="1"> <caption>课程表</caption> <thead> <tr> <th>节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </thead> <tfoot>  <tr><td colspan="6">适用时间：2008~2009第一学期083007班</td></tr> </tfoot>

6.2.4设置划分结构的表格 <tbody>  <tr> <td>第12节</td> <td>体育</td> <td>大学英语</td> <td>高等数学</td> <td>数据结构实验</td> <td>Web开发</td> </tr> <td>第34节</td> <td>数据结构</td> <td>Web开发实验</td> </tbody> </table> </body> </html>

6.2.4设置划分结构的表格

6.3表格修饰表格是网页布局中的重要元素，它有丰富的属性，可以对其进行相关设置。

6.3.1设置表格的边框属性默认情况下表格边框为0，可以通过给表格添加属性及属性值，实现为表格设置边框线以及美化表格的目的，常见属性如表6-3所示。基本语法： <table border=” ” bordercolor=” ” bordercolorlight=” ” bordercolordark=” ” >

6.3.1设置表格的边框属性  … <table width="600" border="1" bordercolor ="#00FF00" bordercolorlight＝"#FF0000" bordercolordark="#0000FF"> </table>

6.3.2设置表格的宽度和高度默认情况下，表格的宽度和高度会根据内容自动调整。基本语法： <table width=” ” height=” ”>

6.3.2设置表格的宽度和高度  … <table width="600" height="200" border="1"> </table>

6.3.2设置表格的宽度和高度

6.3.3 设置表格背景表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。基本语法： <table bgcolor=” ”>

6.3.3 设置表格背景  … <table width="600" border="1" bgcolor="#f5f5dc"> </table>

6.3.4 设置表格的背景图像表格背景图像可以是GIF、JPEG或PNG三种图像格式。基本语法： <table backgruond=” ”>

6.3.4 设置表格的背景图像  … <table width="600" border="1" background ="kechengbiao.gif"> </table>

6.3.5 设置边框样式在前面我们使用border属性时，每个单元格之间以及表格本身会出现边框，我们可以利用frame属性控制应该显示哪些表格边框，利用rules属性控制应该显示哪些内部边框。基本语法： <table frame=” ” rules=” ”>

6.3.5 设置边框样式  … <table width=”600" border="1" frame="hsides" rules ="all"> </table>

6.3.5 设置边框样式

6.3.6 设置表格单元格间距通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。基本语法： <table cellspacing=" ">

6.3.6 设置表格单元格间距  … <table width="600" border="1" frame="hsides" rules ="all" cellspacing="15"> </table>

6.3.6 设置表格单元格间距

6.3.7设置表格单元格边距单元格边距是指单元格中的内容与单元格边框的距离。基本语法： <table cellpadding=" ">

6.3.7设置表格单元格边距  … <table width="600" border="1" frame="hsides" rules ="all" cellspacing="15" cellpadding="10"> </table>

6.3.7设置表格单元格边距

6.3.8设置表格的水平对齐属性在水平方向上，可以设置表格的对齐方式为：居左、居中、居右。如果没特别进行设置，则默认为居左排列。在水平方向上，可以设置表格的对齐方式为：居左、居中、居右。如果没特别进行设置，则默认为居左排列。基本语法： <table align=” ”>

6.3.8设置表格的水平对齐属性  … <table width="600" border="1" align="center"> </table>

6.4设置表格行的属性 6.4设置表格行的属性 <tr>的属性用于设定表格中某一行的属性。

6.4.1行内容水平基本语法： <tr align=” ”>…</tr> <!--程序6-13-> <html> <head> <title>设定表格水平对齐</title> </head> <body> <table width="600" border="1" align="center"> <caption>课程表</caption> <tr align="center"> <th>节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th>

6.4.1行内容水平 <th>星期五</th> <tr> <tr align="right"> <td>第12节</td> <td>体育</td> <td>大学英语</td> <td>高等数学</td> <td>数据结构实验</td> <td>Web开发</td> </tr> <tr>  <td>第34节</td> <td>数据结构</td> <td>Web开发实验</td> <tr><td colspan="6">适用时间：2008~2009第一学期083007班</td></tr> </table> </body> </html>

6.4.1行内容水平

6.4.2行内容垂直对齐基本语法： <tr valign=” ”>…</tr>  <html> <head> <title>设定表格行内容垂直对齐</title> </head> <body> <table width="600" height="200" border="1" align="center"> <caption>课程表</caption> <tr valign="top"> … <tr>

6.4.2行内容垂直对齐 <tr valign="bottom"> … </tr> <tr><td colspan="6">适用时间：2008~2009第一学期083007班</td></tr> </table> </body> </html>

6.4.2行内容垂直对齐

6.5 设置表格中某一单元格的属性 <td>的属性用于设定表格中某一单元格的属性

6.5.1设置单元格跨行单元格的rowspan属性可实现单元格的跨行合并（纵向合并）。基本语法： <td rowspan=” ”>…</td>

6.5.1设置单元格跨行  <html> <head> <title>设定跨行的表格</title> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" align="center"> <caption>课程表</caption> <tr> <th>节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <td>第12节</td> <td>体育</td>

6.5.1设置单元格跨行 <td>大学英语</td> <td>高等数学</td> <td rowspan=“2” valign=“middle”>数据结构</td>  <td>Web开发</td> </tr> <tr> <td>第34节</td> <td>数据结构</td>  <td>Web开发实验</td> <tr><td colspan="6">适用时间：2008~2009第一学期083007班</td></tr> </table> </body> </html>

6.5.1设置单元格跨行

6.5.2设置单元格跨列 colspan属性可以进行单元格的跨列合并（横向合并）。基本语法： <td colspan=" ">…</td>

6.5.2设置单元格跨列  <html> <head> <title>设定跨列的表格</title> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" align="center"> <caption>课程表</caption> <tr> <th>节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <tr>  <td>第12节</td> <td>体育</td> <td>大学英语</td> <td>高等数学</td>

6.5.2设置单元格跨列 <td colspan="2" align="center">数据结构</td>   </tr> <tr> <td>第34节</td> <td>大学英语</td> <td>高等数学</td> <td>数据结构</td> <td>数据结构实验</td> <td>Web开发实验</td> <tr><td colspan="6">适用时间：2008~2009第一学期083007班</td></tr> </table> </body> </html>

6.5.2设置单元格跨列

6.6表格嵌套表格嵌套就是根据插入元素的需要，在一个表格的某个单元格里再插入一个若干行和列的表格。对嵌套表格，可以像对任何其他表格一样进行格式设置，但是其宽度受它所在单元格的宽度的限制。利用表格的嵌套，一方面可以编辑出复杂而精美的效果，另一方面可根据布局需要来实现精确的编排。不过，需要注意的是，嵌套层次越多，网页的载入速度就会越慢。

6.6表格嵌套  <html> <head> <title>表格嵌套</title> </head> <body> <table width="700" border="1" cellpadding="0" cellspacing="0" align="center"> <caption>课程表</caption> <tr> <td width="100">083007班</td> <td>  <table width="100%" border="1" cellpadding="0" cellspacing="0" frame="void">

6.6表格嵌套 <th>节次</th> <th>星期一</th> <tr> <td>第12节</td> <td>体育</td> <td>大学英语</td> <td>高等数学</td> <td>数据结构</td> <td>Web开发</td> </tr>

6.6表格嵌套 <td>第34节</td> <td>大学英语</td> <td>Web开发实验</td> </tr> </table> </td> <tr> <td>083008班</td> <td> <!—此处省略了嵌套的课程表，内容同上--> </body> </html>

6.6表格嵌套

6.7小实例一些设计人员喜欢使用表格来进行页面布局，因为它的效果在不同的浏览器中更容易保持一致，虽然目前更流行的是利用“DIV+CSS”技术进行页面布局。

6.7小实例  <html> <head> <title>利用表格实现页面布局</title> </head> <body> <table border="1" width="650" align="center"> <tr> <td width="150" height="80">网站标志</td> <td colspan="2">广告条</td> </tr> <td> <table border="1" width=100% height="200">

6.7小实例 <tr><td> </td></tr> </table> </td> <td>内容一</td> <td>内容二</td> </tr> <tr> <td colspan="3" align="center">版权信息</td> </body> </html>

6.7小实例

小结本章主要介绍了表格制作时用到的常用属性以及取值情况，在这里提两点注意事项： 1. 在创建复杂的表格之前，最好对它进行规划，比如可以先用笔在纸上设计页面； 2. 使用表格排版网页时，要尽量细化表格，不要把整个网页放在一个大的表格里，因为表格内有一些载入较慢的元素（比如计数器）时，往往会延迟整个表格的显示。这是由 IE的显示特性决定的，只有当表格内所有元素全部载入后，整个表格才得以显示。针对这个特点，我们可以将整

小结个页面分成几块，例如通用的上(放置Logo、Banner、 Menu等等)、中(放置页面内容)、下(放置版权信息等等) 结构，将每一部分由单独的表格来实现，这样比较好。

Thank You ! www.hnufe.edu.cn