HTML Table Padding

by

HTML table padding is the space between the content inside a table cell and its border. Padding makes table data easier to read by preventing text, numbers, and other content from touching the edges of a cell.

In modern HTML, you use CSS to control table padding. The padding property allows you to add space inside table header cells (<th>) and data cells (<td>). You can also set different padding values for the top, right, bottom, and left sides.

In this tutorial, you will learn how to add padding to HTML tables, customize cell spacing, apply padding to individual sides, and create well-formatted tables with practical examples.

What Is HTML Table Padding?

HTML table padding refers to the space between a cell’s content and its border. It improves readability and gives table information a clean appearance.

For example, without padding, text may appear too close to the cell borders. Adding padding creates more space around the content.

You can apply padding to table cells using CSS.

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

The padding: 10px declaration adds 10 pixels of space inside each table header and data cell.

HTML Table Padding Example

The following example demonstrates how to add padding to a table using CSS.

<!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</title>

  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #333;
      padding: 12px;
      text-align: left;
    }

    th {
      background-color: #0878d1;
      color: white;
    }
  </style>
</head>
<body>

  <h2>Student Details</h2>

  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Course</th>
    </tr>
    <tr>
      <td>Rahul</td>
      <td>21</td>
      <td>HTML</td>
    </tr>
    <tr>
      <td>Priya</td>
      <td>22</td>
      <td>CSS</td>
    </tr>
  </table>

</body>
</html>

In this example, the padding: 12px declaration adds space inside every table cell. The border separates the cells, and the blue header background distinguishes the headings from the data.

CSS Padding Property for HTML Tables

The CSS padding property controls the internal space of an HTML element. When applied to table cells, it creates space between the cell content and its border.

The basic syntax is:

td {
  padding: 15px;
}

This example adds 15 pixels of padding to every data cell.

You can apply padding to all table cells or target specific elements.

th {
  padding: 12px;
}

td {
  padding: 8px;
}

In this example, header cells receive 12 pixels of padding, while data cells receive 8 pixels.

This approach is useful when you want headings to have more space than the table data.

HTML Table Padding on All Sides

You can use a single padding value to apply the same amount of space to all four sides of a table cell.

<style>
  th, td {
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>

The padding: 10px declaration adds 10 pixels to the top, right, bottom, and left sides.

This is the simplest way to create consistent spacing throughout a table.

HTML Table Padding on Individual Sides

CSS provides separate properties to control padding on each side of a table cell.

CSS PropertyDescription
padding-topAdds space above the content
padding-rightAdds space to the right of the content
padding-bottomAdds space below the content
padding-leftAdds space to the left of the content

Example:

<style>
  td {
    padding-top: 15px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
  }
</style>

In this example, the top padding is 15 pixels, the right and left padding are 20 pixels, and the bottom padding is 10 pixels.

You can adjust these values to create the exact spacing you need.

HTML Table Padding Shorthand

The CSS padding shorthand lets you set padding on multiple sides using one declaration.

There are four common ways to use it.

SyntaxMeaning
padding: 10px;All four sides
padding: 10px 20px;Top and bottom: 10px; right and left: 20px
padding: 10px 15px 20px;Top: 10px; right and left: 15px; bottom: 20px
padding: 5px 10px 15px 20px;Top: 5px; right: 10px; bottom: 15px; left: 20px

Example:

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

This declaration adds 10 pixels of vertical padding and 15 pixels of horizontal padding.

The shorthand property helps you write cleaner CSS without specifying each side separately.

HTML Table Header Padding

You can apply padding specifically to table header cells using the <th> selector.

<style>
  th {
    padding: 15px;
    background-color: #0878d1;
    color: white;
    text-align: left;
  }
</style>

The padding: 15px declaration adds space around the header text. The background and text colors make the headings easier to distinguish.

You can use different padding values for header and data cells to create a balanced design.

HTML Table Cell Padding

The <td> element defines a standard data cell. You can apply padding to these cells independently of the headers.

<style>
  td {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
  }
</style>

This example adds 10 pixels of vertical padding and 15 pixels of horizontal padding to every data cell.

The bottom border separates rows without adding a full grid around every cell.

HTML Table Padding with Border Collapse

The border-collapse property controls how adjacent table cell borders are displayed. It does not remove the padding inside cells.

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #333;
    padding: 12px;
  }
</style>

In this example, adjacent borders are combined into a single border, while each cell retains 12 pixels of internal padding.

Remember that padding and border spacing serve different purposes. Padding adds space inside a cell, whereas border-spacing controls the gaps between cells when separate borders are used.

HTML Table Padding with CSS Styling

You can combine padding with background colors, borders, and text alignment to create professional tables.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 14px;
    text-align: left;
  }

  th {
    background-color: #0878d1;
    color: white;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f6fa;
  }
</style>

This example creates a table with a blue header, comfortable cell padding, light borders, and alternating row backgrounds.

Using padding consistently helps make large tables easier to scan.

HTML Table Padding vs Border Spacing

Padding and border spacing both affect the appearance of a table, but they control different areas.

FeaturePaddingBorder Spacing
PurposeAdds space inside a cellAdds space between cells
CSS propertypaddingborder-spacing
Applied toTable cells and other elementsTable
Works with collapsed bordersYesNo visible spacing
Examplepadding: 10px;border-spacing: 5px;

Use padding when you want more space around the content. Use border spacing when you want gaps between separate table cells.

Common HTML Table Padding Mistakes

Avoid these common mistakes when working with table padding:

  • Confusing padding with margin or border spacing.
  • Applying padding to the table element when you intend to add space inside each cell.
  • Using different padding values without considering the overall table design.
  • Adding too much padding, making the table unnecessarily large.
  • Forgetting that padding increases the space occupied by a cell.
  • Using outdated HTML attributes instead of CSS to control table spacing.

HTML Table Padding Best Practices

Follow these practices to create readable HTML tables:

  • Use CSS padding to control the internal space of table cells.
  • Apply consistent padding across similar cells.
  • Give header cells enough space to distinguish them from data.
  • Use horizontal and vertical padding values appropriate for the content.
  • Test tables on mobile screens to ensure they remain readable.
  • Combine padding with borders and alignment for a clear table structure.
  • Avoid excessive padding in tables containing many rows or columns.

HTML Table Padding Exercises

Practice the following exercises to improve your understanding of HTML table padding.

Exercise 1: Create a table with three columns and apply 10 pixels of padding to every cell.

Exercise 2: Give table headers 15 pixels of padding and data cells 8 pixels.

Exercise 3: Use padding-top, padding-right, padding-bottom, and padding-left to apply different spacing values.

Exercise 4: Use the padding shorthand to set 10 pixels of vertical padding and 20 pixels of horizontal padding.

Exercise 5: Create a styled table with a blue header, cell borders, alternating row colors, and consistent padding.

1 thought on “HTML Table Padding”

  1. Pingback: HTML Table Styling -

Comments are closed.