HTML表格示例

让我们看一下HTML表标记的示例。输出如上所示。

First_Name
Last_Name
Marks
Sonoo
Jaiswal
60
James
William
80
Swati
Sironi
82
Chetna
Singh
72

输出：

名字姓氏索诺·贾斯瓦尔60詹姆斯·威廉80斯瓦蒂·西罗尼82切特纳·辛格72

在上面的html表中，有5行和3列= 5 * 3 = 15个值。

带边框的HTML表

有两种方法可以为HTML表指定边框。

• 按HTML中表格的边框属性
• 通过CSS中的border属性

1)HTML Border属性

您可以在HTML中使用表格标记的border属性来指定边框。但是，现在不建议这样做。

First_Name
Last_Name
Marks
Sonoo
Jaiswal
60
James
William
80
Swati
Sironi
82
Chetna
Singh
72

输出：

名字姓氏索诺·贾斯瓦尔60詹姆斯·威廉80斯瓦蒂·西罗尼82切特纳·辛格72

2)CSS Border属性

现在建议使用CSS的border属性在表格中指定边框。

您可以通过border-collapse属性将所有边界折叠到一个边界中。它将使边界合而为一。

输出：

姓氏姓氏Marks Sonoo Jaiswal 60 James William 80 Swati Sironi 82 Chetna Singh 72

带单元格填充的HTML表

您可以通过两种方式为表头和表数据指定填充：

• 通过HTML中表格的cellpadding属性
• 通过在CSS中填充属性

HTML table标记的cellpadding属性现在已过时。建议使用CSS。因此，让我们看看CSS的代码。

输出：

姓氏姓氏Marks Sonoo Jaiswal 60 James William 80 Swati Sironi 82 Chetna Singh 72

HTML表格宽度：

我们可以使用CSS width属性指定HTML表的宽度。可以像素或百分比指定。

我们可以根据需要调整表格宽度。以下是显示宽度表格的示例。

table{
     width: 100%; 
    }

例：

    
    
  

  

    

        
1 header
        
1 header
        
1 header
    
    

        
1data
        
1data
        
1data
    
    

        
2 data
        
2 data
        
2 data
    
    

        
3 data
        
3 data
        
3 data
    

输出：

带colspan的HTML表

如果要使一个单元格跨度超过一列，则可以使用colspan属性。

它将一个单元格/行划分为多列，并且列数取决于colspan属性的值。

让我们看一下跨越两列的示例。

CSS代码：

HTML代码：

  

  
Name
  
Mobile No.
  
  

  
Ajeet Maurya
  
7503520801
  
9555879135
  

输出：

姓名手机号码Ajeet Maurya 7503520801 9555879135

带行距的HTML表

如果要使一个单元格跨度超过一行，则可以使用rowspan属性。

它将一个单元格分成多行。划分的行数将取决于行跨度值。

让我们看一下跨越两行的示例。

CSS代码：

HTML代码：

  
Name
Ajeet Maurya
  
Mobile No.
7503520801
  
9555879135
  
 

输出：

名字Ajeet Maurya手机号码：7503520801 9555879135

带标题的HTML表

HTML标题显示在表格上方。它只能在表标记之后使用。

Student Records
First_Name
Last_Name
Marks
Vimal
Jaiswal
70
Mike
Warn
60
Shane
Warn
42
Jai
Malhotra
62

样式化HTML表的偶数和奇数单元格

CSS代码：

输出：

注意：您还可以使用表中的不同CSS属性创建各种类型的表。

支持的浏览器

Element	Chrome	IE	Firefox	Opera	Safari
Yes Yes Yes Yes Yes