How to Add Space Around Table Border in HTML ?

Last Updated : 21 Mar, 2024

Crafting visually appealing tables often involves adjusting the spacing between the content and the border. This guide dives into effective methods using HTML and CSS to achieve the desired spacing around your table’s border, enhancing both readability and aesthetics.

Below are the approaches to add space around the table border in HTML:

Table of Content

Using CSS border-spacing Property
Using HTML cellspacing Attribute

Using CSS border-spacing Property

CSS property border spacing is used to set border spacing for an HTML table. It adds space around the table border between the adjacent cells in a table.

Syntax:

border-spacing: pixels;

Example: Let’s create a Table named – Fruits with 3 columns and 4 rows. Add space – 10 pixels around table border using the above property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>border-spacing property</title>
    <style>
        table,
        tr,
        th,
        td {
            border: 1px solid blue;
            border-spacing: 10px;
        }
    </style>
</head>

<body>
    <center>
        <table style="width: 50%">
            <caption style="text-align: center; ">Fruits</caption>
            <tr>
                <th>Name</th>
                <th>Season</th>
                <th>Cost</th>
            </tr>
            <tr>
                <td>Apple</td>
                <td>Winter</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Mango</td>
                <td>Summer</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Banana</td>
                <td>All</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Grapes</td>
                <td>Rainy</td>
                <td>100</td>
            </tr>
        </table>
    </center>
</body>

</html>

Output:

Using HTML <table> cellspacing Attribute

The HTML <table> cellspacing Attribute is used to specify the space between the cells in terms of pixels.

Syntax:

<table cellspacing="pixels">

Example: Let’s create a Table named – Fruits with 3 columns and 4 rows. Add space – 10 pixels around table border using the HTML <table> cellspacing Attribute

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML <table> cellspacing Attribute</title>
    <style>
        table,
        tr,
        th,
        td {
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">Geeks for Geeks</h1>
        <table style="width: 50%" cellspacing="10">
            <caption style="text-align: center; ">Fruits</caption>
            <tr>
                <th>Name</th>
                <th>Season</th>
                <th>Cost</th>
            </tr>
            <tr>
                <td>Apple</td>
                <td>Winter</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Mango</td>
                <td>Summer</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Banana</td>
                <td>All</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Grapes</td>
                <td>Rainy</td>
                <td>100</td>
            </tr>
        </table>
    </center>
</body>

</html>