03 HTML_网页中的表格

定义表格区域

border 表格边框

定义表格的行

行中的单元格

表格表头

表格标题

colspan 水平合并

rowspan 垂直合并


table  border  caption  colspan  rowspan

表格基本结构

一个最基本的HTML表格包括

,,构成了表格的行,是行中的一个单元格。

语法:

这三种标签,他们是双标签结构,这三个标签搭配使用就可以创建一个基础表格,其中
定义了一个表格的区域,

       

       

       

...内容


 


   
     
     
     
   
   
     
     
     
   
 
一行一列的单元格一行二列的单元格一行三列的单元格
二行一列的单元格二行二列的单元格二行三列的单元格


在浏览器中展示效果如下


表格边框属性border   
语法:

...

border属性要写在

标签中, 并且border属性值只表示是否显示表格边框,只

允许为“1”或者“ ” (默认值为:空)。


 


   
     
     
     
   
   
     
     
     
   
 
一行一列的单元格一行二列的单元格一行三列的单元格
二行一列的单元格二行二列的单元格二行三列的单元格


在浏览器中展示效果如下


表格表头
一般把标签放在第一行内来使用,表示表格的表头。


 


   
     
     
     
   
   
     
     
     
   
   
     
     
     
   
 
一行一列表头一行二列表头一行三列表头
一行一列的单元格一行二列的单元格一行三列的单元格
二行一列的单元格二行二列的单元格二行三列的单元格


在浏览器中展示效果如下:

表格标题
标签可以为表格添加一个标题。标签是双标签结构,必须写到

开始标签之后,每个表格只能设置一个标题。


  
                                                                                   
表格的标题
一行一列表头一行二列表头一行三列表头
一行一列的单元格一行二列的单元格一行三列的单元格
二行一列的单元格二行二列的单元格二行三列的单元格


在浏览器中的展示效果如下:

03 HTML_网页中的表格_第1张图片

表格单元格合并
单元格水平跨度colspan

...

单元格垂直跨度rowspan

...

表格间嵌套

一个表格的单元格内部再嵌入另一个表格。

例子:

HTML代码块:




    
    嵌套表格


    
        
        
            
 
            
 
            
        
 
        
            
 
        
    
表格嵌套(外层表格)
一行一列                                                                                                                                
内层一行一列
内层二行一列
           
一行三列
二行  二 三列

运行结果:

03 HTML_网页中的表格_第2张图片

你可能感兴趣的:(JavaWeb,html,css,elementui)