表格属性
可选的属性
属性 | 值 | 描述 |
---|---|---|
align | left center right |
不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。 |
bgcolor | rgb(x,x,x) #xxxxxx colorname |
不赞成使用。请使用样式代替。 规定表格的背景颜色。 |
border | pixels | 规定表格边框的宽度。 |
cellpadding | pixels % |
规定单元边沿与其内容之间的空白。 |
cellspacing | pixels % |
规定单元格之间的空白。 |
frame | void above below hsides lhs rhs vsides box border |
规定外侧边框的哪个部分是可见的。 |
rules | none groups rows cols all |
规定内侧边框的哪个部分是可见的。 |
summary | text | 规定表格的摘要。 |
width | % pixels |
规定表格的宽度。 |
一、<table> 标签的 align 属性
align 属性规定表格相对于周围元素的对齐方式。通常来说,HTML 表格的前后都会出现折行。通过运用 align 属性,可实现其他 HTML 元素围绕表格的效果。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >表格属性</ title > </ head > < body > <!--左对齐表格--> < table border = "1" align = "left" > < tr > < td >《论语》</ td > < td >《尚书》</ td > < td >《周易》</ td > </ tr > < tr > < td >《礼记》</ td > < td >《易经》</ td > < td >《孙子兵法》</ td > </ tr > < tr > < td >《老子》</ td > < td >《三十六计》</ td > < td >《山海经》</ td > </ tr > </ table > < p >《论语》是儒家学派的经典著作之一,由孔子的弟子及其再传弟子编撰而成。它以语录体和对话文体为主,记录了孔子及其弟子言行,集中体现了孔子的政治主张、伦理思想、道德观念及教育原则等。与《大学》《中庸》《孟子》《诗经》《尚书》《礼记》《易经》《春秋》并称“四书五经”。 </ p > <!--右对齐表格--> < table border = "1" align = "right" > < tr > < td >李白</ td > < td >苏轼</ td > </ tr > < tr > < td >李清照</ td > < td >辛弃疾</ td > </ tr > </ table > < p >李白(701年-762年) ,字太白,号青莲居士,又号“谪仙人”,唐代伟大的浪漫主义诗人,被后人誉为“诗仙”。苏轼是北宋中期文坛领袖,在诗、词、散文、书、画等方面取得很高成就。</ p > <!--居中对齐表格--> < table border = "1" align = "center" > < tr > < td >《登鹳雀楼》(王之涣)</ td > < td >《静夜思》(李白)</ td > </ tr > < tr > < td >《寻隐者不遇》(贾岛)</ td > < td >《相思》(王维)</ td > </ tr > </ table > </ body > </ html > |
运行浏览器后得到的效果如图
附加说明:align 属性可以使文本围绕在表格周围。在 HTML 4.01 中,不赞成使用 body 元素的 bgcolor 属性,HTML5中属性bgcolor也是过时的,这里作为一个对表格的了解就行。那要修改table的属性怎么办,咱们可以使用css代替。
CSS 语法:
1 |
<table style= "float:right" > |
二、<table> 标签的 bgcolor 属性
bgcolor 属性规定规定表格的背景颜色。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >表格属性</ title > </ head > < body > <!--规定颜色值为颜色名称的背景颜色--> < table border = "1" bgcolor = "gray" > < tr > < td >《登鹳雀楼》(王之涣)</ td > < td >《静夜思》(李白)</ td > </ tr > < tr > < td >《寻隐者不遇》(贾岛)</ td > < td >《相思》(王维)</ td > </ tr > </ table > </ body > </ html > |
运行浏览器后得到的效果如图
附加说明:HTML5 已不支持bgcolor属性,请使用 CSS 代替。
CSS 语法:
1 |
<table style= "background-color:gray" > |
三、<table> 标签的 border 属性
border 属性规定规定围绕表格的边框的宽度。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >表格属性</ title > </ head > < body > <!--把表格周围的边框设置为 8 像素宽--> < table border = "8" > < tr > < td >《登鹳雀楼》(王之涣)</ td > < td >《静夜思》(李白)</ td > </ tr > < tr > < td >《寻隐者不遇》(贾岛)</ td > < td >《相思》(王维)</ td > </ tr > </ table > </ body > </ html > |
运行浏览器后得到的效果如图
border 属性会为每个单元格应用边框,并用边框围绕表格。如果 border 属性的值发生改变,那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。
提示:设置 border="0",可以显示没有边框的表格。从实用角度出发,最好不要规定边框,而是使用 CSS 来添加边框样式和颜色。
四、<table> 标签的 cellpadding 属性
cellpadding 属性规定单元边沿与其内容之间的空白。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >表格属性</ title > </ head > < body > <!--把表格单元边界与单元内容之间的间距设置为 10 像素--> < table border = "8" cellpadding = "10" > < tr > < td >《登鹳雀楼》(王之涣)</ td > < td >《静夜思》(李白)</ td > </ tr > < tr > < td >《寻隐者不遇》(贾岛)</ td > < td >《相思》(王维)</ td > </ tr > </ table > </ body > </ html > |
运行浏览器后得到的效果如图
五、<table> 标签的 cellspacing 属性
cellspacing 属性规定单元格之间的空间。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >表格属性</ title > </ head > < body > <!--把表格单元格间距设置为 10 像素--> < table border = "8" cellspacing = "10" > < tr > < td >《登鹳雀楼》(王之涣)</ td > < td >《静夜思》(李白)</ td > </ tr > < tr > < td >《寻隐者不遇》(贾岛)</ td > < td >《相思》(王维)</ td > </ tr > </ table > </ body > </ html > |
运行浏览器后得到的效果如图
注释:请勿将该属性与 cellpadding 属性相混淆,cellpadding 属性规定的是单元边沿与单元内容之间的空间。
六、<table> 标签的 frame 属性
frame 属性规定外侧边框的哪个部分是可见的。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >表格属性</ title > </ head > < body > < p >1、void不显示外侧边框</ p > < table frame = "void" > < tr > < td >《登鹳雀楼》(王之涣)</ td > < td >《静夜思》(李白)</ td > </ tr > </ table > < p >2、above显示上部的外侧边框</ p > < table frame = "above" > < tr > < td >《寻隐者不遇》(贾岛)</ td > < td >《相思》(王维)</ td > </ tr > </ table > < p >3、below显示下部的外侧边框</ p > < table frame = "below" > < tr > < td >《登鹳雀楼》(王之涣)</ td > < td >《静夜思》(李白)</ td > </ tr > </ table > </ body > </ html > |
运行浏览器后得到的效果如图
属性值
值 | 描述 |
---|---|
void | 不显示外侧边框。 |
above | 显示上部的外侧边框。 |
below | 显示下部的外侧边框。 |
hsides | 显示上部和下部的外侧边框。 |
vsides | 显示左边和右边的外侧边框。 |
lhs | 显示左边的外侧边框。 |
rhs | 显示右边的外侧边框。 |
box | 在所有四个边上显示外侧边框。 |
border | 在所有四个边上显示外侧边框。 |
七、<table> 标签的 rules 属性
rules 属性规定内侧边框的哪个部分是可见的。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >表格属性</ title > </ head > < body > <!--只有行之间的边框是可见的--> < table rules = "rows" > < tr > < td >《登鹳雀楼》(王之涣)</ td > < td >《静夜思》(李白)</ td > </ tr > < tr > < td >《寻隐者不遇》(贾岛)</ td > < td >《相思》(王维)</ td > </ tr > </ table > </ body > </ html > |
运行浏览器后得到的效果如图
属性值
值 | 描述 |
---|---|
none | 没有线条。 |
groups | 位于行组和列组之间的线条。 |
rows | 位于行之间的线条。 |
cols | 位于列之间的线条。 |
all | 位于行和列之间的线条。 |
八、<table> 标签的 summary 属性
summary 属性规定表格内容的摘要。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >表格属性</ title > </ head > < body > <!--定义了表格内容的摘要--> < table border = "1" summary = "唐诗三百首以及作者" > < tr > < td >《登鹳雀楼》(王之涣)</ td > < td >《静夜思》(李白)</ td > </ tr > < tr > < td >《寻隐者不遇》(贾岛)</ td > < td >《相思》(王维)</ td > </ tr > </ table > </ body > </ html > |
运行浏览器后得到的效果如图
附加说明:summary 属性不会对普通浏览器中产生任何视觉变化。
九、<table> 标签的 width 属性
width 属性规定表格的宽度。
如果没有设置 width 属性,表格会占用需要的空间来显示表格数据。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >表格属性</ title > </ head > < body > <!--带有 400 像素宽度的表格--> < table border = "1" width = "400" > < tr > < td >《登鹳雀楼》(王之涣)</ td > < td >《静夜思》(李白)</ td > </ tr > < tr > < td >《寻隐者不遇》(贾岛)</ td > < td >《相思》(王维)</ td > </ tr > </ table > </ body > </ html > |
运行浏览器后得到的效果如图
附加说明:从实用角度出发,最好不要规定宽度,而是使用 CSS 来应用宽度。
你觉得文章内容怎么样