HTML Tutorial
HTML Forms
HTML Graphics
HTML Media
HTML API
HTML Table Padding & Spacing
HTML Table – Cell Padding
Cell padding is defined as the spacing between the cell edges and the cell content.
The padding is set to 0 by default.
The CSS padding property is used to add padding on table cells:
Example:
Cellpadding
Cell padding specifies the space between the cell content and its borders.
Firstname
Lastname
Age
Jill
Smith
50
Eve
Jackson
94
John
Doe
80
Tip: Try to change the padding to 5px.
<style>
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
Output:
Cellpadding
Cell padding specifies the space between the cell content and its borders.
Firstname | Lastname | Age |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
Tip: Try to change the padding to 5px.
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
Cellspacing
Change the space between the cells with the border-spacing property.
Firstname
Lastname
Age
Jill
Smith
50
Eve
Jackson
94
John
Doe
80
<style>
table {
border-spacing: 30px;
}
</style>
Output:
Cellspacing
Change the space between the cells with the border-spacing property.
Firstname | Lastname | Age |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |