CSS table cellpadding property

When designing web pages, tables are a commonly used layout element used to display data or layout information. In HTML, we use the <table> tag to create a table. In CSS, we can enhance the style of a table using various properties, including the cellpadding property.

What is cellpadding?

cellpadding is a CSS property used to set the amount of space between table cell content and the cell border. By setting cellpadding, we can control the distance between table cell content and the inner border of the cell, making the table more aesthetically pleasing and readable.

How to use cellpadding?

The cellpadding attribute can be applied directly to the <table> tag or set via CSS style sheets. Here are two examples of how to use it:

Setting the `cellpadding` attribute directly in the `<table>` tag

<table cellpadding="10"> 
<tr> 
<th>Name</th> 
<th>Age</th> 
</tr> 
<tr> 
<td>Zhang San</td> 
<td>25</td> 
</tr> 
<tr> 
<td>Li Si</td> 
<td>30</td> 
</tr> 
</table>

In the above example, by setting cellpadding="10" in the <table> tag, we add 10px padding to all cells in the table.

Use CSS style sheets to set the `cellpadding` property

table {
cellpadding: 10px;
}

<table class="myTable">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Zhang San</td>
<td>25</td>
</tr>
<tr>
<td>Li Si</td>
<td>30</td>
</tr> 
</table>

In the example above, we set the table’s cellpadding property using CSS, adding 10px of padding to the table with the myTable class.

Practical Application

The following is a simple example to demonstrate the specific effect of cellpadding:

<!DOCTYPE html> 
<html Tutorial">html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS Table Cellpadding</title> 
<style> 
table { 
border-collapse: collapse; 
} 
table td, table th { 
border: 1px solid black; 
padding: 10px; 
} 
</style> 
</head> 
<body> 
<table> 
<tr> <th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Zhang San</td>
<td>25</td>
</tr>
<tr>
<td>Li Si</td>
<td>30</td>
</tr>
</table>
</body>
</html>

In this example, we set the cell’s border to a 1px solid black line and padding to 10px. This creates a 10px gap between the cell content and the border, making the table more aesthetically pleasing.

Summary

cellpadding is a CSS property used to control the space between the cell content and the border. By setting the cellpadding property appropriately, we can make the table more aesthetically pleasing and easier to read. In practical applications, you can set an appropriate cellpadding value based on design requirements and aesthetic requirements to achieve the best visual effect.