table标签总结

Posted king911

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table标签总结相关的知识，希望对你有一定的参考价值。

一、table标签：定义一个表格
简单表格由table元素以及一个或多个tr（行标签）、th（表头单元格标签）、td（普通单元格标签）

<table border=1>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>
复杂的表格还包括caption（表格标题）、col(定义列)、colgroup(对表格中的列进行组合)、thead（组合表头的内容）tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)

<table width="400" border="1">
<caption>表格的标题</caption>
<col align="left"/>
<col align="left"/>
<col align="left" />
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注1</td>
<td>脚注2</td>
<td>脚注2</td>
</tr>
</tfoot>
</table>
A．width:规定表格的宽度、height:规定表格的高度
如果不设置宽度高度，表格会根据表格内容自动调整表格的宽度高度

B．align属性：规定表格相对周围元素的对齐方式
表格前后都会出现折行，但是运用align属性，可实现其他html元素围绕表格的效果。相当于使用css的float属性

1.left
<table border=1 align="left">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
<p>demo</p>
2.center
align=center 表格还是占据一整行

<table border=1 align="center">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
<p>demo</p> 
3.right
<table border=1 align="right">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
<p>demo</p> 
C．bgcolor属性：规定表格的背景颜色
相当于使用css的background-color属性

1.colorname:颜色值为颜色名称的背景颜色
2.hex_number:颜色值为十六进制的背景颜色
3.rgb_number:颜色值为rgb代码的背景颜色
D．background属性：规定表格的背景图像
background属性的值直接写url

<table border=1 background="image/demo.jpg">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
E．border属性：规定表格边框的宽度
border属性会为每个单元格应用边框，并用边框围绕表格

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

<table border=10>
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
F．cellspacing属性：规定单元格之间的间距
cellspacing设为0时,表格间没有间距,表格边框将紧挨着显示,若要使表格边框合并,则需使用CSS的border-collapse:collapse

<table border=1 cellspacing="0">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
<table border=1 cellspacing="10">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
G．cellpadding属性：规定单元格边界与单元格内容之间的间距,默认为0
<table border=1 cellpadding="10">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
H．frame属性：规定外侧边框的那个部分是可见的
1.void:不显示外侧边框
<table border=1 frame="void" rules="none">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
2.box:显示所有的外侧边框
<table border=1 frame="box" rules="none">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
3.border:显示所有的外侧边框
与frame="box"显示效果相同

4.above:显示上部的外侧边框
<table border=1 frame="above" rules="none">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
5.below:显示下部的外侧边框
<table border=1 frame="below" rules="none">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
6.lhs:显示左侧边框
<table border=1 frame="lhs" rules="none">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
7.rhs:显示右侧边框
<table border=1 frame="rhs" rules="none">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
8.hsides:显示上下侧的外侧边框
<table border=1 frame="hsides" rules="none">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
9.vsides:显示左右侧的外侧边框
<table border=1 frame="vsides" rules="none">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
I．rules属性：规定内侧边框的那个部分是可见的
1.none:内部没有线条
<table border=1 frame="void" rules="none">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
2.all:显示内部所有的线条
<table border=1 frame="void" rules="all">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
3.rows:显示行之间的线条
<table border=1 frame="void" rules="rows">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
4.cols:显示列之间的线条
<table border=1 frame="void" rules="cols">
<tr>
<th>表头1</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<th>表头2</th>
<td>数据1</td>
<td>数据2</td>
</tr>
</table> 
5.groups:显示行组和列组之间的线条
<table border=1 frame="void" rules="groups">
<colgroup span="2"></colgroup>
<colgroup span="3"></colgroup>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
<th>表头5</th>
<th>表头6</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
</table>
二、caption标签:定义表格的标题
表格标题默认居中显示于表格内容上方,表格边框不会将标题包含进去

<table border=1>
<caption>表格的标题</caption>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
</tr>
</table>
align属性:规定表格标题显示位置
1.top:表格标题显示于表格上方,默认 
2.bottom:表格标题显示于表格下方
<table border=1>
<caption align="bottom">表格的标题</caption>
<tr>
<th>数据1</th>
<th>数据2</th>
<th>数据3</th>
<th>数据4</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
</tr>
</table> 
3.left:表格标题显示于表格左边(部分浏览器支持,如:火狐) 
4.right:表格标题显示于表格右边(部分浏览器支持,如:火狐) 
三、tr标签：定义表格中的行
tr标签内不可直接写内容,表格内容一定是写在td或th标签内

A．align属性：规定表格行中的内容的水平对齐方式
1.right:右对齐内容 
2.left:左对齐内容（默认） 
3.center:水平居中对齐内容 
4.justify:对行进行伸展，每行长度相等
<table border=1 width="100">
<tr align="justify">
<th>数据11111111</th>
<th>数据222222222222222</th>
<th>数据3333333333333333333</th>
<th>数据444444</th>
</tr>
</table> 
B．valign属性：规定表格行中内容的垂直对齐方式
1.top:顶部对齐内容 
2.middle：垂直居中对齐内容 
3.bottom：底部对齐内容 
4.baseline：内容与基线对齐 
C．bgcolor属性：设置表格行的背景颜色
四、单元格标签:th标签和td标签
A．th标签:定义表格表头单元格
单元格文本一般显示为居中的粗体文本 

B．td标签:定义表格标准单元格
单元格文本一般显示为左对齐的普通文本

C．rowspan属性:规定单元格横跨的行数
<table border=1 >
<tr>
<td rowspan="3">数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</table>
D．colspan属性:规定单元格横跨的列数
<table border=1 >
<tr>
<td colspan="2">数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</table> 
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 的顺序显示 

<table border=1>
<tfoot>
<tr>
<td>总计</td>
<td>数据</td>
</tr>
</tfoot>
<tbody>
</tr><tr>
<td>数据</td>
<td>数据</td>
</tr>
</tbody>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
</table>
六、列标签:colgroup标签,col标签
1.align:规定列中内容的水平对齐方式
2.valign:规定列中内容垂直对齐方式
3.span:规定列横跨的列数
4.width:规定列的宽度
 

A．colgroup标签:用于对表格中的列进行分组,以便对其进行格式化
colgroup标签只能在table标签中使用
<style>
.one{
background-color: #c00;
}
.two{
background-color: #f00;
}
</style>
<body>
<table border=1 width="200">
<colgroup class="one">
<col />
<col />
</colgroup>
<colgroup span="3" class="two"></colgroup>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</table> 
B．col标签:为表格中的一个或多个列定义属性值
col标签只能在table标签或colgroup标签中使用

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

<style>
.one{
background-color: #c00;
}
.two{
background-color: #f00;
}
</style>
<body>
<table border=1 width="200">
<col class="one"/>
<col class="two"/>
<tr>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
</tr>
</table>


 

以上是关于table标签总结的主要内容，如果未能解决你的问题，请参考以下文章

项目期复习总结2：Table， DIV+CSS，标签嵌套规则

HTML知识点总结

BeautifulSoup标签定位方法总结

css清除浮动总结及table下的tr border设置

表格 表单总结

HTML常用标签总结