HTML标记功能详述

Download Report

Transcript HTML标记功能详述 

第三章
HTML标记功能详述
(第1部分)
本章要点
文本格式标记
文本修饰标记（字体标记）
列表标记
超链接标记
图像和多媒体标记
HTML标记基础
什么是标记？
 标记是网页文档中的一些有特定意义的符号。
这些符号指明如何显示文档中的内容。
 标记可以具有相应属性即各种参数，如size、
color、 text、 width和noshade等 。
 例如：<p>
<font size="+1" color="red"></font></p>
文本格式标记
网页中添加文本的方法
网页中添加文本的方法
文本格式标记是网页中定义文本格式的标记
1）直接写文本<div>文本</div>、<td>文本</td>、
<body>文本</body>、<li>文本</li> ；
2）用段落标记<p>……</p>格式化文本，各段落文本将分行
显示；
3）用标题标记<hn>……</hn>格式化文本，作用：定义第n
号标题字体，n=1~6，n值越大，字越小；文本将变为粗
体显示，可看成特殊的段落标记；
4) 用预格式化标记<pre>……</pre>格式化文本，标记内的
文本将按原来的格式显示，保留文本中的所有空格、换行
和定位符；
用标题标记<hn>……</hn>格式化文本
<h1>第1号标题字体</h1>
<h3>第3号标题字体</h3>
<h4>第4号标题字体</h4>
<h5 align="center">第5号标题字体（居中）
</h5>
标题标记和段落标记
<body>
<h1 align="center">1号标题</h1>
<p>第一段</p>
<h3>3号标题</h3>
<p>第二段</p>
<h5 align="right">5号标题</h5>
<p align="right">第三段</p>
</body>
用预格式化标记<pre>…</pre>格式文本
<pre>
网页设计师这一职业在今后来说还是有需
求的。
因为随着网络越来越普及，
像我国的房地产市场</pre>
文本的强制换行<br />
电子商务顾名思义就是在internet上做生意，<br />
商品展示，广告宣传、发布
供求信息等活动实现的途径就是网页。
强制不换行标记<nobr>……</nobr>，常用英文
人名
<nobr>Bill Gates</nobr>
文本中的空格
标记(<pre>除外)内字符前的空格浏览器将全部忽
略，字符与字符间的空格浏览器将只保留一个空
格显示，回车视为一个空格，
块级元素之间忽略所有空格。
如果要输入多个空格或需要在字符之前输入空格
需在源代码中插入&nbsp;（表示一个半角空格）。
行内元素可看成一个字符
文本中的转义字符
 在HTML源代码中，有些字符有特别的含义，比如小于
号“<”就表示HTML 标记的开始，html源代码中的“<”
是不会在浏览器中显示的，如果要浏览器显示这些字符，
就需要输出他们对应的转义字符。
 例如：&lt;表示< , &gt;表示> , &quot表示“ , &amp;
