0% found this document useful (0 votes)
18 views

Table Padding and Spacing HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
18 views

Table Padding and Spacing HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML Table Padding &

Spacing
❮ PreviousNext ❯

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 »

Exercise?
What is the correct CSS property for styling the padding inside table cells?
padding

table-padding

cell-padding

You might also like