CSS Table Styling

A table is an HTML element that organizes data in rows and columns format. For example,

CSS Tables Styling Example


The above example shows the default table and a CSS-styled table.


Create a Table

A table is created with the help of table, tr, th, and td tags. For example,

 
<table>
    <tr>
        <th>Name</th>
        <th>Location</th>
    </tr>
    <tr>
        <td>James</td>
        <td>Chicago</td>
    </tr>
    <tr>
        <td>Robert</td>
        <td>New York</td>
    </tr>
</table>

Browser Output

CSS Table Creation Example

In the above example, the default table doesn't look good without any styles.


Style Your Table

We can add the following styles for the table,

  • Table borders
  • Collapse table borders
  • Border spacing
  • Table size
  • Table layout
  • Horizontal alignment
  • Vertical alignment
  • Background color
  • Table padding
  • Dividing the rows
  • Hover effect

Let's look at each of them in detail.


Table Border

The border property adds a border to the table. For example,

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Table Border</title>
    </head>


    <body>

        <table>
            <tr>
                <th>Name</th>
                <th>Location</th>
            </tr>
            <tr>
                <td>James</td>
                <td>Chicago</td>
            </tr>
            <tr>
                <td>Robert</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Charlie</td>
                <td>Boston</td>
            </tr>
  
        </table>
    </body>

</html>
/* applies border to the table */
table,th,td {
    border: 1px solid black;
}

Browser Output

CSS Table Border Example

In the above example,

border: 1px solid black

adds a solid black border of 1px around the table elements.


Collapse Table Border

The border-collapse property merges the border between the table cells into a single border. For example,

table {
    border-collapse: collapse;
}

Browser Output

CSS Collapse Table Border Example

Here, the borders between the table cells are merged into a single border.


Border Spacing

The border-spacing property specifies the gap between the adjacent cell borders. For example,

table {
    border-spacing: 20px;
}

Browser Output

CSS Border Spacing Example

Here, 20 pixels gap is added between the adjacent border cells.


Table Size

The size of the table can be changed by using the width and height properties. For example,

table {
    border-collapse: collapse;
    border: 1px solid black;
    width: 80%;
    height: 170px;
}

Browser Output

CSS Table Size Example

Here, the table takes 80% width of the document, and the height increases to 170 pixels.


Table Layout

The table-layout property specifies the structure and behavior of the table.

It can take one of the following values:

  • auto: adjusts the column widths automatically based on content
  • fixed: specifies the fixed column width

Let's see an example,

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Table Layout</title>
    </head>


    <body>
        <table>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>

            <tr>
                <td>
                    This table cell contains large amount of the text.
                </td>
                <td>Cell 2</td>
                <td>Cell 3</td>
            </tr>
        </table>
    </body>

</html>
/* styles table with fixed layout */
table {
    width: 500px;
    table-layout: fixed;
}

table, th , td {
    border: 1px solid black;
    border-collapse: collapse;
}

Browser Output

CSS Fixed Table Layout Example

In the above example, the table has the table-layout property set to fixed, and width is set to 500px. Hence, all the columns of the table maintain the fixed width.

Now, changing the table layout to auto by adding

table-layout: auto;

creates the following output.

Browser Output

CSS Auto Table Layout Example

Here, the auto value makes the columns flexible, allowing them to adjust their width as required by the content.

The table width remains fixed at 500px, but the columns now adapt to the content.


Horizontal Alignment

The text-align property sets the horizontal alignment of the table content. For example,

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Horizontal Alignment</title>
    </head>


    <body>
        <h2>Horizontal alignment</h2>
        <table>

            <tr>
                <th>text-align: left</th>
                <th>text-align: right</th>
                <th>text-align: center</th>
                <th>text-align:justify</th>
            </tr>

            <tr>
                <td class="first-data">Left</td>
                <td class="second-data">Right</td>
                <td class="third-data">Center</td>
                <td class="fourth-data">Justify the content</td>
            </tr>

        </table>
    </body>

</html>
.first-data {
    text-align: left;
}

.second-data {
    text-align: right;
}

.third-data {
    text-align: center;
}

.fourth-data {
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table,th,td {
    border: 1px solid black;
}

Browser Output

CSS Horizontal Table Alignment Example

The above example shows the different alignment positions of text in the table cells.

Note: By default, the content inside the table cells is left-aligned.


Vertical Alignment

The vertical-align property sets the vertical alignment of the table content.

Let's see an example,

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Vertical Alignment</title>
    </head>


    <body>
        <h2>Vertical alignment</h2>
        <table>

            <tr>
                <th>vertical-align: top</th>
                <th>vertical-align: bottom</th>
                <th>vertical-align: middle</th>
                <th>vertical-align:baseline</th>
            </tr>

            <tr>
                <td class="first-data">Top</td>
                <td class="second-data">Bottom</td>
                <td class="third-data">Middle</td>
                <td class="fourth-data">Baseline</td>
            </tr>

        </table>
    </body>

</html>
.first-data {
    vertical-align: top;
}

.second-data {
    vertical-align: bottom;
}

.third-data {
    vertical-align: middle;
}

.fourth-data {
    vertical-align: baseline;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table,th,td {
    border: 1px solid black;
}

td {
    height: 50px;
}

Browser Output

CSS Vertical Table Alignment Example

The above example shows the different vertical alignment position of the text in the table cells.

Note: By default, the content in a table cell is vertically aligned to the middle.


Background Color

The table can be styled with different background colors. For example,

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Background Color</title>
    </head>


    <body>
        <table>
            <tr>
                <th>Name</th>
                <th>Location</th>
            </tr>

            <tr >
                <td>James</td>
                <td>Chicago</td>
            </tr>

            <tr >
                <td>Robert</td>
                <td>New York</td>
            </tr>

        </table>
    </body>

</html>
th {
    background-color: greenyellow;
}

tr {
    background-color: yellow;
}

table {
    border-collapse: collapse;
    width: 100%;
}

table, th, td {
    border: 1px solid black;
}

Browser Output

CSS Table Background Color Example

In the above example, the background-color property adds greenyellow color to the table head and yellow color to the table rows.


Table Padding

The padding property adds the space between the border and the content. For example,

<!DOCTYPE html>
<html>

    <head>
        <title>Table padding</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <table>
            <tr>
                <th>Name</th>
                <th>Location</th>
            </tr>

            <tr>
                <td>James</td>
                <td>Chicago</td>
            </tr>

            <tr>
                <td>Robert</td>
                <td>New York</td>
            </tr>

            <tr>
                <td>Charlie</td>
                <td>Boston</td>
            </tr>

        </table>
    </body>

</html>
th,td {
    padding: 15px;
}

table {
    border-collapse: collapse;
}

table,th,td {
    border: 1px solid black;
}

Browser Output

CSS Table Padding Example

In the above example,

padding: 15px

adds a 15 pixels gap between the border and the content in the table.


Divide the Table Rows

We can use the border-bottom property to create a horizontal division between the rows of the table. For example,

th,td {
    border-bottom: 1px solid gray;
    padding: 12px;
    text-align: center;
}

Browser Output

CSS Table Divider Example

Here, the border-bottom property separates the rows in the table.

Note: We can use the border-right or border-left property in <td> element to create a vertical divider in the table.


Hoverable Table

We can add the hover effect to the table elements with the help of the hover pseudo-class selector. For example,

tr:hover {
    background-color: yellow;
}

Browser Output

Name Location
James Chicago
Robert New York

Here, the background color of the row changes to yellow when hovering over it.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges