table标签总结

一、table标签:定义一个表格

简单表格由table元素以及一个或多个tr(行标签)、th(表头单元格标签)、td(普通单元格标签)

表头1 表头2
内容1 内容2

复杂的表格还包括caption(表格标题)、col(定义列)、colgroup(对表格中的列进行组合)、thead(组合表头的内容)tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)

表格的标题
表头1 表头2 表头3
内容1 内容2 内容3
脚注1 脚注2 脚注2

A.width:规定表格的宽度、height:规定表格的高度

如果不设置宽度高度,表格会根据表格内容自动调整表格的宽度高度

B.align属性:规定表格相对周围元素的对齐方式

表格前后都会出现折行,但是运用align属性,可实现其他html元素围绕表格的效果。相当于使用css的float属性

1.left

表头1 数据1 数据2
表头2 数据1 数据2

demo

2.center

align=center 表格还是占据一整行

表头1 数据1 数据2
表头2 数据1 数据2

demo

 

3.right

表头1 数据1 数据2
表头2 数据1 数据2

demo

 

C.bgcolor属性:规定表格的背景颜色

相当于使用css的background-color属性

1.colorname:颜色值为颜色名称的背景颜色

2.hex_number:颜色值为十六进制的背景颜色

3.rgb_number:颜色值为rgb代码的背景颜色

D.background属性:规定表格的背景图像

background属性的值直接写url

表头1 数据1 数据2
表头2 数据1 数据2

E.border属性:规定表格边框的宽度

border属性会为每个单元格应用边框,并用边框围绕表格

border属性值改变,只会改变表格外边框,表格内部的边框不会改变,还是1px

表头1 数据1 数据2
表头2 数据1 数据2

F.cellspacing属性:规定单元格之间的间距

cellspacing设为0时,表格间没有间距,表格边框将紧挨着显示,若要使表格边框合并,则需使用CSS的border-collapse:collapse

表头1 数据1 数据2
表头2 数据1 数据2
 

表头1 数据1 数据2
表头2 数据1 数据2

G.cellpadding属性:规定单元格边界与单元格内容之间的间距,默认为0

表头1 数据1 数据2
表头2 数据1 数据2
 

H.frame属性:规定外侧边框的那个部分是可见的

1.void:不显示外侧边框

表头1 数据1 数据2
表头2 数据1 数据2
 

2.box:显示所有的外侧边框

表头1 数据1 数据2
表头2 数据1 数据2
 

3.border:显示所有的外侧边框

frame="box"显示效果相同

4.above:显示上部的外侧边框

表头1 数据1 数据2
表头2 数据1 数据2
 

5.below:显示下部的外侧边框

表头1 数据1 数据2
表头2 数据1 数据2

6.lhs:显示左侧边框

表头1 数据1 数据2
表头2 数据1 数据2
 

7.rhs:显示右侧边框

表头1 数据1 数据2
表头2 数据1 数据2
 

8.hsides:显示上下侧的外侧边框

表头1 数据1 数据2
表头2 数据1 数据2
 

9.vsides:显示左右侧的外侧边框

表头1 数据1 数据2
表头2 数据1 数据2
 

I.rules属性:规定内侧边框的那个部分是可见的

1.none:内部没有线条

表头1 数据1 数据2
表头2 数据1 数据2
 

2.all:显示内部所有的线条

表头1 数据1 数据2
表头2 数据1 数据2
 

3.rows:显示行之间的线条

表头1 数据1 数据2
表头2 数据1 数据2
表头2 数据1 数据2
 

4.cols:显示列之间的线条

表头1 数据1 数据2
表头2 数据1 数据2
表头2 数据1 数据2
 

5.groups:显示行组和列组之间的线条

表头1 表头2 表头3 表头4 表头5 表头6
数据1 数据2 数据3 数据4 数据5 数据6

二、caption标签:定义表格的标题

表格标题默认居中显示于表格内容上方,表格边框不会将标题包含进去

表格的标题
数据1 数据2 数据3 数据4
数据1 数据2 数据3 数据4

align属性:规定表格标题显示位置

1.top:表格标题显示于表格上方,默认 

2.bottom:表格标题显示于表格下方

表格的标题
数据1 数据2 数据3 数据4
数据1 数据2 数据3 数据4
 

3.left:表格标题显示于表格左边(部分浏览器支持,如:火狐) 

4.right:表格标题显示于表格右边(部分浏览器支持,如:火狐) 

三、tr标签:定义表格中的行

tr标签内不可直接写内容,表格内容一定是写在td或th标签内

A.align属性:规定表格行中的内容的水平对齐方式

1.right:右对齐内容 

2.left:左对齐内容(默认) 

3.center:水平居中对齐内容 

4.justify:对行进行伸展,每行长度相等

数据11111111 数据222222222222222 数据3333333333333333333 数据444444
 

B.valign属性:规定表格行中内容的垂直对齐方式

1.top:顶部对齐内容 

2.middle:垂直居中对齐内容 

3.bottom:底部对齐内容 

4.baseline:内容与基线对齐 

C.bgcolor属性:设置表格行的背景颜色

四、单元格标签:th标签和td标签

A.th标签:定义表格表头单元格

单元格文本一般显示为居中的粗体文本 

B.td标签:定义表格标准单元格

单元格文本一般显示为左对齐的普通文本

C.rowspan属性:规定单元格横跨的行数

数据 数据 数据 数据
数据 数据 数据
数据 数据 数据

D.colspan属性:规定单元格横跨的列数

数据 数据
数据 数据 数据
数据 数据 数据
 

E.width属性:可设置单元格的宽度

F.height属性:可设置单元格的高度

G.align属性:规定单元格内容的水平对齐方式

H.valign属性:规定单元格内容的垂直水平对齐方式

I.nowrap属性:规定单元格内容不换行

五、表格内容分组标签:thead标签、tbody标签、tfoot标签

thead、tfoot 以及 tbody 元素对表格中的行进行分组,方便控制表格的表现。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上(部分浏览器支持,如:火狐)。

这几个标记主要是用于提高table标签的加载以及显示的,即分部加载,不用等到整个表格加载完再显示单元格数据

A.thead标签:组合表格的表头内容

B.tbody标签:组合表格的主体内容

C.tfoot标签:组合表格的页脚/脚注内容

不管代码顺序如何,页面始终按照thead>tbody>tfoot 的顺序显示 

总计 数据
数据 数据
表头 表头

六、列标签:colgroup标签,col标签

1.align:规定列中内容的水平对齐方式

2.valign:规定列中内容垂直对齐方式

3.span:规定列横跨的列数

4.width:规定列的宽度

 

A.colgroup标签:用于对表格中的列进行分组,以便对其进行格式化

colgroup标签只能在table标签中使用



数据 数据 数据 数据 数据 数据
数据 数据 数据 数据 数据 数据
 

B.col标签:为表格中的一个或多个列定义属性值

col标签只能在table标签或colgroup标签中使用

col标签是只包含属性的空元素,列的内容均显示在tr元素内的td元素中



数据 数据
数据 数据


 

你可能感兴趣的:(table标签总结)