Open In App

CSS Tables

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

A table in CSS is used to apply the various styling properties to the HTML Table elements to arrange the data in rows and columns, or possibly in a more complex structure in a properly organized manner. Tables are widely used in communication, research, and data analysis. The table-layout property in CSS can be utilized to display the layout of the table. This property is basically used to sets the algorithm that is used to layout <table>cells, rows, and columns.

Properties:

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

Syntax:

  border: table_width table_color;

Example 1: This example describes the CSS Table to apply the border property.

HTML




<!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: This example describes the CSS Table by applying the border-collapse property.

HTML




<!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: This example describes the CSS Table by applying the border-spacing property.

HTML




<!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: This example describes the CSS Table by applying the caption-side property to control the placement of the Table caption.

HTML




<!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: This example describes the CSS Table by applying the empty-cell property that specifies whether to display the borders or not in the empty cells in a table.

HTML




<!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: This example describes the CSS Table by applying the table layout property.

HTML




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


Last Updated : 29 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads