📜  如何在表格内应用边框?

📅  最后修改于: 2021-10-29 04:46:19             🧑  作者: Mango

两种方法可以在 HTML 中的表格内应用边框。

  • 仅使用 HTML
  • 使用 HTML 和 CSS

仅使用 HTML:在这种情况下,我们将使用表格的规则属性。规则是 HTML 表格中的属性,它允许用户只显示表格的内部边框,可以在行、列或全部中进行选择。

例子:





    Table In HTML

  

    

Table having rules="rows":

                                                                                                                                                                                                                                                                 
Roll NumberName Of GeekMarks
01Geek 01100
02Geek 0295
03Geek 0390
           
    

    
           

Table having rules="cols":

                                                                                                                                                                                                                                                         
Roll NumberName Of GeekMarks
01Geek 01100
02Geek 0295
03Geek 0390
           
    

    
           

Table having rules="all":

                                                                                                                                                                                                                                                         
Roll NumberName Of GeekMarks
01Geek 01100
02Geek 0295
03Geek 0390
  

输出:

使用 HTML 和 CSS:

  • 示例 1: CSS 中的边框样式是另一种在表格内显示边框的方式。此属性可帮助用户操作表格的外边框。
    
    
    
          
    
        Table In HTML
          
        
    
      
    
        
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        
    Roll NumberName Of GeekMarks
    01Geek 01100
    02Geek 0295
    03Geek 0390
      

    输出:

  • 示例 2:在 CSS 中使用 child 概念是另一种获得带有内边框的表格的方法,即删除表格中所有不需要的边框。可以通过在 CSS 中使用 first-child 和 last-child 来实现。在这里,我们选择第一列并删除其左侧边框,然后选择第一行并删除其顶部边框,然后我们选择最后一列并删除其右侧边框,最后选择最后一行并删除其底部边框。通过这种方式,我们移除了表格的所有外部边界,并留下了内部边界。
    
    
      
    
        Table In HTML
      
        
    
      
    
        
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        
    Roll NumberName Of GeekMarks
    01Geek 01100
    02Geek 0295
    03Geek 0390
      

    输出: