bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

Loading lesson path

Learn/HTML/HTML Foundations
HTML•HTML Foundations

HTML Table Padding & Spacing

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

hellohellohello
hellohellohello
hellohellohello
hellohellohello
hellohellohello
hellohellohello

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:

th, td
{
 padding: 15px;
}

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

Add padding to the other sides with the padding-bottom , padding-left , and padding-right properties:

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

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:

table
{
 border-spacing:
 30px;
}

Previous

HTML Table Headers

Next

HTML Table Colspan & Rowspan