Adding Cell Padding in an HTML Table
Cell padding specifies the space between the cell content and its borders. If we do not specify a padding, the table cells will be displayed without padding.
Syntax
th, td {
padding: 20px;
}
Example: Addition of Table cell padding in HTML.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 20px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
HTML Tables
HTML tables offer a powerful tool for presenting data on your website. But mastering them goes beyond just rows and columns. This article serves as your ultimate guide to unlocking the potential of HTML tables, stepping beyond the basics.
Prerequisites: HTML Introduction
Contact Us