Skip to content
Related Articles

Related Articles

CSS Tables

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 29 Oct, 2021

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

My Personal Notes
arrow_drop_up
Previous
CSS Lists
Next

CSS | Overflow
Recommended Articles
Page :
Spectre Tables Stripped tables
29, Jan 22
Spectre Tables Scrollable tables
29, Jan 22
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
Foundation CSS Tables Stripes
08, Mar 22
Foundation CSS Tables Hover State
21, Mar 22
Foundation CSS Tables Basics
21, Mar 22
Tailwind CSS Tables Complete Reference
26, Mar 22
Primer CSS Tables
22, Apr 22
Pure CSS Tables Complete Reference
19, Apr 22
Foundation CSS Tables
22, Mar 22
Blaze UI Tables Condensed
04, May 22
Blaze UI Tables using divs
04, May 22
Blaze UI Tables Striped Table
04, May 22
Blaze UI Basic Tables
04, May 22
Blaze UI Tables Clickable Table
04, May 22
Blaze UI Tables Clickable Row
13, May 22
Bootstrap Buttons, Glyphicons, Tables
21, Jan 16
Blaze UI Tables
10, May 22
How to override the CSS properties of a class using another CSS class ?
27, Sep 19
Difference between CSS Grid and CSS Flexbox
04, Mar 21
Which CSS framework is better Tailwind CSS or Bootstrap ?
28, Oct 21
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
apeksharustagi1998
@apeksharustagi1998
Vote for difficulty
Current difficulty :
Easy





Improved By :
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

Start Your Coding Journey Now!