表示& , &nbsp;表示空格等；
通常，一个字符实体是由三部分组成的：
（1）一个“&”符号
（2）字符专用名称或者字符代号
（3）一个“;”符号
在DW的设计视图中输入这些特殊字符，DW会自动在代
码视图添加它们对应的转义字符
DW中插入HTML文本元素的快捷键
1. Enter 插入<p>&nbsp;</p> （硬回车）
2. shift＋enter 插入<br /> （软回车）
3. Ctrl＋shift＋space 插入一个&nbsp;
综合实例
<html>
<head> <title>分段换行与预格式</title> </head>
<body> <h3>以下是直接写文本的情况：</h3>
星期一、星期二、星期三、星期四、
星期五、星期六、星期日。
<h3>以下是使用了三个换行标记的情况：</h3>
星期一、星期二、<br />星期三、星期四、<br/>
星期五、星期六、星期日。<br />
<h3>以下使用分段标记（分为两段）：</h3>
<p>星期一、星期二、星期三、</p><p>星期四、
星期五、星期六、星期日。</p>
<h3>以下使用预格式：</h3>
<pre>
星期一、星期二、星期三、星期四、
星期五、星期六、星期日。 </pre>
</body></html>
跑马灯<marquee>标记
一个特殊的文本标记，能使其中的文本在浏览器
屏幕上不断滚动。
其中behavior=“alternate”设置滚动方式为来回滚
动，设置为scroll表示循环滚动，设置为slide表示
滚动到目的地就停止。direction属性用于控制滚
动的方向，可以上下滚动或左右滚动。loop设置
滚动的次数，loop为0表示不断滚动。
scrollamount属性设置滚动的速度，scrolldelay属
性设置两次滚动间的间隔时间。
<marquee>示例
<marquee direction="up" behavior="scroll"
scrollamount="10" scrolldelay="4" loop="-1"
align="middle" onmouseover=this.stop()
onmouseout=this.start() height="120">&nbsp;&nbsp;测试:
网页设计与制作学习：可以将swf文件下载下来用flash播
放器全屏播放以达到最好效果，也可以在IE浏览器中按
F11键达到全屏效果.
</marquee>
水平线标记<hr />
<hr/>标记是在HTML文档中加入一条水平线，它
可以直接使用，具有size、color、width和
noshade属性。size是设置水平线的厚度，而width
是设定水平线的宽度，默认单位是像素。noshade
属性用来加入一条没有阴影的水平线。
<hr size="3" width="85%" color =“red"
noshade="noshade" align="center" />
文本修饰标记（字体标记）
文本修饰标记
文本修饰标记是对文本的外观进行修饰的标记，
如让文字变色，加大，变粗体，添加下划线等。
1）font标记：定义文字的各种属性。
例：<font face="fontname" size= "n" color=
"#0066CC">……</font>
<!--face属性定义文字的字体，fontname为能获得
的字体名称；size属性定义文字的大小，n为正整
数，n值越大则字越大；color属性定义文字的颜
色，-->
加粗、倾斜与下划线标记
 2）加粗、倾斜与下划线的定义标记（b、i、u）
<b>……</b>
<!--加粗文字-->
<i>……</i>
<!--文字倾斜-->
<u>……</u>
<!--加下划线-->
<em>……</em> <!--加粗，倾斜-->
<strong>……</strong> <!--加粗文字-->
使用加粗、倾斜与下划线标记（b、i、u）的组合，可对文
本文字进一步修饰。
如：<b><font color="red" size="5">此处以红色五号字粗
体显示</font></b>
上标（sup）和下标（sub）标记
用于书写数学公式或分子式。
如：H<sub>2</sub>O <!--H2O-->
X<sup>2</sup>
<!--X2 -->
由于字体标记属于对文本外观进行修饰的标记，
是由于当时CSS语言尚未出现时html定义的表现
的范畴，随着CSS的出现，这些表现功能均可以
由CSS完成，所以不含有语义的字体标记慢慢过
时了。
列表标记
列表标记
为了合理地组织文本，网页中常常要用到列表。
在HTML中可以使用的列表标记有无序列表、有
序列表和定义列表三种。
无序列表(Unordered List) <ul>, <li>
有序列表(Ordered List) <ol>, <li>
定义列表(Defined List) <dl>, <dt>, <dd>
嵌套的无序列表示例
<ul id="nav">
<li><a href="">文章</a>
<ul>
<li><a href="">CSS教程</a> </li>
<li><a href="">DOM教程</a></li>
<li><a href="">XML教程</a></li>
</ul>
</li>
<li><a href="">参考</a>
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">XML</a></li>
<li><a href="">CSS</a></li>
</ul>
</li>
</ul>
有序列表(Ordered List)
<ul id="nav">
<li><a href="">文章</a>
<ol>
<li><a href="">CSS教程</a> </li>
<li><a href="">DOM教程</a></li>
<li><a href="">XML教程</a></li>
<li><a href="">Flash教程</a></li>
</ol>
</li></ul>
定义列表(Defined List)
<dl>
<dt>湖南城市</dt>
<dd>长沙</dd>
<dd>衡阳</dd>
<dd>常德</dd></dl>
<dl>
<dt>湖北城市</dt>
<dd>武汉</dd>
<dd>襄樊</dd>
<dd>宜昌</dd>
</dl>
超链接标记<a>
超链接标记<a>
超链接是网页的基本元素，网页正是通过超链接
而相互链接组织成一个网站，并将internet上的各
个网站联系在一起。浏览者通过超链接选择阅读
路径。
超链接是通过URL（统一资源定位器）来定位目
标信息的。URL包括4部分：网络协议、域名或
IP地址、路径和文件名。
URL分为绝对URL和相对URL
绝对URL
 绝对URL是采用完整的URL来规定文件在
