英国女王讲话:学习笔记——单层表格制作

来源：百度文库 编辑：九乡新闻网 时间：2024/04/30 09:03:27
             多福老人欢迎您
地址：http://qwp43.360doc.com

表格的基本结构:
...
---　定义表格
---　定义表行
---　定义表元(表格的具体数据)
常用的参数设定及注解：
（见下面只有一层的表格）
width="400"
表格宽度，接受绝对值（如 500）及相对值（如 80%）。
border="10"
表格边框的厚度。
cellspacing="2"
表格格线间的宽度
cellPadding=5
表格内格线至内容的距离
align="CENTER"
表格的摆放位置（水平），可选值为：左： left,　右： right,　居中： center
valign="TOP".
表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。
background="背景图片网址"
表格的背景图片，与 bgcolor 不要同用。
bgcolor="#0000FF"
表格的底色，与 background 不要同用
bordercolor="#CF0000"
表格边框颜色
bordercolorlight="#00FF00"
表格边框向光部分的颜色
bordercolordark="#00FFFF"
表格边框背光部分的颜色，
使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
只有一层的表格
代码
style="WIDTH: 540px; HEIGHT: 278px"（定义表格的尺寸）
border=10 （表格外边框的宽度）
cellSpacing=20（表格格线间的宽度）
borderColor=#841a00（表格格线的颜色）
borderColorLight=#00ff00（ 表格边框向光部分的颜色）
borderColorDark=#00ffff（表格边框背光部分的颜色）
cellPadding=12 （表格内格线至内容的距离）
background=背景图片的地址（jpg,   gif)
或bgColor=#0000ff （表格的底色）
align=center （表格置中）
valign="TOP">

（定义表行）
帖子的文章，插入图片



效果
帖子的文章，图片
由图可见，
只有一层的表格实际上有两个图框构成，外框可定义
宽度（width="400" 绝对值）；
高度(HEIGHT: 278px相对值)；
颜色（bordercolor="#CF0000" ）；
框的厚度（border="10" ）；
内框不能定义，自然形成；
两框间距可定义（cellspacing="2" ）；
内框与内容间距可定义（cellPadding=5　）；
背景可定义（background="背景图片网址"；bgcolor="#0000FF" ）。
加入背景图片
地址：http://userimage2.360doc.com/10/0822/23/2572160_201008222358160285.jpg
代码

style="WIDTH: 540px; HEIGHT: 278px"
border=10
cellSpacing=20
borderColorLight=#00ff00
borderColorDark=#00ffff
cellPadding=12
background=http://userimage2.360doc.com/10/0822/23/2572160_201008222358160285.jpg
bgColor=#0000ff
align=center（表格居中放置）
valign="TOP">（表格上对齐）


帖子的文章；插入图片;



 


效果
帖子的文章，插入图片
插入图片
图片地址：http://userimage2.360doc.com/10/0819/53/2572160_20100819536480367.jpg
代码

style="WIDTH: 540px; HEIGHT: 278px" border=10 cellSpacing=20borderColorLight=#00ff00
borderColorDark=#00ffff cellPadding=12
background=http://userimage2.360doc.com/10/0822/23/2572160_201008222358160285.jpg
bgColor=#0000ff align=center valign="TOP">


帖子的文章，



 


效果
帖子的文章，
为使插入的图片居中，使用定位代码
代码

上面代码变为

style="WIDTH: 540px; HEIGHT: 278px" border=10 cellSpacing=20borderColorLight=#00ff00
borderColorDark=#00ffff cellPadding=12
background=http://userimage2.360doc.com/10/0822/23/2572160_201008222358160285.jpg
bgColor=#0000ff align=center valign="TOP">











效果

目的已实现
总结
单层表格是制作表格的基础，要记住单层表格的样子，按一定顺序制作。
例如
< table
style="WIDTH: 540px; HEIGHT: 278px"（定义表格的尺寸）
border=10 （表格外边框的宽度）
cellSpacing=20（表格格线间的宽度）
bordercolor=#841a00（ 表格外边框的颜色）
borderColorLight=#00ff00（ 表格边框向光部分的颜色）
borderColorDark=#00ffff（表格边框背光部分的颜色）
cellPadding=12 （表格内格线至内容的距离）
background=背景图片（的地址）
或 bgColor=#0000ff （表格内的底色）
align= center（表格置中）
valign="TOP" >（表格上对齐）

（定义表行）
帖子的文章，插入图片


（表格结束）
总结
单层表格可以在背景图片上添加内容的特性，使得它可以作为图片上添加内容的基础，
这将在讨论图片上添加内容时起重要作用。参见图片的添加。
学习笔记——单层表格制作 学习笔记——多层表格制作 学习笔记——用表格设置做图框 学习笔记——如何创建HTML表格 学习笔记——如何创建HTML表格 1 学习笔记——表格设置（引自学习表格设置做图框 - 理睬的日志 - 网易博客） 学习笔记——顶图链接的制作 学习笔记——个性顶图模板制作（2） 学习笔记—— 字体大小 学习笔记——文字颜色 学习笔记——图片右边+文字 学习笔记——图片添加文字 学习笔记——换片+flash 学习笔记——图片的添加 学习笔记——插入动画 学习笔记——Flash+文字 学习笔记——HTML图片(Images) 学习笔记——HTML列表(Lists) 学习笔记——HTML表单(Forms) HTLM教程——学习笔记 学习笔记——插入图片练习 学习笔记——定位插入 学习笔记——图片加边框 学习笔记——贴图练习