十二、HTML 表格

HTML 表格由 

 标签来定义

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行(由 

 标签定义),每行被分割为若干单元格(由 
 标签定义),表格可以包含标题行()用于定义列的标题。

  • tr:tr 是 table row 的缩写,表示表格的一行。
  • td:td 是 table data 的缩写,表示表格的数据单元格。
  • th:th 是 table header的缩写,表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

以下是一个简单的 HTML 表格实例: 


      
            
                  
                  
                  
                
          
      
            
                  
                  
                  
                
            
                  
                  
                  
                
          
列标题1列标题2列标题3
行1,列1行1,列2行1,列3
行2,列1行2,列2行2,列3

以上的表格实例代码中,

元素表示整个表格,它包含两个主要部分: 和 。

用于定义表格的标题部分: 在 中,使用 用于定义表格的主体部分: 在 中,使用 元素定义行,并在每行中使用 (表格页脚)和 可用于在表格的底部定义摘要、统计信息等内容。
元素定义列的标题,以上实例中列标题分别为"列标题1","列标题2"和"列标题3"。

  • 元素定义单元格数据,以上实例中有两行数据,每行包含三个单元格。

    通过使用

    元素定义列标题,可以使其在表格中以粗体显示,与普通单元格区分开来。

    HTML 表格还可以具有其他部分,如

    (表格标题), 可用于为整个表格定义标题。

    HTML 表格还支持合并单元格和跨行/跨列的操作,以及其他样式和属性的应用,以满足各种需求。

    我们也可以使用 CSS 来进一步自定义表格的样式和外观。

    一列:

    100

    一行三列:

    100 200 300

    两行三列:

    100 200 300
    400 500 600

    表格实例

    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2

    运行结果:

    HTML 表格和边框属性

    如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

    使用边框属性来显示一个带有边框的表格:

    Row 1, cell 1 Row 1, cell 2

    HTML 表格表头

    表格的表头使用

    标签进行定义。

    大多数浏览器会把表头显示为粗体居中的文本:

    Header 1 Header 2
    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2

    运行结果:

    1、没有边框的表格

    本例演示一个没有边框的表格。 

    
    
    
    
        
        无边框表格
    
    
    
    
        

    这个表格没有边框:

    100 200 300
    400 500 600

    这个表格没有边框:

    100 200 300
    400 500 600

    运行结果: 

    十二、HTML 表格_第1张图片

    2、表格中的表头(Heading)

    本例演示如何显示表格表头。 

    
    
    
    
        
        表格中的表头
    
    
    
    
        

    水平标题:

    Name Telephone Telephone
    Bill Gates 555 77 854 555 77 855

    垂直标题:

    First Name: Bill Gates
    Telephone: 555 77 854
    Telephone: 555 77 855

    运行结果:

    十二、HTML 表格_第2张图片

    3、带有标题的表格

    本例演示一个带标题 (caption) 的表格 

    
    
    
    
        
        
    
    
    
    
        
    Monthly savings
    Month Savings
    January $100
    February $50

    运行结果:

    十二、HTML 表格_第3张图片

    4、跨行或跨列的表格单元格

    本例演示如何定义跨行或跨列的表格单元格。 

    
    
    
    
        
        
    
    
    
    
        

    单元格跨两列:

    Name Telephone
    Bill Gates 555 77 854 555 77 855

    单元格跨两行:

    First Name: Bill Gates
    Telephone: 555 77 854
    555 77 855

     运行结果:

    十二、HTML 表格_第4张图片

    5、表格内的标签

    本例演示如何在不同的元素内显示元素。 

    
    
    
    
        
        
    
    
    
    
        

    这是一个段落

    这是另一个段落

    这个单元格包含一个表格:
    A B
    C D
    这个单元格包含一个列表
    • apples
    • bananas
    • pineapples
    HELLO

     运行结果:

    十二、HTML 表格_第5张图片

    6、 单元格边距(Cell padding)

    本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

    
    
    
    
        
        
    
    
    
    
        

    没有单元格边距:

    First Row
    Second Row

    有单元格边距:

    First Row
    Second Row

      运行结果:

    十二、HTML 表格_第6张图片

    7、 ​​​​​​​单元格间距(Cell spacing)

    本例演示如何使用 Cell spacing 增加单元格之间的距离。

    
    
    
    
        
        
    
    
    
    
        

    没有单元格间距:

    First Row
    Second Row

    单元格间距="0":

    First Row
    Second Row

    单元格间距="10":

    First Row
    Second Row

       运行结果:

    十二、HTML 表格_第7张图片

     

    你可能感兴趣的:(前端,HTML5,html,前端,学习,考研,开发语言)