internet上的精确地点，包括完整的协议类型、计
算机域名或IP地址、包含路径信息的文档名。书
写格式为：协议：//计算机域名或IP地址[/文档路
径]［/文档名］
例如：
http://www.hyshopgo.com/download/download.gif
相对URL
 相对URL是相对于包含超链接页的地点来规定文件的地点。
 如链接到同一路径下的文档，直接输入文件名即可，如
news.htm
 如链接到同一路径下子文件夹的文档，则先输入子文件夹
名和斜杠（/），再输入文件名，如yule/news.htm
 如链接到上一级路径中，要在文件名前输入“../”，如
“../news.htm”，其中“..”表示上级目录，“.”表示本级目
录。
相对URL示例
wgzx
oa.
htm
index
.htm
1
1.href="yule/news.htm"
2.href="../oa.htm"
3.href=“pop.htm”
yule
2
news
.htm
3
pop
.htm
相对URL的优势
可以看出相对URL方式比较简便，不需输入一长
串完整的URL；另外相对路径还有一个非常重要
的特点是：可以毫无顾忌地修改Web网站的域名
或网站在服务器硬盘中的存放目录。
超链接的种类－根据源对象划分
1) 用文本做超链接：
<a href="index.htm" target="_blank">首页</a>
2) 用图像做超链接：
<a href="index.htm"><img src="images/info.gif" title="返
回首页" border="0" /></a>
3) 文本图像混合做链接：
<a href="brand1.htm"><img src="green.gif" /><br />格力
空调1型</a>
使用图像做超链
该方法在商品展示的网站上较常用。
接后，图像会自
动增加边框，可
设置边框为0去掉
超链接的种类－根据源对象划分2
4) 热区链接：使用map在图像上定义一幅地图，地图上可包
含多个热区，每个热区用area单标记定义，area的shape属
性定义了热区的形状，coords定义了热区的坐标点，href
定义了热区链接的文件。同时img标记用usemap指明用了
哪幅地图
<img src="images/163227.png" width="600" height="518"
border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect"
coords="51,131,188,183" href="default.asp" />
<area shape="rect" coords="313,129,450,180" href="#h3"
/></map>
超链接的种类－根据href的取值
1) 链接到其他网页或文件（jpg, rar等）
内部链接<a href="../index.htm">返回首页</a>
外部链接<a href="http://www.163.com"> 网易网站 </a>
下载链接<a href="software/wybook. rar">点击下载</a>
2) 电子邮件链接
<a href="mailto:[email protected]">
给我留言</a>
如果IE不能打开该文
件，则会弹出文件
下载的对话框
比普通链接多了
个”mailto:”
超链接的种类－根据href的取值2
3) 锚链接（链接到页面中某一指定的位置）
当网页内容很长，需要进行页内跳转链接时，就需要定义锚
点和锚点链接，锚点可使用name属性或id属性定义。
<a id="yyyy"></a>
<!-- 定义锚点yyyy -->
<a href="#yyyy">……</a> <!-- 网页内跳转链接，链接到
锚点yyyy处 -->
也可以链接到其他网页某个锚点处
<a href="intro.htm#yyyy">……</a>
<!--链接到intro.htm
网页的锚点yyyy处 -->
4) 空链接和脚本链接:
<a href=“#”>……</a> <!-- 相当于没有定义锚点名的锚链接，
网页会返回页面顶端 -->
<a href="JavaScript:alert('确定删除吗')">……</a>
超链接的打开方式（target属性的取值）
在本窗口打开：_self （target的默认值）
在新窗口打开：_blank
在父窗口打开： _parent 将链接的文件载入到父
框架
在整个窗口打开：_top：将链接的文件载入到整
个浏览器窗口中，并删除所有框架
_parent、_top仅仅在网页被嵌入到其他网页中有
效，如框架中的网页，所以这两种取值用得很少。
超链接的title属性
title属性在很多标记里都有，其作用是在鼠标停留
在该元素上时显示设置的说明文字
如<p><a href="定义列表.html" title="格力太阳
能喜获国家免检产品称号">格力太阳能喜获
&#8230;</a></p>
超链接制作的原则
1) 可以使用相对链接尽量不要使用绝对链接，
如../index.htm
而不是http://www.hynu.cn
2) 链接目标尽可能简单
如http://www.hynu.cn，而不是
http://www.hynu.cn/index.jsp
课后思考
url（统一资源定位器）
url一般作为哪些属性的取值？
href=“index.asp” src=“logo.gif”
url的种类
相对url
绝对url
url格式的类型
协议名://主机ip或域名/文件目录/文件名
url协议的类型
常见的url协议的类型
 http
 ftp
 file://192.168.88.6/web/wy.gif
