HTML有10个表格相关标签
|
<caption>
|
表格的大标题，该标记可以出现在<table> 之间的任意位置。它对于搜索引擎的机器人记录信息十分重要。参数有align、valign
|
|
<col>
|
表格的列定义属性
|
|
<colgroup>
|
定义表格列的分组，Firefox、Chrome 以及Safari 仅支持colgroup 元素的span 和width 属性
|
|
<table>
|
定义表格
|
|
<tbody>
|
定义表格主体
|
|
<td>
|
定义一个单元格
|
|
<tfoot>
|
定义表格的表注(底部)
|
|
<th>
|
定义表格的表头，th元素内部的文本通常会呈现为粗体
|
|
<thead>
|
定义表格的表头
|
|
<tr>
|
定义表格的行
|
<table border="1">
<caption>Table caption here</caption>
<colgroup span="1" style="background:#DEDEDE;"/>
<colgroup span="2" style="background:#EFEFEF;"/>
<!-- Table Header-->
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<!-- Table Footer-->
<tfoot>
<tr>
<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tr>
</tfoot>
<!-- Table Body-->
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
一、<thead> 、<tbody> 、<tfoot>
<thead> 、<tbody> 、<tfoot> 标记。它们分别表示表格的表头，表正文，表脚。在打印网页内容的时候，如果表格很大，一页打印不完，<thead>和<tfoot>将在每一页出现（注意：在IE 中无效，但在 Firefox 有效）。
tbody的特点：
为了让大表格(table)在下载的时候可以分段的显示，就是说在浏览器解析HTML时，table是作为一个整体解释的，使用tbody可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。tbody包含行的内容下载完优先显示，不必等待表格结束。另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就“从头到脚”显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。
三个注意点：
- thead和tfoot在一张表中都只能有一个，而tbody可以有多个
- tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要
- thead、tbody和tfoot里面都必须使用tr标签
二、<caption>
在将caption的align属性设置为left的时候，各个浏览器表现出的样式各不相同
| firefox |
chrome |
IE6 7 8 |
IE9 |
 |
 |
 |
 |
| safari |
|
|
|
 |
|
|
|
三、<colgroup>
在将caption的align属性设置为left的时候，IE6 7对这个属性有反映，其他浏览器都无动于衷。在标签style中添加text-align也是同样的情况
| IE6 7 |
IE8 9、firefox、safari、chrome |
 |
 |
可选的属性
|
属性
|
值
|
描述
|
|
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
|
规定内侧边框的哪个部分是可见的
|
|
width
|
%
pixels
|
规定表格的宽度
|
|
summary
|
text
|
规定表格的摘要。用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。摘要是不会显示出来的，给一些其它的工具使用的，比如盲人阅读器等。
|
|
bordercolor
|
rgb(x,x,x)
#xxxxxx
colorname
|
设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。（不推荐使用bordercolor 属性，而推荐使用CSS 样式表的border 属性来进行设置）
|
1、cellspacing
cellspacing在大部分浏览器中与style中的border-spacing效果相同，但在IE6 7中略有不同
| IE6 7 cellspacing=0 |
IE6 7 border-spacing=0 |
 |
 |
2、css中的border-collapse
css中的border-collapse:collapse | separate 可以设置表格的边框是否被合并成一个边框。将设置为border-collapse:collapse后，各个浏览器显示各不相同
| firefox |
chrome |
IE6 7 8 |
IE9 |
|
|
|
|
| safari |
|
|
|
|
|
|
|
3、<th> <td>中的scope
scope属性定义将表头单元与数据单元相关联的方法；标识某个单元是否是列、行、列组或行组的表头；不会在普通浏览器中产生任何视觉变化；屏幕阅读器可以利用该属性。
使用 scope 属性，可以将数据单元格与表头单元格联系起来。通过属性值 row，表头行包括的所有表格都将和表头单元格联系起来。指定 col，会将当前列的所有单元格和表头单元格绑定起来。
<table border="1">
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<td scope="row">1</td>
<td>January</td>
<td>$100.00</td>
</tr>
<tr>
<td scope="row">2</td>
<td>February</td>
<td>$10.00</td>
</tr>
</table>4、frame , rules
frame常见属性属性值说明above显示上边框border显示上下左右边框below显示下边框hsides显示上下边框lhs显示左边框rhs显示右边框void不显示边框vsides显示左右边框
rules常见属性属性值说明all显示所有内部边框groups显示介于行列边框none不显示内部边框cols仅显示列边框rows仅显示行边框<table border="1" frame="hsides" rules="groups">
<caption>Table caption here</caption>
<colgroup span="1" style="background:#DEDEDE;text-align:center"/>
<colgroup span="2" style="background:#EFEFEF;"/>
<!-- Table Header-->
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<!-- Table Footer-->
<tfoot>
<tr>
<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tr>
</tfoot>
<!-- Table Body-->
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
| firefox |
chrome |
IE6 7 |
IE8 |
 |
 |
 |
 |
| IE9 |
safari |
|
|
 |
 |
|
|
5、CSS中的table-layout
用来指定表格显示的样式
table { table-layout: fixed } * auto（缺省）
* fixed
* inherit
auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。为了加快表格显示，最好事先就在CSS（或者table标签的width和height属性）中指定表格的宽度和高度。
6、跨行rowspan 跨列colspan
熟练掌握表格的colspan、 rowspan属性，可以随心所欲的制作出复杂的表格。
<table border="1">
<caption>Table caption here</caption>
<colgroup span="1" style="background:#DEDEDE;text-align:center"/>
<colgroup span="2" style="background:#EFEFEF;"/>
<!-- Table Header-->
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<!-- Table Footer-->
<tfoot>
<tr>
<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tr>
</tfoot>
<!-- Table Body-->
<tbody>
<tr>
<td rowspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="2">D</td>
</tr>
</tbody>
</table>
经过CSS润色后的table
发挥你的想象力，玩转table
附加中保存的是示例的html代码
table.rar
也可以进入页面http://download.csdn.net/download/loneleaf1/7500555下载
参考资料：
http://blog.csdn.net/lujunql/article/details/5529989 table标签中thead、tbody、tfoot的作用
http://www.w3school.com.cn/tags/tag_table.asp HTML <table> 标签
http://blog.csdn.net/nightelve/article/details/7957726 四个好看的CSS样式表格
http://www.divcss5.com/wenji/w503.shtml CSS如何设置html table表格边框样式
http://www.divcss5.com/html/h380.shtml HTML Table tr td th表格标签元素
http://www.divcss5.com/jiqiao/j470.shtml css table width表格宽度样式设置定义技巧教程篇
http://blog.csdn.net/neoxuhaotian/article/details/6596280 HTML学习笔记（三）
http://www.ruanyifeng.com/blog/2009/05/html_table_mastering.html 精通HTML表格的使用
http://www.douban.com/group/topic/10207896/ html常用标记详讲(二)--Table
http://www.787866.com/835.html html中10个与表格（table）相关标签
http://www.it118.org/specials/f27a38ab-a491-4669-bc47-108d9daed52c/fa512118-f79b-4693-958a-357e44086656.htm html中的表格(table)标签详解
http://www.cnblogs.com/xugang/archive/2010/08/11/1797305.html <table>标签中比较少见的属性和子标签：
http://www.iteye.com/topic/560496 主题：十个最简单实用的Table设计模板
本文转自 咖啡机（K.F.J） 博客园博客，原文链接：http://www.cnblogs.com/strick/p/3789114.html，如需转载请自行联系原作者
