【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行...

 

1、常用表格标签 

普通

         

 

         |           

         |           |         

         |           |         

         |           

         

 

常用

 

 

frame="void"     -- 表格边框重合  ( 在边框用  border="1" 表示的情况下 )

给外侧

标签 描述
定义表格
定义表格的表头
定义表格的行
定义表格单元
定义表格标题
定义表格列的组
定义用于表格列的属性
定义表格的页眉
定义表格的主体
定义表格的页脚

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

            tr :元素定义表格行,

            th :元素定义表头,大多数浏览器会把表头显示为粗体居中的文本,

            td: 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

           caption:定义表格的标题。标签必须直接放置到

标签之后。只能对每个表格定义一个标题。

                       所有主流浏览器都支持

 
 
 

   .........................


解决方法二: 

设置一个隐藏的行来规定宽度: 

标签。默认居中可通过 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。

           colgroup对表格中的列进行组合,可以向整个列应用样式。只能在

元素之内, 标签。如果想对 中的某列定义不同的属性,请在 标签内使用  标签。

                                            --两列变为红色

                                    span  规定列组应该横跨的列数。

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

没有结束标签。只能在 table 或 colgroup 元素中使用 标签。                     

                                           


                                                   
                                                   
                                         

 

             thead:标签用于组合 HTML 表格的表头内容。作为

元素之后,任意元素之前使用 。

                      所有主流浏览器都支持

元素的子元素,出现在 元素之后,、 和 元素之前。

                          元素内部必须包含一个或者多个

标签。

             tbody:用来规定表格的主体内容

             tfoot:用来规定表格的页脚部分

                          三者结合起来使用通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。

                          当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

 

2、属性  

属性 描述
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
规定内侧边框的哪个部分是可见的。
summary text 规定表格的摘要。
width
  • %
  • pixels
规定表格的宽度。

 

3、边框 

           border属性 规定表格边框的宽度。               

                                  <table border="1">  table>     边框为1px

           border-collapse:   属性设置表格的边框是否被合并为一个单一的边框

                                       如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。

collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit 规定应该从父元素继承 border-collapse 属性的值

 

   制作一个各边都为1px的边框 

      1.                     <table border="1">  table         |

                             table{border-collapse:collapse}     |      -- --所有边框都为1px 的表格

 

      2、                table    的CSS为  {  border-collapse:collapse;  border:none;  }

                           td         的CSS为  {  border:solid #000 1px;  }

 

 

 4、关于html中table表格tr,td的高度和宽度 

 

 1、table中的width和height设置及其作用:

     table 中设置的 height 其实是设置一个最小值

                    当表格中的内容或者行高总值超过这个设置值时,会自动延长表格的height值,

                     当表格中的内容或者行高没有达到这个值时,会自动扩大到这个值。

       table 中设置的 width 值一般为表格宽度的最大值,不能改变,即使内部的内容宽度超过也不能改变。

                   (这个内部内容如果是图片的话是可以改变表格宽度的。)

 2、tr标签中width和height设置及其作用:

       tr 标签里面的 width 设置不起任何作用。

       tr 中的 height 设置和几个tr之间的设置有关。

                 当几个 tr 都设置了 height 的具体数值时,各个 t r的 height 按照设置的值的比例来分配总的height值,

                 当几个 tr 都没有设置 height 具体值时,平均分配总的height值。

                 当 tr 设置了具体的数值,有的没有设置具体的数值为默认时,先保证各个tr的基本需要,剩下的再满足设置了具体值的tr,之后再全部给没有设置具体值的tr。

                 宽度不够 tr 总的设置值的情况,要满足tr的基本需要,这里会自动延长表格的height的。然后再考虑设置了height的tr,最后考虑没有设置height的tr。

3、td标签中width和height设置及其作用:

      td 的 width 是和所处的一列每个 td 的 width 都相关的,取其中最大的 width 作为这一列中每个 td 的 width,

                 各个 td 之间的宽度分配按照第二条中各 tr 的 height 分配规律,

                 各td的width不是平均分配,而是根据各自的实际内容按比例分配。

      td 的 height要 看这个td所在的行的最大高度来确定这一行的每个td的height,然后各个行的高度情况和tr中的height分配原则是一样的。

4、td的height和tr的height之间的关系。

     首先肯定是根据内容的需要,在这个基础上,再根据设置的值来确定,哪个设置的值大就按照哪个,

    如果一个设置了值一个没有设置值,那么按照设置值的算。

 

 

 

 5、表格内容自动换行

一 汉字换行

        table-layout:fixed          //固定表格大小(不会被撑大)

        word-break:break-all;   //字符串自动换行

 

table-layout

                                                所有主流浏览器都支持table-layout属性。

描述
automatic 默认。列宽度由单元格内容设定。
fixed

表的宽度和列的宽度固定,不随单元格中内容而改变

一.     设置了各个列的宽,没有设表的宽:表的宽度等于各个列的宽度的和

二.     设置了表的宽度,没有设各个列的宽度:各个列的宽度平均分配

三.     要是都没设置宽度:表的宽度为100%,各个列的宽度平均分配

inherit 规定应该从父元素继承 table-layout 属性的值

                                              注意: IE7和更早的版本不支持"inherit"的值。IE8需要定义!DOCTYPE。IE9支持"inherit"。

 

                  要想固定table的总的宽度和每列的宽度:

                                     

 

  word-break

                    指定非CJK脚本的断行规则 (CJK脚本是中国,日本和韩国("中日韩")脚本)。

描述
normal 使用浏览器默认的换行规则。允许在词间换行
break-all

允许在单词内换行。不管在什么位置,超过列宽时就回行

允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all

只能在半角空格或连字符处换行。

不允许 Chinese, Japanese, 和 Korean 回行

 

 
   

 

注意:
            1、(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

                       


                               
                                         

                               

                     

                                               abcdefghigklmnopqrstuvwxyz 1234567890

                                       


 
         2、(Firefox浏览器)不能解决连续的英文字符和阿拉伯数字的断行, ,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
               (Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,

                  使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用


             

                     


                             

                       

               

                                    abcdefghigklmnopqrstuvwxyz1234567890 

                             

 

二、英文强行截断换行

可以利用css中的word-break 风格来达到我们的目的:

1、设置table中的单元格内容自动换行,为了满足浏览器兼容性,需要在table中设置table-layout:fixed。

2、word-wrap在div属性中能起到换行的作用,也可以在td中使用div,在div里面设置。



 


    
        
        
        
        
        
    
      
        
        
          
          
          
     
 
全是中文有标点全是中文无标点全是英文有标点中文和英文全是英文无标点
你好这是中文。你好这是中文。你好这是中文。你好这是中文。你好这是中文你好这是中文你好这是中文你好这是中文This is all English. This is all English. This is all English.中英文混排的情况。Chinese and English.中英文混排的情况。Chinese and English.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

 
中文中文中文中文中文中文中文中文中文中文中文

 

 

6、合并单元格

colspan    单元格横向跨越

rowspan   单元格纵向跨越

                             -- 纵向合并(跨越) 3 个 单元格

                             -- 横行合并(跨越)2 个单元格 

 


当 表格设置了 style ="table-layout:fixed" 后,如果在第一行合并了单元格,则下面的单元格的宽度就会无法设置

原因:table-layout: fixed 的表格,各列宽度由第一行决定,后面指定的宽度会被忽略。你第一行合并了,所以各列宽度均分了。 

解决方法一: 

在tbody前加 

 
   
     
     
     
   
   
     
     
   
   
     
     
     
   
12
1.12.12.2
 


这个方法,在IE6,IE7,IE8中都可以正确地显示,但在非IE中,是没起作用的。下面给出另外一种方法: 

 

 

 
   
     
     
     
   
   
     
     
   
   
     
     
     
   
12
1.12.12.2

 

 7、打印表格每页都有的表头和打印分页

 

当页面太长,打印的时候,要求每页上都要有表头,结尾,

           表头: 定义其thead,并对其样式设置成:style="display:table-header-group"。

            结尾:定义其tfoot,并对style="display:table-footer-group"

 

       

display:table-header-group;font-weight:bold">

                     

                             

                     


         

       


    

      

    


  

  

display:table-footer-group;font-weight:bold">
    

      

    

  

每页都有的表头 
表格内容
每页都有的表尾


 

 8、表格嵌套 

 

  

frame="void">
    
      
    
  
生产人员工资

  一个基础高度, 中的高 宽都是 100%。  --边框线沾满单元格不会出现空白

属性 cellspacing  在这里不好用  ,可以设置外侧

 的 样式  padding=0 去除边框线之间的空间

 

转载于:https://www.cnblogs.com/Tanghongchang/p/7325849.html

你可能感兴趣的:(【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行...)