Controlling HTML Table Spacing with CSS: Padding and Spacing

Learn how to precisely control the spacing in your HTML tables using CSS. This tutorial explains how to adjust cell padding (space between content and borders) and cell spacing (space between cell borders) with code examples and best practices for creating visually appealing tables.

Controlling Table Padding and Spacing with CSS

This chapter explains how to adjust the spacing within and between table cells using CSS, enhancing the visual presentation of your HTML tables.

Cell Padding

Cell padding refers to the space between a cell's content and its borders. By default, cell padding is 0. You can adjust it using the CSS padding property applied to the `` (table header) and `` (table data) elements.

th, td {
  padding: 15px; /* All sides */
}

This adds 15 pixels of padding on all sides of each cell. You can also control padding individually for each side (top, right, bottom, left) using the padding-top, padding-right, padding-bottom, and padding-left properties.

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

Try it Yourself » (for both examples)

Cell Spacing

Cell spacing refers to the space between the borders of adjacent cells in a table. The default spacing is typically 2 pixels. To control cell spacing, use the CSS border-spacing property applied to the <table> element.

table {
  border-spacing: 30px; /* Space between cells */
}