当在DW中建立网站目录后，那么网站目录内的文
件之间建立链接就会自动采用相对链接的方式，
相对链接以网站目录为基准。
若没建立网站目录，DW则采用file协议方式，以磁
盘根目录为基准，建立链接，而这是我们应该避
免的
图像标记<img />
图像标记<img>
图像标记 ：<img src=“图像文件名” /> 将图形
文件嵌入到网页文档中的当前位置
说明：网页中插入图像有两种方法，一是插入
一个<img>元素，二是将图像作为背景嵌入到
网页中
由于CSS的背景属性的功能很强大，现在更推
荐将所有的图像都作为背景嵌入。
网页中支持的图像文件格式
网页中可以插入的图像文件的类型有jpg格式，gif
格式和png格式。这些文件都是压缩格式的图像
格式，其中jpg格式适合用于网页中较大尺寸的真
彩色图片，是一种有损压缩的格式；gif格式一般
用于较小尺寸的图片，是一种无损压缩的格式，
只支持256色，GIF在存储非连续色调的图像或具
有大面积单一色彩的图像方面比较出色，gif格式
的特点是可以实现gif动画，和gif全透明的图像；
png格式可以用于alpha透明效果，但IE6不能够支
持。
<img>标记的常见属性
 <img>是一个行内元素，插入<img>元素不会导致任何换行。
