CSS Tables

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
bhaskargeeksforgeeks
CSS-Properties
Picked
Web technologies
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.