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

    
    

    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

    
    

    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

    
    

    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

    
    

    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

    
    

    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

    
    

    Output:

Supported Browsers: The browsers supported by Tables

  • Google Chrome
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari


  • My Personal Notes arrow_drop_up


    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.