Horje
What is HTML Table Padding

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:

Full Example of HTML Table Padding





Related Articles
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

Single Articles
Full Example of HTML Table PaddingHTML 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



Share on: