How To Style a Table with CSS?

Last Updated : 20 Nov, 2024

A table organizes data in rows and columns, making information easy to read and compare, like a spreadsheet or chart. To style a table with CSS, use properties like border for cell borders, padding for spacing, text-align for alignment, and background-color to color rows or headers for clarity.

Approach to Style Table with CSS

Use the <link> tag within the <head> section of your HTML document to link an external CSS file.
Use the <table>, <thead>, <tbody>, <tr>, <th>, and <td> tags to structure your table and its content.
Define styles in your CSS file (style.css) to customize the appearance of the table, headers (<th>), and data cells (<td>).

Example 1: Styling a table using External CSS.

HTML

<link rel="stylesheet" href="index.css">

<body>
    <table>
        <thead>
            <tr>
                <th class="cl1">Firstname</th>
                <th class="cl2">Lastname</th>
                <th class="cl3">Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="cl4">Bahadur</td>
                <td class="cl5">Lodhi</td>
                <td class="cl6">20</td>
            </tr>
            <tr>
                <td class="cl7">Shubham</td>
                <td class="cl8">Ji</td>
                <td class="cl9">25</td>
            </tr>
            <tr>
                <td class="cl10">Michael</td>
                <td class="cl11">John</td>
                <td class="cl12">40</td>
            </tr>
            <tr>
                <td class="cl13">Aman</td>
                <td class="cl14">Sign</td>
                <td class="cl15">20</td>
            </tr>
        </tbody>
    </table>
</body>

CSS

/* Write CSS Here */
table {
    width: 40%;
    margin: 0 auto;
}

body {
    padding-top: 8%;
}

th,
td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

.cl1,
.cl12 {
    background-color: chartreuse;
}

.cl3,
.cl4 {
    background-color: darkgoldenrod;
}

.cl5,
.cl6 {
    background-color: darkseagreen;
}

.cl7,
.cl14 {
    background-color: deepskyblue;
}

.cl9,
.cl10 {
    background-color: rgb(251, 251, 128);
}

.cl11,
.cl2 {
    background-color: crimson;
}

.cl13,
.cl8 {
    background-color: darkmagenta;
}

.cl15 {
    background-color: rgb(86, 79, 146);
}

Output

Example 2: Style a table using Internal CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        /* Style for the table */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        /* Header styling */
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        /* Color the rows */
        tr:nth-child(1) {
            background-color: #cfe2f3;
        }

        tr:nth-child(2) {
            background-color: #d9ead3;
        }

        tr:nth-child(3) {
            background-color: #f9cb9c;
        }

        tr:nth-child(4) {
            background-color: #f4cccc;
        }

        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Employee ID</th>
                <th>Name</th>
                <th>Department</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>John Doe</td>
                <td>Marketing</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>002</td>
                <td>Jane Smith</td>
                <td>Development</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>003</td>
                <td>Sam Brown</td>
                <td>Human Resources</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>004</td>
                <td>Lisa White</td>
                <td>Finance</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
</body>

</html>