下面是<img>标记的常见属性：
含义
img的属性
src
图片文件的url地址
alt
当图片无法显示时显示的替换文字
title
鼠标停留在图片上时显示的说明文字
align
图片的对齐方式，默认为基线对齐，即图片的
下边缘和文字的下边缘对齐
width、height
图片在网页中的宽和高
在单元格中插入图像的方法
对于表格布局的网页，所有的元素都是放置在单
元格中的，图像也不例外，要在单元格中插入图
像，且单元格的边框和图像之间没有间隙。那么
必须将该单元格的宽和高设置为图片的宽和高，
且表格中其它单元格的大小也必须固定，然后确
保<td>与</td>之间只有<img>标记，没有空格和
换行符，否则单元格会被空格撑开。如：
<td width="768" height="132"><img
src="images/info.gif" />
</td>
<img>插入图像的对齐方式
<img>标记的对齐方式仍然通过align属性实现，
但其取值多达9种，其中要实现图片和文本混排可
使用“左对齐”或“右对齐”，要实现文本和图
片顶部对齐可使用“文本上方”。
<img src="images/info.gif" width="158"
height="41" align="left"/>，但通常是将图片放
在表格里，通过表格定位来实现文本和图像的混
排。
复习题
a标记的常用属性有哪些
href target name title
img标记的常用属性有哪些
src width height alt title
实验(作 业):
用DW制作一个个人求职的网页，要求用表格布
局，网页中必须包含图像、文本、列表、链接及
表格等基本元素。
或者直接用编写代码的方式制作该网页。
下次上课前必须交，否则扣平时成绩。
媒体元素插入标记
<embed />
<object> </object>
插入flash的两种方法
方法一：执行菜单命令：“插入－媒体－flash”，
在代码视图中可看到插入flash元素是通过同时插入
object标记和embed标记实现的，以确保在IE5和
Firefox中都获得应有的效果
方法二：执行菜单命令：“插入－媒体－插件”，
此方法在代码视图中仅插入了embed元素。由于
IE6和Firefox都能正常显示效果，而代码更简洁，
所以推荐用这种方式 （但不能用来插入透明flash，
否则IE浏览器中没有object标记的parm属性不会透
明）
在图像上添加透明flash
 首先可以将一张需要放置透明flash的图片作为单元格的背
景导入，然后在此单元格内插入一个透明flash文件，可以
调整此flash元素的大小与单元格相一致，选中该flash文件，
点击属性面板里的“参数”按钮，新建一个参数“wmode”
值设置为“transparent”。
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000" width="768" height="132">

<param name="movie" value="xxwlzx/10.swf" />

<param name="quality" value="high" />

<param name="wmode" value="transparent" />

<embed src="xxwlzx/10.swf" quality="high"
pluginspage=
"http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="768"
height="130" wmode="transparent"></embed>
 </object>
插入视频或音频文件
插入视频可分别使用ActiveX按钮或插件按钮实现
<object width="280" height="216">
<param name="autostart" value="false" />
<embed src="2.mpg" width="280" height="216"
autostart="false"></embed>
</object>
ActiveX 方式
<embed src=“2.mpg” width=“276” height=“218”
autostart=“false”></embed>
插件方式
流媒体简介
 流媒体实际指的是一种新的媒体传送方式，而非一种新的
媒体,流式传输方式将整个多媒体文件经过特殊的压缩方
式分成一个个压缩包，由视频服务器向用户计算机连续、
实时传送。在采用流式传输方式的系统中，用户不必像采
用下载方式那样等到整个文件全部下载完毕
 常见的流媒体文件格式
 real公司：rm\rmvb\ra
 apple公司：quicktime\mov
 microsoft公司： asf\wmv\wma
插入流媒体元素的方法
 网页中插入流媒体也能向插入一般媒体一样使用embed标
记，只是要在classId框中设置流媒体的类型
插入Real Player流格式的视频文件
属性面板中设置:
ClassID为RealPlayer……。
选中Embed复选框。
Src为zhaodan.rm。
单击“参数…”按钮，设置属性。
parm参数示例
参数：console 属性：可以将各种不同的
RealPlayer控制聚集在网页上，这样它们可以交
互使用或是保持独立，而且互相不影响
语法示例:
<EMBED style="WIDTH: 491px; HEIGHT:
423px" src=abc.rm width=355 height=288
autostart="true"
controls="ImageWindow,ControlPanel">
</EMBED>
容器标记<div>
<span>
div和span
div和span是不含有任何语义的标记，用来在其中
放置任何网页元素，就象一个容器一样，当把文
字放入后，文字的格式外观都不会发生任何改变，
应用容器标记的主要作用是通过引入CSS属性对
容器内元素内容的表现进行设置。
div和span的唯一区别是div是块级元素，span是
行内元素。
div和span
<body> <div style="background-color:#3399ff">块
状区域1</div>
<div style="background-color:#99ccff">块状区域
2</div>
<span style="background-color:#ffccff">行间区域
1</span>
<span style="background-color:#993399">行间区域
2</span> </body>
 <div>标记是一个块状的容器，其默认的状态就是占据整
