HTML学习笔记（一）——表格

表格结构

表格结构：表格分有表头（）表格主体正文()表尾()，以及表格标题（caption）会自动出现在整张表格的上方，此外对表格的更长描述可以写在table标签的summary属性中，其次（）定义表格的表头单元格，且th元素内部的文本通常会呈现为粗体代码示例：

        
表格示例展示
        

            

                
时间：
                
收入：
                
支出：
            
        
        

            

            
备注：
            
        
        

            

                
2015-07-12
                
200
                
50
            
            

                
2015-07-13
                
200
                
30
            
            

                
2015-07-14
                
200
                
40
            
        
    

在浏览器中的显示效果如下图：

1.jpg

这里有几个注意点：

* thead和tfoot在一张表中只能有一个，而tbody可以有多个
* tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，这有利于加快表
  格的显示速度。这一点对大型表格尤其重要
* thead 、tbody和tfoot里面都必须使用tr标签，以表示行
* 同时注意th是表头thead中的单元格与td数据单元有区别  

列分组

tbody可以用来对“行”进行分组，colgroup则用来对“列”进行分组。
例如：下面代码表示前2列为一组，每一列的宽度为20px。

浏览器显示效果如下：

2.jpg

几个注意点：

* span属性，用来指定colgroup标签能够控制的列数
* 在colgroup标签内部，可以使用col标签来指定每一列的属性
* 其中我们还可以在col中使用span属性来进行列分组

例如，下面的代码表示第一列宽度为300px，第二列宽度为100px：

浏览器显示效果如下：

3.jpg

css中的table-layout语句

这个语句可以用来指定表格显示样式，列如

table {table-layout:fixed;}

它可以取三个值：

* auto(缺省)
* fixed
* inherit

auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定，如果所有的单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格的内容超出单元格的大小，则用CSS中的overflow控制。同时表格的显示速度可以加快100倍。
同时注意：

* 想要加快表格显示，最好事先在CSS或者table标签的width和height属性中指定
  表格的宽度和高度

th和td的区别

表示单元格的标签是th（table head）和td（table data），前者用来显示数据名称，后者用来显示数据内容
代码示例：

　　
    　
  　
  　　
    　
  　

  

    
Month
Savings

    
January
$100

frame和rules属性

table标签的frame和rules属性，可以控制边框的显示；frame属性规定外侧边框的哪个部分是可见的。rules属性规定内侧边框的哪个部分是可见的。
frame属性可取的属性值如下：

* void - 默认值。表示不显示表格最外围的边框
* above - 只显示上部的外侧边框
* below - 只显示下部的外侧边框
* hsides - 显示上部和下部的外侧边框
* vsides - 显示左边和右边的外侧边框
* lhs - 显示左边的外侧边框
* rhs - 显示右边的外侧边框
* box - 在所有四个边上显示外侧边框
* border - 在所有四个边上显示外侧边框

rules属性可取的属性值如下：

* none - 没有线条
* groups - 位于行组和列组之间的线条
* rows - 位于行之间的线条
* cols - 位于列之间的线条
* all - 位于行和列之间的线条（即单元格）

代码示例：

        
            
            
        
        
表格示例展示
        

            

                
时间：
                
收入：
                
支出：
            
        
        

            

            
备注：
            
日期：
            
总计：
            
        
        

            

                
2015-07-12
                
200
                
50
            
            

                
2015-07-13
                
200
                
30
            
            

                
2015-07-14
                
200
                
40
            
        
    

浏览器显示效果如下：

4.jpg

table中常用属性及取值

* border -[可取像素值] 规定表格边框的宽度
* cellpadding -[可取像素值和百分比] 规定单元边沿与其内容之间的空白
* cellspacing - [可取像素值和百分比]规定单元格之间的空白 
* frame - 规定外边框的哪个部分可见 
* rules - 规定内边框的哪个部分可见
* summary - 规定表格的摘要描述
* width - 规定表格的宽度

td常用属性及取值

* align - [left-right-center-justify-char]规定单元格内容的水平对齐方式
* headers - [headers_cells'_id]规定单元格相关的表头
* colspan - [number]规定单元格可横跨的列数
* rowspan - [number]规定单元格可横跨的行数

最后注意一点：

* 表格中不能不写tbody，因为不写tbody这标签，浏览器也会自动为你加上，当别人阅读你的代码
  时，会产生一些困惑，所以建议加上这个标签

详细属性参考
此文章中多数引用——阮一峰的网络日志