HTML Table - Cell Padding

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 Code:

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; } </style> </head> <body> <h2>Cellpadding</h2> <p>Cell padding specifies the space between the cell content and its borders.</p> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>
Output:

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:

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding-top: 10px; padding-bottom: 20px; padding-left: 30px; padding-right: 40px; } </style> </head> <body> <h2>Cellpadding - top - bottom - left - right </h2> <p>We can specify different padding for all fours sides of the cell content.</p> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>
Output:

Cellpadding - top - bottom - left - right

We can specify different padding for all fours sides of the cell content.

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

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 Code:

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } table { border-spacing: 30px; } </style> </head> <body> <h2>Cellspacing</h2> <p>Change the space between the cells with the border-spacing property.</p> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>
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

AR3school

HTML Table - Cell Padding