个一行。
 <span>标记是一个行内的容器，其默认状态是行内的一
部分，占据行的长短由内容的多少来决定
 需要注意的是div并不是层，以前说的层是指通过CSS设
置成了绝对定位属性的div元素，但实际上也可以对其他
任何标记的元素设置成绝对定位，此时其他标记也成了
层，因此层并不对应于任何html标记，所以
Dreamweaver CS3去掉了层这一概念，将这些设置成了
绝对定位元素的标记统称为AP（Absolute Position）元
素
表格标记<table>、
<tr>、<td>
<th>、<tbody>、<caption>
表格标记
 表格的主要作用：网页布局
 因为表格可以固定文本或图像的显示位置，还可以使用多
重表格，并可以设置前景色和背景色
 网页中的表格是由<table>标记定义的，一个表格被分成
许多行<tr>，每行又被分成许多个单元格<td>，因此
<table>、<tr>、<td>是表格中三个最基本的标记，必须
一起出现。表格中的单元格能容纳网页中的任何元素，如
图像，文本，列表，表单，表格等。
The elements
structure of
that
a
make up
table
the
basic
下面这段代码在浏览器中如何显示
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格标记<table>的常见属性
table的属性
border
含义
表格边框的宽度
bordercolor
表格边框的颜色，若不设置，将显示立体边
框效果
bordercolordark
bordercolorlight
bgcolor
设置边框暗部分和明亮部分效果，IE才支持
这两个属性
表格的背景色
background
表格的背景图像
cellspacing
表格的间距
cellpadding
表格的填充
width，height
align
表格的宽和高，可以使用象素或百分比做单
位，align是水平对齐属性
设置表格边框为20象素的效果
<table border="20">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
设置表格边框为0
<table border="0">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
可见：设置表格边框为0时，会使单元格边框也变为0象素，
而设置表格边框为其他数值时，不会影响单元格边框的宽
再设置边框颜色为青色
<table border="20" bordercolor="#0099FF">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
Firefox效果
</tr>
</table>
IE效果
再设置背景颜色为玫瑰色
<table border="20" bgcolor="#9933CC"
bordercolor="#0099FF">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
设置间距为10，取消背景色
<table border="20" cellspacing="10"
bordercolor="#0099FF">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
总结:间距cellspacing的作用
再设置填充为10
<table border="20" cellspacing="10 " cellpadding="10"
bordercolor="#0099FF">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
总结：填充cellpadding的作用
表格的rules属性
rules属性：可实现只显示表格的行边框或列边框，
取值为rows时只显示行边框，取值为cols时只显
示列边框，如：
<table rules="rows" width="200" border="1"
cellpadding="0" cellspacing="2">
单元格标记<td>的常见属性
td的属性
bordercolor
bgcolor
含义
单元格边框的颜色，该属性仅IE支持
单元格的背景色
background
单元格的背景图像
align/valign
单元格里的内容的水平或垂直对齐方式
colspan/rowspan 合并同一列相邻的几个单元格/ 合并同一行的几
width，height
个单元格
单元格的宽和高，可以使用象素或百分比做单
位
注意：单元格td无border属性，因此无法设置单
元格边框的宽度，单元格边框宽度只能是1或0
设置第一个单元格边框为红色
<table border="20" align="center" cellpadding="10"
cellspacing="10" bordercolor="#0099FF">
<tr>
<td bordercolor="#FF0000">row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
IE的显示
<td>row 2, cell 2</td>
</tr>
</table>
Firefox的显示
设置第一行单元格背景色为蓝色
<tr>
<td bgcolor="#99CCFF">row 1, cell 1</td>
<td bgcolor="#99CCFF">row 1, cell 2</td>
</tr>
等价于：
<tr bgcolor="#99CCFF">
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
设置所有单元格背景色为蓝色
<tr>
<td bgcolor="#99CCFF">row 1, cell 1</td>
<td bgcolor="#99CCFF">row 1, cell 2</td>
</tr>
<tr>
<td bgcolor="#99CCFF">row 1, cell 1</td>
<td bgcolor="#99CCFF">row 1, cell 2</td>
</tr>
等价于
<tbody bgcolor="#99CCFF">
<tr>…</tr><tr>…</tr>
</tbody>
再设置表格的背景色为红色
再设置表格的边框border为0
实现1象素边框表格
此时将表格的间距cellspacing设为1，即实现1象
素边框表格，
其原理是通过把表格的背景色和（所有单元格的
背景色）调整成不同的颜色，使间距看起来象一
个边框一样
所有单元格的背景色设为同一颜色后，我们也称
为表格的前景色
用CSS属性border-collapse做1象素边框的表格
在默认情况下表格边框和单元格边框是不叠加的，
此时表格的边框和单元格的边框紧挨在一起，所
以边框的宽度为1＋1＝2象素，这是bordercollapse属性的默认值为separate，即不重叠时的
情况。当我们把border-collapse属性值设为
collapse（重叠）时，表格边框和单元格边框将发
生重叠，则边框的宽度为1象素。
border-collapse:collapse;
<table border="1" bordercolor="#FF0000"
style="border-collapse:collapse;">
双细线边框表格的原理
将表格的边框颜色bordercolor属性设置为某种颜
色，则表格的暗边框和亮边框会变为同一种颜色，
表格的边框立体效果消失，（在IE中单元格边框
的颜色也会跟着改变，而Firefox中单元格边框颜
色不会改变）此时表格的边框和单元格的边框都
为1象素，只要间距cellspacing不设为0，则两组
边框不会重合，显示为双细线边框表格。
双细线边框表格的实现
<table border="1" cellpadding="10" cellspacing="2"
bordercolor="#0099FF">
<tr bgcolor="#99CCFF">
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
IE的显示
</table>
例2 下面的表格是如何实现的
用间距做的边框，但并没有把表格的边框border
设为0 ，而是设为1，白色。因此在红色“边框”
的外面还有1象素白色的表格边框，单元格外也有
1象素的白色单元格边框
表格间距为1，表格背景色为红色，单元格背景色
为淡红色
单元格内容的对齐属性align/valign
align属性可以让单元格中的内容是水平居中或左
右对齐，默认是左对齐
valign属性是垂直对齐属性，可以让内容在垂直
方向对齐，默认是垂直居中对齐
单元格的合并属性（colspan、rowspan）
 单元格的合并属性是td标记特有的两个属性，分别是跨多
