HTML Table Padding & Spacing

❮ Previous Next ❯

HTML tables can adjust the padding inside the cells, and also the space between the cells.

With Padding
hello hello hello
hello hello hello
hello hello hello
With Spacing
hello hello hello
hello hello hello
hello hello hello

HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example

th, td {
  padding: 15px;
}
Try it Yourself »

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom, padding-left, and padding-right properties:

Example

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

HTML Table - Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing property on the table element:

Example

table {
  border-spacing: 30px;
}
Try it Yourself »

HTML Exercises

Test Yourself With Exercises

Exercise:

Use the correct CSS property to add 15 pixels of space between the cell border and cell content.

The result should look like this:

hello hello hello
hello hello hello
hello hello hello

.table td {
  : 15px;
}

Start the Exercise


❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.