Table Padding and Spacing

In HTML, table padding and spacing are used to control the layout and appearance of table cells. They help improve the readability and visual structure of the table.

Table Padding

Padding is the space between the content of a cell and its border. It creates extra space inside each cell, which makes the content less cramped.

Example of Table Padding

You can set padding using the padding property in CSS. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Padding Example</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 15px; /* Add padding inside each cell */
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

In this example, padding: 15px; adds 15 pixels of padding inside each <th> and <td>, giving the content more space from the cell borders.

Table Spacing

Spacing traditionally refers to the space between cells. In HTML, this is controlled using the border-spacing property in CSS when using border-collapse: separate; for the table.

Example of Table Spacing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Spacing Example</title>
    <style>
        table {
            border-collapse: separate; /* Use separate borders */
            border-spacing: 10px; /* Add spacing between cells */
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 10px; /* Add padding inside each cell */
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

In this example, border-spacing: 10px; adds 10 pixels of space between each cell when border-collapse: separate; is applied.

Key Points

Padding: Adds space inside the cell, between the cell border and its content. Controlled with padding in CSS.
Spacing: Adds space between adjacent cells. Controlled with border-spacing in CSS when using border-collapse: separate;.

By adjusting padding and spacing, you can fine-tune the appearance and readability of your HTML tables.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us