table标签总结

12月27日 收藏 30 评论 7 前端开发

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>




本文转载自网络

C 7条回复 评论
米线还有吗

收藏不息,战斗不止

发表于 2022-05-01 21:00:00
0 0
偷看星星

收藏不息,战斗不止

发表于 2021-11-20 23:00:00
0 0
Bunny

踩坑了,这道不该错的

发表于 2021-09-16 22:00:00
0 0
Amusi

我想咨询下,如果是做产品经理,考研可以考哪些相关专业

发表于 2021-09-12 14:15:00
0 0
带脑斧

安利一款我用过最好用的接口测试工具——apipost ,页面简洁,操作简单功能也多。

发表于 2021-09-10 20:50:00
0 0
Peach

正在研究redis,感谢,太赞了!!!!!

发表于 2021-09-10 09:50:00
0 0
橘子狂人

大佬,能转载下吗?

发表于 2021-09-09 18:40:00
0 0