Skip to content
Related Articles

Related Articles

Improve Article

CSS | Tables

  • Difficulty Level : Easy
  • Last Updated : 09 Aug, 2019

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:




    <!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>

    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:




    <!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>

    Output:

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

    Syntax:

      border-spacing: value;
    

    Example-3:




    <!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>

    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:




    <!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>

    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:




    <!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>

    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:




    <!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>

    Output:

Supported Browsers: The browsers supported by Tables

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


    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :