📜  HTML |表

📅  最后修改于: 2021-11-07 08:59:55             🧑  作者: Mango

表是按行和列排列的数据,或者可能采用更复杂的结构。表格广泛用于交流、研究和数据分析。

  • 表格可用于各种任务,例如呈现文本信息和数字数据。
  • 表格可用于比较表格形式布局中的两个或多个项目。
  • 表用于创建数据库。

在 HTML 中定义表格
HTML 表格是用“table”标签定义的。每个表格行都用“tr”标签定义。表头用“th”标签定义。默认情况下,表格标题为粗体且居中。表格数据/单元格用“td”标签定义。
例子:

html


  

  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
     


html


  

    

  

    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  


html


  

    

  

  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  


html


  

    

  

  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  


html

  

    

  

  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  


html

  

    

  

  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  


html


  

    

  

  
    

Cell that spans two columns:

                                                                                                              
NameTelephone
Vikas Rawat91255778548565557785
  


html


  

    

  

  
    

Cell that spans two rows:

                                                                                                                                
Name:Vikas Rawat
Telephone:9125577854
8565557785
  


html

  

    

  

  
    
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
DETAILS
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  


html


  

    

  

  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
       
    
                                                                                                                                                                                                                                                   
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  


html


  

    
        
            
              
            
        
    
                Fisrt Column of Outer Table                                                                                                                                                                                     
                            First row of Inner Table                         
                            Second row of Inner Table                         
            
  


输出:

HTML 中的重要表格选项

  1. 向 HTML 表格添加边框:使用 CSS 边框属性设置边框。如果您没有为表格指定边框,它将显示为没有边框。

  1. 示例

html



  

    

  

    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  
  1. 输出 :

  1. 在 HTML 表格中添加折叠边框:要将边框折叠为一个边框,请添加 CSS 边框折叠属性。

  1. 例子:

html



  

    

  

  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  
  1. 输出:

  1. 在 HTML 表格中添加单元格填充:单元格填充指定单元格内容与其边框之间的空间。如果我们不指定填充,表格单元格将不带填充显示。

  1. 例子:

html



  

    

  

  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  
  1. 输出:

  1. 在 HTML 表格中添加左对齐标题:默认情况下,表格标题为粗体且居中。要左对齐表格标题,我们必须使用 CSS text-align 属性。

  1. 例子:

html


  

    

  

  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  
  1. 输出:

  1. 在 HTML 表格中添加边框间距:边框间距指定单元格之间的间距。要设置表格的边框间距,我们必须使用 CSS border-spacing 属性。

  1. 例子:

html


  

    

  

  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  
  1. 输出:

  1. 在 HTMl 表中添加跨越多列的单元格:要使单元格跨越多列,我们必须使用 colspan 属性。
    例子:

html



  

    

  

  
    

Cell that spans two columns:

                                                                                                              
NameTelephone
Vikas Rawat91255778548565557785
  
  1. 输出:

  1. 在 HTML 表格中添加跨越多行的单元格:要使单元格跨越多行,我们必须使用 rowspan 属性:
    例子:

html



  

    

  

  
    

Cell that spans two rows:

                                                                                                                                
Name:Vikas Rawat
Telephone:9125577854
8565557785
  
  1. 输出:

  1. 在 HTML 表格中添加标题:要向表格添加标题,我们必须使用“标题”标签。

  1. 例子:

html


  

    

  

  
    
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
DETAILS
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  
  1. 输出:

  1. 在 HTML 中为表格添加背景颜色:可以使用“background-color”选项在 HTML 表格中添加颜色作为背景。

  1. 例子:

html



  

    

  

  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
       
    
                                                                                                                                                                                                                                                   
FirstnameLastnameAge
PriyaSharma24
ArunSingh32
SamWatson41
  
  1. 输出:

  1. 在 HTML 中创建嵌套表:嵌套表只是意味着在另一个表中创建一个表。嵌套表格会导致复杂的表格布局,这在视觉上很有趣并且有可能引入错误。
    例子:

html



  

    
        
            
              
            
        
    
                Fisrt Column of Outer Table                                                                                                                                                                                     
                            First row of Inner Table                         
                            Second row of Inner Table                         
            
  
  1. 输出:

支持的浏览器:HTML表格支持的浏览器如下:

  • 谷歌浏览器
  • IE浏览器
  • 火狐
  • 歌剧
  • 苹果浏览器

HTML 是网页的基础,用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。