Definition:
CSS table padding property sets the space between table borders and the content of the tables. See the below example of using table padding in a table.
Syntax:
padding: 20px;Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse: collapse;
}
table, th, td {
border: 1px dashed red;
padding: 20px;
}
</style>
</head>
<body>
<h3>Example of CSS table padding</h3>
<table>
<tr>
<th>Roll No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Hobby</th>
</tr>
<tr>
<td>1.</td>
<td>Harry</td>
<td>Potter</td>
<td>Acting</td>
</tr>
<tr>
<td>2.</td>
<td>Brad</td>
<td>Pitt</td>
<td>Acting</td>
</tr>
</table>
</body>
</html>
Output:
In the above table, padding is applied to all sides of the table content. If you need padding only into left, right, top or bottom, use the below syntax for specific padding.
padding-left: 20px; /*applies padding only on left side*/
padding-right: 20px; /*applies padding only on right side*/
padding-top: 20px; /*applies padding only on top side*/
padding-bottom: 20px; /*applies padding only on bottom side*/
padding: 20px; /*applies padding on all side together*/To understand more about CSS Padding, read the CSS Padding Chapter.
You may be interested in the following topics:
- CSS Striped Tables
- CSS Hoverable Tables
- CSS Vertical Dividers
- CSS Horizontal Dividers
- CSS Vertical Alignment
- CSS Horizontal Alignment
- CSS Table Color
- CSS Table Padding
- CSS Table Height
- CSS Table Width
- CSS Collapse Table Borders
- CSS Table Borders
- CSS Table (All Properties)