列属性colspan和跨多行属性rowspan，它们用于合并列或
合并单元格。如：
 <td colspan="3"> 单元格内容 </td>
 表示该单元格是由3列（3个并排的单元格）合并而成，它
将使该行<tr>标记中减少两个<td>标记。
 <td rowspan="3">单元格内容</td>
 表示该单元格由3行（3个上下排列的单元格）合并而成，
它将使该行下的两行，两个<tr>标记中分别减少一个<td>
标记。
注意：colspan和rowspan属性也可以在一个单元
格<td>标记中同时出现，如：
<td colspan="3" rowspan="3">&nbsp;</td>
<!-- 同时合并了三行三列的9个单元格 -->
标题单元格<th>标记
标题单元格标记<th>相当于一个单元格内字体以
粗体居中显示的<td>标记
表格标题标记<caption>
标题标记<caption>的常用属性有align、valign
（valign表示标题在表格的上部或下部，值为
bottom|top）
<tbody>……</tbody>标记
浏览器默认是将整个表格的代码下载完再显示整
个表格，如果想让浏览器分行下载，即下载一行
显示一行，可以在所有行标记外加上<tbody>标
记，这个对表格中内容很多时比较实用。
有时如果要把所有单元格的背景色设置成同一种
颜色，可以设置tbody的背景色，这样就不必为每
个单元格都添加一条bgcolor属性，可节省很多代
码
普通表格与布局表格的区别
在布局模式下绘制的布局表格是特殊设置了的普
通表格，布局表格将border、cellpadding、
cellspacing三个属性都设置为了0，因此我们看不
到它的边框，布局单元格将valign属性设置为top，
因此往布局单元格中插入内容默认都是往单元格
最顶端排列的。
实验：用普通标格和布局表格分别进行1-3-1版式
布局
在Dreamweaver中选中表格的方法
选择整个表格：单击表格左上角或右边框或底边
框或状态条中的<table>标签。
选择一行或一列单元格：将鼠标指针置于一行的
左边框上，或置于一列的顶端边框上，当选定箭
头出现时单击，或状态条中的<tr>标签（推荐）。
选择连续的几个单元格：在一个单元格中单击并
拖动鼠标横向或纵向移至另一单元格。
选择不连续的几个单元格：按住Ctrl键，单击欲
选定的单元格、行或列。
选择单元格中的网页元素：点击单元格中的网页
元素。
DW在表格中插入行或列的方法
当光标位于表格内时，按右键在弹出菜单中选择
“表格——插入行（或插入列）”可在表格的当
前行的上方插入一行，或当前行的左边插入一列，
若要在表格的最右边插入一列或最下方插入一行，
可选择“表格——插入行或列…”，在所选列之后
或所选行之下插入列或行。插入行也可以在代码
视图中复制一行的代码“<tr>……</tr>”再粘贴
几次就插入几行，插入列则在代码视图中不好进
行。
制作固定宽度的表格
 如果我们不定义表格中每个单元格的宽度，当向单元格
