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
    • Previous
    CSS | LISTS
    Next

    CSS | Overflow
    Recommended Articles
    Page :
    Materialize CSS | Tables
    28, May 20
    How to remove cellspacing from tables using CSS?
    29, Nov 20
    W3.CSS Tables
    20, Feb 21
    Pure CSS Tables
    23, Feb 21
    Bootstrap (Part-3) | Buttons, Glyphicons, Tables
    21, Jan 16
    AngularJS | Tables
    21, Jun 19
    How to list tables using SQLite3 in Python ?
    06, May 21
    Compare and Find Differences Between Two Tables in SQL
    21, Apr 21
    How to embed tables in New Google Sites ?
    10, Sep 20
    React-Bootstrap Tables Component
    29, Mar 21
    Adding Nested Tables to a PDF using Java
    16, Dec 20
    Java Program to Add Tables to a Word Document
    14, Dec 20
    How to Show All Tables in MySQL using Python?
    25, Dec 20
    Java Program to Implement Direct Addressing Tables
    05, Jan 21
    How to initialize multiple tables using jQuery DataTables plugin ?
    14, Jan 21
    Java Program to Implement Hash Tables Chaining with Doubly Linked Lists
    18, Jan 21
    How to Extract PDF Tables in Python?
    22, Jan 21
    AWS DynamoDB - Working with Tables
    11, Apr 21
    How to Left Join Multiple Tables in SQL
    01, Apr 21
    How to create array using given columns, rows, and tables in R ?
    15, Apr 21
    Joining 4 Tables in SQL
    20, Apr 21
    How to compare columns in two different tables in SQL
    20, Apr 21
    Querying Multiple Tables in SQL
    19, Apr 21
    SQL Query to select Data from Tables Using Join and Where
    10, Apr 21
    Article Contributed By :
    https://media.geeksforgeeks.org/auth/avatar.png
    apeksharustagi1998
    @apeksharustagi1998
    Vote for difficulty
    Current difficulty :
Easy
    




    Article Tags :
    Report Issue

    We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

    Lightbox