CSS Table Padding Tutorial, Add Space Inside Table Cells with Examples

Table padding

Table padding in CSS refers to the space between the content inside a table cell and its borders. It improves readability by preventing the text from sticking to the cell edges.

Why Use Padding in Tables ?

Without padding, table content can appear cramped. Adding padding enhances the spacing inside table cells, making your table look neat and user-friendly.

How to Add Padding to Tables Cells

Use the padding property on <th> and <td> elements to add space inside table cells.

Example: Add Padding to Table Cells

<!DOCTYPE html>
<html>
<head>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse; /* Optional: merge adjacent borders */
        }

        th, td {
            padding: 10px; /* Adds space inside each cell */
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Marks</th>
        </tr>
        <tr>
            <td>Sonoo</td>
            <td>Jaiswal</td>
            <td>60</td>
        </tr>
        <tr>
            <td>James</td>
            <td>William</td>
            <td>80</td>
        </tr>
        <tr>
            <td>Swati</td>
            <td>Sironi</td>
            <td>82</td>
        </tr>
        <tr>
            <td>Chetna</td>
            <td>Singh</td>
            <td>72</td>
        </tr>
    </table>
</body>
</html>

Output:

Each cell now has 10px of internal spacing, making the table cleaner and easier to read.

Tips

You can adjust padding value ( e.g., 5px, 15px, 1em ) based on you design.
Combine padding with other properties like text-align and background-color for even better presentation.
Use shorthand:
padding: 10px 15px; /* top-bottom: 10px, left-right: 15px */