Skip to main content

HTML Table Padding and Spacing

By SamK
0
0 recommends
CMS

In HTML tables, you can adjust the padding inside the cells as well as the spacing between the cells.

HTML Table - Cell Padding

Cell padding refers to the space between the edges of a cell and its content. 

By default, this padding is set to 0.

To add padding to table cells, you can use the CSS padding property.

th, td {
  padding: 15px;
}

HTML Table Cell Padding Demo

You can specify different padding values for the top, right, bottom and left of the content by using the padding-top, padding-right, padding-bottom and padding-left properties respectively.

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

HTML Table Padding Demo

HTML Table - Cell Spacing

Cell spacing refers to the space between each cell in a table. 

By default, this space is set to 2 pixels. 

To adjust the space between table cells, you can use the CSS border-spacing property on the table element.

table {
  border-spacing: 30px;
}

HTML Border Spacing Demo

 Please check below options for the links to our previous or next tutorial.

Questions & Answers