Horje
How to create 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.

Full Example of HTML Table - Cell Padding

To add padding on table cells, use the CSS padding property:
index.html
Example: HTML 

<!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>
<p><strong>Tip:</strong> Try to change the padding to 5px.</p>
</body>
</html>

Output should be:

Full Example of HTML Table - Cell Padding

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:
index.html
Example: HTML 

<!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 should be:




Related Articles
HTML Table Padding HTML Table Padding and Spacing
HTML Table Spacing HTML Table Padding and Spacing
How to create HTML Table - Cell Padding HTML Table Padding and Spacing
How to create HTML Table - Cell Spacing HTML Table Padding and Spacing

Single Articles
Full Example of HTML Table - Cell Padding HTML Table Padding and Spacing

Category :
 Web Tutorial
Sub Category :
 HTML Table Padding and Spacing
Uploaded by :
 Admin 

Read Article

https://horje.com/learn/1434/reference

 

Horje