神马文学网表格代码 表格制作
来源：百度文库 编辑：神马文学网 时间：2024/10/14 05:03:38
1:表格的基本表现形式
注解：
表格的代码元素（必须）
表格的主体元素（必须）
表格的行元素 （必须）
表格的单元格元素（必须）
2：表格的附属属性，以及属性值
align 表格的水平排列属性，可选属性值有 left(居左) center(居中) right(居右)
bgcolor 表格的背景色属性，属性值为十六进制的颜色代码或是英文的颜色单词
background 表格的背景图片属性，属性值为图片的网络绝对地址，也可以是相对地址
width 表格的宽度属性，属性值为像素值，也可以是百分比的。如果是百分比的有两种情况，1不是嵌套表格的，那么百分比是相对浏览器的。2如果是嵌套表格，那么它对应的四嵌套表格所在的单元格。
height 表格的高度属性，属性值和宽度属性是一样的。
border 表格的边框属性，属性值为像素值。
bordercolor 表格的边框颜色属性，属性值为颜色代码
bordercolorlight 表格的亮边框属性，属性值为颜色代码
bordercolordark 表格的暗边框属性，属性值为颜色代码
cellSpacing 表格的单元格间距属性，属性值为像素
cellpadding 表格的单元格边距属性，属性值为像素
frame 表格的边框样式属性，
属性值可选
above 显示上边框
below 显示下边框
border 显示上下左右边框
box 显示上下左右边框
hsides 显示上下边框
lhs 显示左做边框
rhs 显示右边框
void 不显示边框
vsides 显示左右边框
rules 表格的内部边框属性
属性值可选
all 显示所有的内部边框
cole 仅显示行边框
groups 显示介于行列间的边框
none 不显示内部边框
rows 仅显示列边框
valign 表格内内容的对齐方式（垂直）属性，属性值为 top（顶部）, middle（中部）, bottom（底部）。
3：综合练习
范例3-1：建立基本实用的表格(包含有水平排列属性，背景色属性，宽度，高度，边框）
范例3-2-1：添加单元格间距属性
3-2-2：添加边距属性
3-2-3：设定边框颜色和调整边框大小
3-2-4：添加亮边框和暗边框属性
3-2-5：制作多行表格
3-2-6:建立多列表格
3-2-7：建立多行多列表格
3-2-8：设定边框的样式
3-2-9：设定内部边框的样式
3-2-10:建立多层表格
3-2-11：插入背景图片
3-2-12：表格内内容的对齐方式
相关资料下载
点击浏览该文件
表格的另类用法
效果：
此主题相关图片如下：
源代码：
源码如下：
虚线直线2
实际效果：
align 表格的水平排列属性
bgcolor 表格的背景色属性
width 表格的宽度属性
height 表格的高度属性
border 表格的边框属性
细解1
没有设定表格的水平排列属性，默认的是居左
没有设定水平排列属性
效果：
没有设定水平排列属性
设定水平排列居中
设定水平排列属性居中align=center
设定水平排列属性居右
设定水平排列属性居右align=right
改变表格的背景色 bgcolor
bgcolor=#ff00ff 表格的背景色属性
bgcolor=#0000ff 表格的背景色属性
改变边框线的大小 border
改变边框线的大小 border=1
改变边框线的大小 border=10
（在没有设定边框颜色时，边框线有立体的效果）
设定单元格的间距属性 cellSpacing （单元格与单元格之间的距离）
cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=10
cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=5
cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=50
（在默认的情况下，也就是说没有设定cellSpacing的属性时，默认的间距是1，你要想不体现有两条边框线，就要把cellSpacing的属性值设为0）
2：设定单元格的边距属性 cellpadding （边距属性就是主体内容与边框线之间的距离）
cellpadding 表格的单元格边距属性，属性值为像素cellpadding=5
cellpadding 表格的单元格边距属性，属性值为像素cellpadding=15
cellpadding 表格的单元格边距属性，属性值为像素cellpadding=35
设定边框的颜色 bordercolor (边框线的颜色，需要边框线属性border的配合）
bordercolor=#0000ff border=5
bordercolor=#ff0000 border=5
(如果我只想要一条边框线，需要设定边框单元格的间距属性cellSpacing=0）
cellspacing=0 bordercolor=#ff0000 border=5
添加亮边框 bordercolorlight 和暗边框 bordercolordark 属性。（必须要有边框线border的配合）
(同时使用了亮，暗边框属性后，边框线颜色属性 bordercolor 会自动失效)
只有边框线颜色属性bordercolor=#0000ff
cellSpacing=5
添加亮边框颜色bordercolorlight
边框线颜色属性bordercolor=#0000ff
cellSpacing=5
亮边框颜色属性 bordercolorlight=red
添加暗边框颜色属性bordercolordark
边框线颜色属性bordercolor=#0000ff cellSpacing=5
亮边框颜色属性 bordercolorlight=red
暗边框颜色属性 bordercolordark=green
多行表格 tr
第一行
第二行
第一行
第二行
第一行
第二行
第三行
第四行
第五行
第一行
第二行
第三行
第四行
第五行
多列表格 td
第一列 第二列 第三列
第一列 第二列 第三列 第四列 第五列
多行多列表格的制作
第一行第一列 第一行第二列 第一行第三列
第二行第一列 第二行第二列 第二行第三列
第三行第一列 第三行第二列 第三行第三列
多层表格的制作
建立三层的表格
插入背景图片 background=图片地址
素材
插入背景图片
两层表格
插入背景图片
二层表格
三层表格
插入背景图片
三层表格
内容 |
注解：
表格的主体元素（必须）
2：表格的附属属性，以及属性值
align 表格的水平排列属性，可选属性值有 left(居左) center(居中) right(居右)
bgcolor 表格的背景色属性，属性值为十六进制的颜色代码或是英文的颜色单词
background 表格的背景图片属性，属性值为图片的网络绝对地址，也可以是相对地址
width 表格的宽度属性，属性值为像素值，也可以是百分比的。如果是百分比的有两种情况，1不是嵌套表格的，那么百分比是相对浏览器的。2如果是嵌套表格，那么它对应的四嵌套表格所在的单元格。
height 表格的高度属性，属性值和宽度属性是一样的。
border 表格的边框属性，属性值为像素值。
bordercolor 表格的边框颜色属性，属性值为颜色代码
bordercolorlight 表格的亮边框属性，属性值为颜色代码
bordercolordark 表格的暗边框属性，属性值为颜色代码
cellSpacing 表格的单元格间距属性，属性值为像素
cellpadding 表格的单元格边距属性，属性值为像素
frame 表格的边框样式属性，
属性值可选
above 显示上边框
below 显示下边框
border 显示上下左右边框
box 显示上下左右边框
hsides 显示上下边框
lhs 显示左做边框
rhs 显示右边框
void 不显示边框
vsides 显示左右边框
rules 表格的内部边框属性
属性值可选
all 显示所有的内部边框
cole 仅显示行边框
groups 显示介于行列间的边框
none 不显示内部边框
rows 仅显示列边框
valign 表格内内容的对齐方式（垂直）属性，属性值为 top（顶部）, middle（中部）, bottom（底部）。
3：综合练习
范例3-1：建立基本实用的表格(包含有水平排列属性，背景色属性，宽度，高度，边框）
align 表格的水平排列属性 bgcolor 表格的背景色属性 width 表格的宽度属性 height 表格的高度属性 border 表格的边框属性 |
范例3-2-1：添加单元格间距属性
cellSpacing 表格的单元格间距属性，属性值为像素 |
3-2-2：添加边距属性
cellpadding 表格的单元格边距属性，属性值为像素 |
3-2-3：设定边框颜色和调整边框大小
bordercolor=#0000ff border=5 |
3-2-4：添加亮边框和暗边框属性
bordercolorlight=red bordercolordark=green 注意：添加了亮，暗边框属性后，bordercolor=#0000ff ，通常的边框颜色属性bordercolor就会自动失效 |
3-2-5：制作多行表格
第一行 |
第二行 |
3-2-6:建立多列表格
| 第一列 | 第二列 | 第三列 |
3-2-7：建立多行多列表格
| 第一行第一列 | 第一行第二列 | 第一行第三列 |
| 第二行第一列 | 第二行第二列 | 第二行第三列 |
| 第三行第一列 | 第三行第二列 | 第三行第三列 |
3-2-8：设定边框的样式
| 第一行第一列 | 第一行第二列 | 第一行第三列 |
| 第二行第一列 | 第二行第二列 | 第二行第三列 |
| 第三行第一列 | 第三行第二列 | 第三行第三列 |
3-2-9：设定内部边框的样式
| 第一行第一列 | 第一行第二列 | 第一行第三列 |
| 第二行第一列 | 第二行第二列 | 第二行第三列 |
| 第三行第一列 | 第三行第二列 | 第三行第三列 |
3-2-10:建立多层表格
|
3-2-11：插入背景图片
插入背景图片 |
3-2-12：表格内内容的对齐方式
| 第一列 | 第二列 | 第三列 |
相关资料下载
点击浏览该文件表格的另类用法
效果：
此主题相关图片如下：源代码：
源码如下：
| 另类用法 |
虚线直线1
虚线直线2
范例3-1：
align 表格的水平排列属性 bgcolor 表格的背景色属性 width 表格的宽度属性 height 表格的高度属性 border 表格的边框属性 |
实际效果：
align 表格的水平排列属性
bgcolor 表格的背景色属性
width 表格的宽度属性
height 表格的高度属性
border 表格的边框属性
细解1
没有设定表格的水平排列属性，默认的是居左
没有设定水平排列属性
效果：
没有设定水平排列属性
设定水平排列居中
设定水平排列属性居中align=center |
设定水平排列属性居中align=center
设定水平排列属性居右
设定水平排列属性居右align=right |
设定水平排列属性居右align=right
改变表格的背景色 bgcolor
bgcolor=#ff00ff 表格的背景色属性 |
bgcolor=#ff00ff 表格的背景色属性
bgcolor=#0000ff 表格的背景色属性 |
bgcolor=#0000ff 表格的背景色属性
改变边框线的大小 border
改变边框线的大小 border=1 |
改变边框线的大小 border=1
改变边框线的大小 border=10 |
改变边框线的大小 border=10
（在没有设定边框颜色时，边框线有立体的效果）
设定单元格的间距属性 cellSpacing （单元格与单元格之间的距离）
cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=10 |
cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=10
cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=5 |
cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=5
cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=50 |
cellSpacing 表格的单元格间距属性，属性值为像素。cellSpacing=50
（在默认的情况下，也就是说没有设定cellSpacing的属性时，默认的间距是1，你要想不体现有两条边框线，就要把cellSpacing的属性值设为0）
2：设定单元格的边距属性 cellpadding （边距属性就是主体内容与边框线之间的距离）
cellpadding 表格的单元格边距属性，属性值为像素cellpadding=5 |
cellpadding 表格的单元格边距属性，属性值为像素cellpadding=5
cellpadding 表格的单元格边距属性，属性值为像素cellpadding=15 |
cellpadding 表格的单元格边距属性，属性值为像素cellpadding=15
cellpadding 表格的单元格边距属性，属性值为像素cellpadding=35 |
cellpadding 表格的单元格边距属性，属性值为像素cellpadding=35
设定边框的颜色 bordercolor (边框线的颜色，需要边框线属性border的配合）
bordercolor=#0000ff border=5 |
bordercolor=#0000ff border=5
bordercolor=#ff0000 border=5 |
bordercolor=#ff0000 border=5
(如果我只想要一条边框线，需要设定边框单元格的间距属性cellSpacing=0）
cellspacing=0 bordercolor=#ff0000 border=5 |
cellspacing=0 bordercolor=#ff0000 border=5
添加亮边框 bordercolorlight 和暗边框 bordercolordark 属性。（必须要有边框线border的配合）
(同时使用了亮，暗边框属性后，边框线颜色属性 bordercolor 会自动失效)
只有边框线颜色属性bordercolor=#0000ff cellSpacing=5 |
只有边框线颜色属性bordercolor=#0000ff
cellSpacing=5
添加亮边框颜色bordercolorlight
边框线颜色属性bordercolor=#0000ff cellSpacing=5 亮边框颜色属性 bordercolorlight=red |
边框线颜色属性bordercolor=#0000ff
cellSpacing=5
亮边框颜色属性 bordercolorlight=red
添加暗边框颜色属性bordercolordark
边框线颜色属性bordercolor=#0000ff cellSpacing=5 亮边框颜色属性 bordercolorlight=red 暗边框颜色属性 bordercolordark=green |
边框线颜色属性bordercolor=#0000ff cellSpacing=5
亮边框颜色属性 bordercolorlight=red
暗边框颜色属性 bordercolordark=green
多行表格 tr
第一行
第二行
第一行
第二行
第一行
第二行
第三行
第四行
第五行
第一行
第二行
第三行
第四行
第五行
多列表格 td
| 第一列 | 第二列 | 第三列 |
第一列 第二列 第三列
| 第一列 | 第二列 | 第三列 | 第四列 | 第五列 |
第一列 第二列 第三列 第四列 第五列
多行多列表格的制作
| 第一行第一列 | 第一行第二列 | 第一行第三列 |
| 第二行第一列 | 第二行第二列 | 第二行第三列 |
| 第三行第一列 | 第三行第二列 | 第三行第三列 |
第一行第一列 第一行第二列 第一行第三列
第二行第一列 第二行第二列 第二行第三列
第三行第一列 第三行第二列 第三行第三列
多层表格的制作
|
建立三层的表格
插入背景图片 background=图片地址
素材
插入背景图片 一层表格 |
插入背景图片
两层表格
|
插入背景图片
二层表格
三层表格
|
插入背景图片
三层表格
|