韩前成html表格详解 学会这些你就是表格高手了.docx
《韩前成html表格详解 学会这些你就是表格高手了.docx》由会员分享，可在线阅读，更多相关《韩前成html表格详解 学会这些你就是表格高手了.docx（14页珍藏版）》请在冰豆网上搜索。
韩前成html表格详解学会这些你就是表格高手了
HTML表格用
表示。一个表格可以分成很多行（row），用
表示；每行又可以分成很多单元格（cell），用| 表示。 这三个Tag是创建表格最常用的Tag。 两行（Row）三列（Column）的表格
|
| 100 | 200 | 300 |
| 400 | 500 | 600 |
border属性
在缺省情况下，如果不设置表格的边界，表格是不显示边界的。
要显示表格的边界，可使用border这个属性。
表格的表头
用
来表示表格的表头，表头的字是粗体显示的。有表头的表格：
| | 姓名 | 电话 | 传真 |
|---|
| BillGates | 55577854 | 55577855 |
竖直方向的表头：
| 姓名 | BillGates |
|---|
| 电话 | 55577854 |
|---|
| 传真 | 55577855 |
|---|
空的单元格
如果表格的单元格
| 之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。
要显示这个单元格的边界，可以插入一个 空格符。
注意：
空格符要用&bsp;表示。
是一个HTML特别字符，参见HTML特别字符（HTMLCharacterEntities）。
有标题的表格
这个示例演示如何用
在一个表格上加上标题。
表格标题| 100 | 200 | 300 |
| 400 | 500 | 600 |
包含多列或多行的单元格
这个示例演示如何用colspan，rowspan设置多列或者多行的单元格。
用colspan属性，设置包含多列的单元格；用rowspan这个属性，设置包含多行的单元格。
用colspan属性，设置包含多列的单元格：
| 姓名 | 联系方式
|---|
| BillGates | 55577854 | 55577855 |
用rowspan这个属性，设置包含多行的单元格：
| 姓名 | BillGates |
|---|
联系方式
55577854 |
| 55577855 |
单元格里的内容
单元格
| 里面的内容。
单元格的内容可以是文字，图片，超链接，Form，表格等。
单元格内容与单元格边界之间的距离
cellpadding属性值设置为3的表格：
| 第一 | 行 |
| 第二 | 行 |
这个示例教你如何用cellpadding这个属性设置单元格内容与单元格边界之间的距离。
单元格之间的距离
Cellspacing属性值设为2的表格：
| 第一 | 行 |
| 第二 | 行 |
这个示例教你如何用cellspacing这个属性设置单元格之间的距离。
如果表格里没有设置cellspacing属性，缺省情况下，cellspacing值为1。
设置表格的背景颜色和背景图片
给表格设置背景颜色：
| 第一 | 行 |
| 第二 | 行 |
给表格加背景图片：
| 第一 | 行 |
| 第二 | 行 |
这个示例演示如何用bgcolor属性设置表格的背景颜色，如何用background属性为表格添加背景图片。
设置单元格的背景颜色和背景图片
单元格背景色：
第一
行 |
第二
行 |
这个示例演示如何用bgcolor属性设置单元格的背景颜色，如何用background属性为单元格添加背景图片。
背景颜色常用rrggbb16进制RGB数码，或者是下列预定义色彩名称：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
单元格内容的对齐方式
分数
期中考试
期末考试
|
姐姐
250.10
50000.20
|
菊花
1000.00
5000.45
|
jack
2000.40
500.00
|
黄新
300.50
800.65
|
这个示例教你如何用align属性设置单元格的对齐方式。
对齐方式包括：
左，中，右（left,center,right）；上，中，下，齐（top,middle,bottom,baseline）。
baseline表示文本的基线与表格的中线对齐。
也就是文本出现在表格的中上部而不是正中央。
如果文字不大的话，效果和middle差不多，比middle稍微靠上一点。
高级表格代码
表格边框颜色代码
| Food | Drink | Sweet |
|---|
| A | B | C | FoodDrinkSweetABC
表格边框色彩的亮度控制
| Food | Drink | Sweet |
|---|
| A | B | C | FoodDrinkSweetABC
表格分组显示代码
按行分组
...-表的题头（Header）
...-表的正文（Body）
...-表的脚注（Footer）
| Food | Drink | Sweet |
|---|
| A | B | C |
| D | E | F |
FoodDrinkSweet
ABC
DEF
按列分组
#=left,right,center
| Food | Drink | Sweet |
|---|
| A | B | C |
| D | E | F |
FoodDrinkSweet
ABC
DEF
列的属性控制
#=从左数起，具有指定属性的列的列数
#=left,right,center
| Food | Drink | Sweet |
|---|
| A | B | C |
| D | E | F |
FoodDrinkSweet
ABC
DEF
表格边框显示/隐藏代码
显示所有4个边框| Food | Drink | Sweet |
|---|
| A | B | C |
| D | E | F |
FoodDrinkSweet
ABC
DEF
只显示上边框FoodDrinkSweet
ABC
DEF
只显示下边框FoodDrinkSweet
ABC
DEF
只显示上、下边框FoodDrinkSweet
ABC
DEF
只显示左、右边框FoodDrinkSweet
ABC
DEF
只显示左边框FoodDrinkSweet
ABC
DEF
只显示右边框FoodDrinkSweet
ABC
DEF
不显示任何边框FoodDrinkSweet
ABC
DEF
表格中分割线的显示
显示所有分隔线
| Food | Drink | Sweet |
|---|
| A | B | C |
| D | E | F |
Total$-00.0
FoodDrinkSweetABCDEFTotal$-00.0
只显示组（Groups）与组之间的分隔线FoodDrinkSweetABCDEFTotal$-00.0只显示行与行之间的分隔线FoodDrinkSweet
ABC
DEF
Total$-00.0
只显示列与列之间的分隔线FoodDrinkSweet
ABC
DEF
Total$-00.0
不显示任何分隔线FoodDrinkSweet
ABC
DEF
Total$-00.0
－－－－－－－－－－－－－－－－－－－－－－
设置表格的奇偶行颜色
window.onload=function（）{
doubleBgColor（document.getElementById（"table1"）,"#cecece","#ececec"）
}
functiondoubleBgColor（Table,Bg1,Bg2）{
for（vari=0;iBg2:
Bg1;
}
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
奇偶不同色