|
|
HTML tables can adjust the padding inside the cells, and also the space between the cells. |
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:
| 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 |
| Full Example of HTML Table Padding | HTML Table Padding and Spacing |
Read Full: | HTML Table Padding and Spacing |
Category: | Web Tutorial |
Sub Category: | HTML Table Padding and Spacing |
Uploaded: | 1 year ago |
Uploaded by: | Admin |
Views: | 7 |
Ref on: | View |