Back to: HTML Tutorials
Table Padding and Spacing in HTML with Examples
In this article, I am going to discuss Table Padding and Spacing in HTML with Examples. Please read our previous article where we discussed Table Colspan and Rowspan in HTML with Examples. At the end of this article, you will learn everything about HTML Table Padding and Spacing with Examples.
Table Padding and Spacing in HTML
In Tables, we can add padding to individual cells as well as specify space between different cells. For better understanding, please have a look at the below image.
HTML Table – Cell Padding
Cell padding is defined as the space between the cell content and the boundary of the cell. By default, the value of cell padding is set to 0. We will use the CSS padding property to specify the padding.
For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
padding:10px;
}
</style>
</head>
<body>
<p>Cell Padding</p>
<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Obama</td>
<td> Lincoln</td>
<td>28</td>
</tr>
<tr>
<td>Mark</td>
<td>Henry</td>
<td>45</td>
</tr>
<tr>
<td>Karl</td>
<td>Anderson</td>
<td>33</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
HTML Table – Cell Spacing
Cell spacing is defined as the space between two cells in an HTML table. By default, the value of cell spacing is set to 2 pixels. We will use the CSS border-spacing property to specify the spacing between two cells.
For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-spacing:15px;
padding:10px;
}
</style>
</head>
<body>
<p>Cell Spacing</p>
<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Obama</td>
<td> Lincoln</td>
<td>28</td>
</tr>
<tr>
<td>Mark</td>
<td>Henry</td>
<td>45</td>
</tr>
<tr>
<td>Karl</td>
<td>Anderson</td>
<td>33</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
In the next article, I am going to discuss Table Colgroup in HTML with Examples. Here, in this article, I try to explain Table Padding and Spacing in HTML with Examples and I hope you enjoy this HTML Table Padding and Spacing with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.