一、table标签:定义一个表格
简单表格由table元素以及一个或多个tr(行标签)、th(表头单元格标签)、td(普通单元格标签)
复杂的表格还包括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
demo
2.center
align=center 表格还是占据一整行
demo
3.right
demo
C.bgcolor属性:规定表格的背景颜色
相当于使用css的background-color属性
1.colorname:颜色值为颜色名称的背景颜色
2.hex_number:颜色值为十六进制的背景颜色
3.rgb_number:颜色值为rgb代码的背景颜色
D.background属性:规定表格的背景图像
background属性的值直接写url
E.border属性:规定表格边框的宽度
border属性会为每个单元格应用边框,并用边框围绕表格
border属性值改变,只会改变表格外边框,表格内部的边框不会改变,还是1px
F.cellspacing属性:规定单元格之间的间距
cellspacing设为0时,表格间没有间距,表格边框将紧挨着显示,若要使表格边框合并,则需使用CSS的border-collapse:collapse
G.cellpadding属性:规定单元格边界与单元格内容之间的间距,默认为0
H.frame属性:规定外侧边框的那个部分是可见的
1.void:不显示外侧边框
2.box:显示所有的外侧边框
3.border:显示所有的外侧边框
与frame="box"显示效果相同
4.above:显示上部的外侧边框
5.below:显示下部的外侧边框
6.lhs:显示左侧边框
7.rhs:显示右侧边框
8.hsides:显示上下侧的外侧边框
9.vsides:显示左右侧的外侧边框
I.rules属性:规定内侧边框的那个部分是可见的
1.none:内部没有线条
2.all:显示内部所有的线条
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元素中