总结HTML 表格标签

一、概述

    HTML表格由table标签以及一个或多个tr、th或td标签组成：table标签用来定义表格；tr标签用来定义表格中的行，它是单元格的容器，每行可以包含多个单元格；td标签和th标签用来定义单元格，所有单元格都在tr标签内，具体的表格内容放置在一对td标签或th标签之中。

二、table 标签

 1）border 设置 table 的边框宽度；border 取值为空字符串或 "1", 若为 "1" ，则为数据表格，否则为布局表格！​

2）summary 属性描述表格摘要信息；border 和 summary 属性必须填！

​ 3）cellpadding 属性为表格填充，规定单元格内容与单元格边沿之间的空间，类似盒子标签中的padding属性；

​ 4）cellspacing 属性规定单元格之间的空间

​ cellspacing 设为 0 时，表格间没有间距，表格边框将紧挨着显示，使用 css 的 border-collapse = collapse; 属性可以使表格边框合并

​ 5）frame 属性 ：规定外侧边框的那个部分是可见的

​ 1、void ：不现实外侧边框；​

 2、box ：显示所有的外侧边框；​

 3、border ：显示所有的外侧边框，与 frame = "box" 显示效果相同；

​ 4、above ：显示上部的外侧边框；

​ 5、below ：显示下部的外侧边框；​

 6、lns ：显示左侧的边框；​

 7、rhs ：显示右侧的边框；​

 8、hsides ：显示上下侧的外侧边框；​

 9、vsides ：显示左右侧的外侧边框。

​ 6） rules 属性 ：规定内测边框的那个部分是可见的

1、none ：内部没有线条；

​2、all ：显示内部所有的线条；

​3、rows ：显示行之间的线条；​

4、cols ：显示列之间的线条；

​5、groups ：显示行组与列祖之间的线条；

三、caption 标签：定义表格的标题

表格标题默认居中显示于表格内容上方，表格边框不会将标题包含进去，代码如下：

    

        

            

            

            

            

        

        

            

            

            

            

        

表格的标题

数据1	数据2	数据3	数据4
数据1	数据2	数据3	数据4

align 属性：规定表格标题显示位置 ，其属性值如下：

        top ：表格标题显示于表格的上方，默认；

        bottom ：表格标题显示于表格下方；

        left ：表格标题显示于表格左边（部分浏览器支持：如火狐）；

        right ：表格标题显示于表格右边（部分浏览器支持：如火狐）。

四、tr 标签 ：定义表格中的行

        tr 标签内不可直接写内容，表格内容一定是写在 td 或 th 标签内

1） align 属性 ：规定表格行中的内容水平对齐方式，其属性值如下：

            right ：右对齐内容；

            left ：左对齐内容；

            center：水平居中对齐内容；

            justify ：对行进行伸展，每行长度相等

justify 示例：

       

        

            

            

            

            

        

数据11111111	数据222222222222222	数据3333333333333333333	数据444444

2） valign 属性：规定表格行中内容的垂直对齐方式，其属性值如下：

            top ：顶部对齐内容；

            middle ：垂直居中对齐内容；

            bottom ：底部对齐内容；

            baseline ：内容与基线对齐

3）background-color 属性：设置表格行的背景颜色；

五、单元格标签 ：th 标签 和 td 标签

        1、th 标签 ：定义表格表头单元格

            单元格文本一般显示为居中的粗体文本

        2、td 标签 ：定义表格标准单元格

            单元格文本一般显示为左对齐的普通文本

        3、rowspan 属性 ：规定单元格横跨的行数

        4、colspan 属性：规定单元格横跨的列数

        示例：

        5、width 属性 ：设置单元格的宽度；

        6、height 属性 ：设置单元格的高度；

        7、align 属性：规定单元格内容的水平对齐方式；

        8、valign 属性 ：规定单元格内容的垂直水平对齐方式；

        9、nowrap 属性 ：规定单元格内容不换行。

六、表格内容分组标签 ：

        thead 标签 ：组合表格的表头部分

        tbody 标签 ：组合表格的主体部分

        tfoot 标签 ：组合表格的页脚 / 脚注内容

        这几个标签主要是用于提高 table 标签的加载以及显示的，即分部加载，不用等到整个表格加载完再显示单元格数据；

示例：

七 、列标签 ： colgroup标签 ， col 标签

            align ：规定列中内容的水平对齐方式

            valign:规定列中内容垂直对齐方式

            span:规定列横跨的列数

            width:规定列的宽度

    1、colgroup标签:用于对表格中的列进行分组,以便对其进行格式化 ；colgroup标签只能在table标签中使用；

     2、col标签:为表格中的一个或多个列定义属性值，

            col标签只能在table标签或colgroup标签中使用；

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

示例：