How to Add Borders to Table Cells in CSS

Introduction

Adding borders to table cells helps improve the readability and structure of a table, making it easier to distinguish between rows and columns. In this tutorial, you'll learn how to apply borders to table cells using CSS.

Development Steps

Create Basic HTML Table Structure: Set up a simple table with headers and data rows.
Add Borders to Table Cells: Use CSS to add borders to each table cell (th and td).
Customize Borders with CSS: Customize the border style, color, and spacing.

Step 1: Create Basic HTML Table Structure

We’ll start by creating a simple HTML table structure that includes headers and data rows.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Borders</title>
</head>
<body>

    <!-- Step 1: Basic table structure -->
    <div class="table-container">
        <table class="bordered-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ananya</td>
                    <td>25</td>
                    <td>Delhi</td>
                </tr>
                <tr>
                    <td>Rohan</td>
                    <td>30</td>
                    <td>Mumbai</td>
                </tr>
                <tr>
                    <td>Meera</td>
                    <td>22</td>
                    <td>Bangalore</td>
                </tr>
                <tr>
                    <td>Vikram</td>
                    <td>35</td>
                    <td>Pune</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

Explanation:

The table contains a thead with headers (Name, Age, City) and a tbody with rows of data.
We will now use CSS to add borders to each table cell.

Step 2: Add Borders to Table Cells with CSS

In this step, we will add borders around each table cell (th and td) using CSS.

<head>
    <style>
        /* General body styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            margin: 20px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        /* Step 2: Add borders to table cells */
        table {
            width: 100%;
            border-collapse: collapse; /* Ensures the borders are collapsed into a single line */
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border: 1px solid #ddd; /* Add border around each cell */
        }

        th {
            background-color: #3498db;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
    </style>
</head>

Explanation:

Borders: We added a border: 1px solid #ddd; to both th and td, giving all table cells a light gray border.
border-collapse: The border-collapse: collapse property ensures that the borders between cells collapse into a single border, avoiding the appearance of double borders.

Step 3: Customize Borders with CSS

Now we’ll customize the borders by changing the color, style, and thickness of the borders around the table cells.

<head>
    <style>
        /* General body styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            margin: 20px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        /* Add borders to table cells */
        table {
            width: 100%;
            border-collapse: collapse; /* Ensures the borders are collapsed into a single line */
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border: 2px solid #3498db; /* Custom thicker blue border */
        }

        th {
            background-color: #3498db;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
    </style>
</head>

Explanation:

Custom Borders: The border thickness has been increased to 2px and the color changed to #3498db (blue) to make the table more visually appealing.
You can also customize the border style, such as changing it to dashed or dotted.

Complete Example

Here is the complete HTML and CSS code to add borders to a table with customized styles:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Borders</title>
    <style>
        /* General body styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            margin: 20px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        /* Add borders to table cells */
        table {
            width: 100%;
            border-collapse: collapse; /* Ensures the borders are collapsed into a single line */
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border: 2px solid #3498db; /* Custom thicker blue border */
        }

        th {
            background-color: #3498db;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
    </style>
</head>
<body>

    <!-- Step 1: Basic table structure -->
    <div class="table-container">
        <table class="bordered-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ananya</td>
                    <td>25</td>
                    <td>Delhi</td>
                </tr>
                <tr>
                    <td>Rohan</td>
                    <td>30</td>
                    <td>Mumbai</td>
                </tr>
                <tr>
                    <td>Meera</td>
                    <td>22</td>
                    <td>Bangalore</td>
                </tr>
                <tr>
                    <td>Vikram</td>
                    <td>35</td>
                    <td>Pune</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to add borders to table cells using CSS. By customizing the border properties such as color, thickness, and style, you can make your tables more visually appealing and structured. Adding borders enhances readability and makes the table easier to navigate, especially when working with large datasets.

Java Guides

Search This Blog