Padding & Spacing
HTML tables have the ability to modify both the cell-to-cell and intra-cell padding.
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
The distance between a cell’s boundaries and content is known as cell padding.
The padding is set to 0 by default.
The CSS padding property can be used to add padding to table cells:
Example
th, td {
padding: 16px;
}
Use the padding-top attribute to provide padding only above the content.
Additionally, the remaining sides that have the padding-left, padding-right, and padding-bottom properties are:
Example
th, td {
padding-top: 20px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 50px;
}
HTML Table - Cell Spacing
The distance between each cell is called cell spacing.
The spacing is two pixels by default.
Use the table element’s CSS border-spacing attribute to alter the distance between table cells:
Example
table {
border-spacing: 40px;
}
