Full Example of HTML Table 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:
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 Padding | HTML Table Padding and Spacing |
| What is HTML Table Padding | HTML Table Padding and Spacing |
| What is 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 |
Type: | Html |
Category: | Web Tutorial |
Sub Category: | HTML Table Padding and Spacing |
Uploaded by: | Admin |