Prev Next

Padding & Spacing in Tables

Adjusting padding and spacing in tables improves readability and visual clarity. Padding adds space inside cells, while cellspacing (deprecated in HTML5) or CSS properties like border-spacing add space between cells. Using CSS is the modern approach for controlling spacing.

Key Topics

Applying Padding with CSS

Example: Adding padding to <td> elements for better legibility.

<style>
td {
    padding: 10px;
}
</style>

Managing Space Between Cells

Example: Using border-spacing to create space between cells when border-collapse is separate.

<style>
table {
    border-collapse: separate;
    border-spacing: 10px;
}
</style>

Spacing Example

This example shows a table with padding and spacing controlled by CSS. A full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Table Spacing</title>
    <style>
        table {
            border-collapse: separate;
            border-spacing: 5px;
        }
        td {
            padding: 10px;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>Spacious Table</h1>
    <table>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
    </table>
</body>
</html>

Explanation: Padding inside cells and spacing between cells helps prevent the table from looking cramped, making it easier to read.

Key Takeaways

  • Use CSS padding to create space inside cells.
  • border-spacing controls the space between cells when borders are separate.
  • Avoid using cellspacing and cellpadding attributes; rely on CSS instead.
  • Proper spacing improves readability and aesthetics.
  • Adjust spacing to suit your data presentation and design.
Prev Next