Table Padding And Spacing In HTML - Dot Net Tutorials

Trang chủ » Html Td Border Padding » Table Padding And Spacing In HTML - Dot Net Tutorials

Có thể bạn quan tâm

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.

Table Padding and Spacing in HTML with Examples

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.

HTML Table Cell 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.

Table Padding and Spacing in HTML

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.

HTML Table Cell Spacing

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.

Table Padding and Spacing in HTML with Examples

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.dotnettutorials 1280x720Dot Net Tutorials

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.

Từ khóa » Html Td Border Padding