HTML Table Padding and Spacing

Last Updated : 18 Jan, 2024

HTML Table Padding & Spacing facilitates the inclusion of the padding inside the cells, along with providing the spacing between the cells. It helps to define the layout and appearance of tables.

The Cell Padding is used to define the space between the cell text and the cell border. Cell Spacing is used to define the space between each cell with the help of the CSS border-spacing property.

Table of Content

Cell Padding
Cell Spacing
HTML Table DOM Property

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. We have used the CSS padding property.

Note: The browser’s default property for the padding is 0.

Supported Attribute

cellpadding Attribute

Example: Illustration of HTML Table Cell Padding using the CSS padding property.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>HTML Table Padding and Spacing</title>
    <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>GeeksforGeeks</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>

Cell Spacing

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

Note: The browser’s default property for the Spacing is 2px.

Supported Attibute

Example: Illustration of HTML Table Cell Spacing using the CSS border-spacing property.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Table</title> <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>GeeksforGeeks</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>