HTML Table Padding and Spacing

Last Updated : 12 Nov, 2024

HTML Table Padding & Spacing is used to control the space within and around table cells in HTML. Padding is the space inside a table cell, while spacing (or border-spacing) is the space between the outer borders of adjacent cells.

Table Cell Padding

Table Cell Padding refers to the space between the content of a table cell and its inner border. It is controlled using the padding property applied to the <td> (table data) or <th> (table header) elements. Here, we have used the CSS padding property.

The browser's default property for the padding is 0.

HTML

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

<head>
    <style>
        table {
            border: 2px solid black;
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 2px solid #7a3f3f;
            padding: 20px;
            text-align: center;
        }

        h1,
        h3 {
            text-align: center;
            color: green;

        }
    </style>
</head>

<body>
    <h1>HTML Table Padding and Spacing </h1>
    <h3>The HTML table defines the
        space between cells uding CSS
        border-spacing property.
    </h3>
  
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Class</th>
                <th>Roll No</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mahima</td>
                <td>10</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Ravi</td>
                <td>11</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Krishn</td>
                <td>8</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Output

HTML-Padding-and-Spacing — HTML Table Padding and Spacing

Table Cell Spacing

HTML Table Cell Spacing defines the space between the cells within a table. It includes both horizontal and vertical spacing. Here, we have used the CSS border-spacing property.

The browser's default property for the Spacing is 2px.

HTML

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

<head>
    <style>
        table {
            border: 2px solid black;
            border-spacing: 25px;
            width: 100%;
        }

        th,
        td {
            border: 2px solid #7a3f3f;
            padding: 10px;
            text-align: center;
        }

        h1,
        h3 {
            text-align: center;
            color: green;
        }
    </style>
</head>

<body>
    <h1>HTML Cell Spacing</h1>
    <h3>
      	The HTML table defines the
        space between cells uding CSS
        border-spacing property .
    </h3>

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Class</th>
                <th>Roll No</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mahima</td>
                <td>10</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Ravi</td>
                <td>11</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Krishn</td>
                <td>8</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>

</html>