CSS | Tables

CSS is used to style the HTML tables.

Properties:

  • Border: It is used for specifying borders in the table.
    Syntax: 

      border: table_width table_color;

    Example-1:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            body {
                text-align: left;
            }
              
            h1 {
                color: green;
            }
            table,
            th,
            td {
                /* Styling the border. */
                border: 1.5px solid blue;
            }
        </style>
    </head>
      
    <body>
      
        <h1>GeeksforGeeks</h1>
        <h2>Add border to table:</h2>
      
        <table>
            <tr>
                <th>Roll No.</th>
                <th>Name</th>
            </tr>
            <tr>
                <td>1</td>
                <td>A_B_C</td>
            </tr>
            <tr>
                <td>2</td>
                <td>X_Y_Z</td>
            </tr>
        </table>
      
    </body>
      
    </html>

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • Border Collapse: The border-collapse property tells us whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.

    Syntax:


    

       border-collapse: collapse/separate;

    

    Example-2:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      
    

    <head> 
    

        <style> 
    

            body { 
    

                text-align: left; 
    

            } 
    

              
    

            h1 { 
    

                color: green; 
    

            } 
    

              
    

            table.one { 
    

              /* Styling border collapse for table one. */ 
    

              border-collapse: collapse; 
    

            } 
    

              
    

            table.two { 
    

              /* Styling border separate for table two. */ 
    

              border-collapse: separate; 
    

            } 
    

              
    

            table, 
    

            td, 
    

            th { 
    

                border: 1.5px solid blue; 
    

            } 
    

        </style> 
    

    </head> 
    

      
    

    <body> 
    

      
    

        <h1>GeeksforGeeks</h1> 
    

        <h2>borders collapsed:</h2> 
    

      
    

        <table class="one"> 
    

            <tr> 
    

                <th>Roll Number</th> 
    

                <th>Name</th> 
    

            </tr> 
    

            <tr> 
    

                <td>1</td> 
    

                <td>A_B_C</td> 
    

            </tr> 
    

            <tr> 
    

                <td>2</td> 
    

                <td>X_Y_Z</td> 
    

            </tr> 
    

        </table> 
    

      
    

        <br> 
    

        <br> 
    

      
    

        <h2>borders separated:</h2> 
    

        <table class="two"> 
    

            <tr> 
    

                <th>Roll Number</th> 
    

                <th>Name</th> 
    

            </tr> 
    

            <tr> 
    

                <td>1</td> 
    

                <td>A_B_C</td> 
    

            </tr> 
    

            <tr> 
    

                <td>2</td> 
    

                <td>X_Y_Z</td> 
    

            </tr> 
    

        </table> 
    

      
    

    </body> 
    

      
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • Border Spacing: This property specifies the space between the borders of the adjacent cells.

    Syntax: 
    

      border-spacing: value;

    

    Example-3:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      
    

    <head> 
    

        <style> 
    

            body { 
    

                text-align: left; 
    

            } 
    

              
    

            h1 { 
    

                color: green; 
    

            } 
    

              
    

            table.one { 
    

                border-collapse: separate; 
    

                  
    

                /* Styling the border-spacing  
    

                   between adjacent cells. */ 
    

                border-spacing: 10px; 
    

            } 
    

              
    

            table.two { 
    

                border-collapse: separate; 
    

                  
    

                /* Styling the border-spacing  
    

                  between adjacent cells. */ 
    

                border-spacing: 10px 30px; 
    

            } 
    

              
    

            table, 
    

            td, 
    

            th { 
    

                border: 1.5px solid blue; 
    

            } 
    

        </style> 
    

    </head> 
    

      
    

    <body> 
    

      
    

        <h1>GeeksforGeeks</h1> 
    

        <h2>border spacing:</h2> 
    

      
    

        <table class="one"> 
    

            <tr> 
    

                <th>Roll Number</th> 
    

                <th>Name</th> 
    

            </tr> 
    

            <tr> 
    

                <td>1</td> 
    

                <td>A_B_C</td> 
    

            </tr> 
    

            <tr> 
    

                <td>2</td> 
    

                <td>X_Y_Z</td> 
    

            </tr> 
    

        </table> 
    

      
    

        <br> 
    

        <br> 
    

      
    

        <h2>border spacing:</h2> 
    

        <table class="two"> 
    

            <tr> 
    

                <th>Roll Number</th> 
    

                <th>Name</th> 
    

            </tr> 
    

            <tr> 
    

                <td>1</td> 
    

                <td>A_B_C</td> 
    

            </tr> 
    

            <tr> 
    

                <td>2</td> 
    

                <td>X_Y_Z</td> 
    

            </tr> 
    

        </table> 
    

      
    

    </body> 
    

      
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • Caption Side: Caption side property is used for controlling the placement of caption in the table. By default, captions are placed above the table.

    Syntax: 
    

       caption-side:top/bottom;

    

    Example-4:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      
    

    <head> 
    

        <style> 
    

            body { 
    

                text-align: left; 
    

            } 
    

              
    

            h1 { 
    

                color: green; 
    

            } 
    

              
    

            table.one { 
    

                border-collapse: separate; 
    

                border-spacing: 10px; 
    

                
    

                /* Controlling the placement of caption. */  
    

                caption-side: top; 
    

            } 
    

              
    

            table.two { 
    

                border-collapse: separate; 
    

                border-spacing: 10px; 
    

                
    

                /* Controlling the placement of caption. */ 
    

                caption-side: bottom; 
    

            } 
    

              
    

            table, 
    

            td, 
    

            th { 
    

                border: 1.5px solid blue; 
    

            } 
    

        </style> 
    

    </head> 
    

      
    

    <body> 
    

      
    

        <h1>GeeksforGeeks</h1> 
    

        <h2>Caption on top:</h2> 
    

      
    

        <table class="one"> 
    

            <caption>Caption at the top of the table.</caption> 
    

            <tr> 
    

                <th>Roll Number</th> 
    

                <th>Name</th> 
    

            </tr> 
    

            <tr> 
    

                <td>1</td> 
    

                <td>A_B_C</td> 
    

            </tr> 
    

            <tr> 
    

                <td>2</td> 
    

                <td>X_Y_Z</td> 
    

            </tr> 
    

        </table> 
    

      
    

        <br> 
    

        <br> 
    

      
    

        <h2>Caption at bottom:</h2> 
    

        <table class="two"> 
    

            <caption> 
    

              Caption at the bottom of the table 
    

           </caption> 
    

            <tr> 
    

                <th>Roll Number</th> 
    

                <th>Name</th> 
    

            </tr> 
    

            <tr> 
    

                <td>1</td> 
    

                <td>A_B_C</td> 
    

            </tr> 
    

            <tr> 
    

                <td>2</td> 
    

                <td>X_Y_Z</td> 
    

            </tr> 
    

        </table> 
    

      
    

    </body> 
    

      
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • Empty cells: This property specifies whether or not to display borders and background on empty cells in a table.

    Syntax:
    

      empty-cells:show/hide;

    

    Example-5:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      
    

    <head> 
    

        <style> 
    

            body { 
    

                text-align: left; 
    

            } 
    

              
    

            h1 { 
    

                color: green; 
    

            } 
    

              
    

            table.one { 
    

                border-collapse: separate; 
    

                border-spacing: 10px; 
    

                  
    

                /* Hiding empty cells border */ 
    

                empty-cells: hide; 
    

            } 
    

              
    

            table.two { 
    

                border-collapse: separate; 
    

                border-spacing: 10px; 
    

                
    

                /* Display empty cells border */ 
    

                empty-cells: show; 
    

            } 
    

              
    

            table, 
    

            td, 
    

            th { 
    

                border: 1.5px solid blue; 
    

            } 
    

        </style> 
    

    </head> 
    

      
    

    <body> 
    

      
    

        <h1>GeeksforGeeks</h1> 
    

        <h2>empty cells hide:</h2> 
    

      
    

        <table class="one"> 
    

            <tr> 
    

                <th>Roll Number</th> 
    

                <th>Name</th> 
    

            </tr> 
    

            <tr> 
    

                <td>1</td> 
    

                <td></td> 
    

            </tr> 
    

            <tr> 
    

                <td>2</td> 
    

                <td>X_Y_Z</td> 
    

            </tr> 
    

        </table> 
    

      
    

        <br> 
    

        <br> 
    

      
    

        <h2>empty cells show:</h2> 
    

        <table class="two"> 
    

            <tr> 
    

                <th>Roll Number</th> 
    

                <th>Name</th> 
    

            </tr> 
    

            <tr> 
    

                <td>1</td> 
    

                <td></td> 
    

            </tr> 
    

            <tr> 
    

                <td>2</td> 
    

                <td>X_Y_Z</td> 
    

            </tr> 
    

        </table> 
    

      
    

    </body> 
    

      
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • Table layout: The table layout property is used to set up the layout algorithm used for the table.

    Syntax:
    

      table-layout:auto/fixed;

    

    Example-6:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      
    

    <head> 
    

        <style> 
    

            body { 
    

                text-align: left; 
    

            } 
    

              
    

            h1 { 
    

                color: green; 
    

            } 
    

              
    

            table.one { 
    

                width: 80px border-collapse: separate; 
    

                border-spacing: 10px; 
    

                  
    

                /* Layout of table is auto. */ 
    

                table-layout: auto; 
    

            } 
    

              
    

            table.two { 
    

                width: 80px border-collapse: separate; 
    

                border-spacing: 10px; 
    

                
    

                /* Layout of table is fixed. */ 
    

                table-layout: fixed; 
    

            } 
    

              
    

            table, 
    

            td, 
    

            th { 
    

                border: 1.5px solid blue; 
    

                width: 80px; 
    

            } 
    

        </style> 
    

    </head> 
    

      
    

    <body> 
    

      
    

        <h1>GeeksforGeeks</h1> 
    

        <h2>auto table layout:</h2> 
    

      
    

        <table class="one"> 
    

            <tr> 
    

                <th>Roll Number</th> 
    

                <th>Name</th> 
    

            </tr> 
    

            <tr> 
    

                <td>1</td> 
    

                <td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td> 
    

            </tr> 
    

            <tr> 
    

                <td>2</td> 
    

                <td>X_Y_Z</td> 
    

            </tr> 
    

        </table> 
    

      
    

        <br> 
    

        <br> 
    

      
    

        <h2>fixed table layout:</h2> 
    

        <table class="two"> 
    

            <tr> 
    

                <th>Roll Number</th> 
    

                <th>Name</th> 
    

            </tr> 
    

            <tr> 
    

                <td>1</td> 
    

                <td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td> 
    

            </tr> 
    

            <tr> 
    

                <td>2</td> 
    

                <td>X_Y_Z</td> 
    

            </tr> 
    

        </table> 
    

      
    

    </body> 
    

      
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 



Supported Browsers: The browsers supported by Tables

  • Google Chrome
    • 

  • Edge
    • 

  • Mozilla Firefox
    • 

  • Opera
    • 

  • Safari
    • 




    
    
    
        My Personal Notes
        arrow_drop_up
    
    
    
    
        
        
    
            
            
        
    
    
    

    Recommended Posts:
    apeksharustagi1998
    Check out this Author's contributed articles.
    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
    Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.