HTML Table Padding & Spacing

HTML tables can be styled using padding and spacing attributes to improve readability and aesthetic appeal. Padding and spacing in HTML tables refer to the space between table cells (<td>, <th>) and the surrounding borders. These attributes help control the visual appearance and layout of tables, ensuring content is well-separated and visually appealing.

Setting Cell Padding

Cell padding controls the space between the content of a cell and its border. It is set using the cellpadding attribute within the <table> tag.

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 with Cell Padding</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px; /* Default padding */
        }
    </style>
</head>

<body>
    <h2>HTML Table with Cell Padding</h2>

    <table cellpadding="10">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>San Francisco</td>
        </tr>
    </table>
</body>

</html>

Adding Cell Spacing

Cell spacing controls the space between adjacent cells within the table. It is set using the cellspacing attribute within the <table> tag.

html

<table cellspacing="10">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>25</td>
        <td>San Francisco</td>
    </tr>
</table>

Using CSS for Padding & Spacing

CSS offers more control and flexibility for styling table padding and spacing.

html

<style>
    table {
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 15px; /* Custom padding */
        text-align: left;
    }
</style>

Combining Padding and Spacing

You can combine both padding and spacing attributes for precise table layout adjustments.

html

<table cellpadding="15" cellspacing="10">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>25</td>
        <td>San Francisco</td>
    </tr>
</table>

Conclusion

HTML table padding and spacing are essential for improving the visual layout and readability of tabular data. Whether using attributes like cellpadding and cellspacing or CSS properties for more fine-grained control, understanding how to manage table space enhances the user experience.

Related Articles