中插入网页元素时，表格往往会变形，要制作固定宽度
的表格，通常有两种方法：
 ① 定义所有列的宽度，但不定义整个表格的宽度，整个
表格的实际宽度为：所有列的宽度和+边框宽度和+间距
和+填充和，这时候，只要单元格内的内容不超过的单元
格的宽度时，表格不会变形。
 ② 定义整个表格的宽，如500像素、98%等，再留一列
的宽度不定义，未定义的这一列的宽度为整个表格的宽
度-已定义列的宽度和-边框宽度和-间距和-填充和，同样
在插入内容时也不会变形。
用单元格制作水平线或占位表格
 关键：去掉单元格<td>中的“&nbsp;”空格
<table width="200" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td height="1" bgcolor="#FF00FF"></td>
<!-- 单元格中的“&nbsp;”已去掉-->
</tr>
</table>
制作占位表格：演示
用表格制作圆角栏目框
 网页中经常可以看到漂亮的圆角栏目框，在这里我们来
制作一个固定宽度的圆角栏目框
圆角栏目框制作步骤
1. 插入一个三行一列的表格，把表格的填充、间距和边框设
为0，宽设置成190象素（圆角图片的宽），高不设置。
2. 分别设置表格内三个单元格的高。第一个单元格高设置为
38象素（上圆角图片的高）；第二个单元格高为148象素；
第三个单元格高为17象素（下圆角图片的高）。在第1、3
个单元格内分别插入上圆角和下圆角的图片。
3. 把第二个单元格的水平对齐方式设置为居中
（align="center"），单元格的背景颜色设置为圆角图片
边框的颜色（bgcolor="#E78BB2"）。
 4. 这时在第二个单元格内再插入一个一行一列的表格，
把该表格的间距和边框设为0，填充设为8象素（让栏目
框中的内容和边框之间有一些间隔），宽设为186象素，
背景颜色设置为比边框浅的颜色
（bgcolor="#FAE4E6"）。
 说明：第四步也可以不插入表格，而是把第二个单元格
拆分成3列，把三列对应的三个单元格的宽分别设置为2
象素、186象素和2象素，并在代码视图把这三个单元格
中的“&nbsp;”去掉，然后把1、3列的背景色设置为圆
角边框的颜色，第2列的背景色设为圆角背景的颜色，
并用CSS属性设置它的填充为8象素
（style="padding:8px"）