Cell Padding
Table Cell Padding refers to the space between the content of a table cell and its inner border. It is controlled using the padding property applied to the <td> (table data) or <th> (table header) elements. We have used the CSS padding property.
Note: The browser’s default property for the padding is 0.
Supported Attribute
Example: Illustration of HTML Table Cell Padding using the CSS padding property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Table Padding and Spacing</title>
<style>
table {
border: 2px solid black;
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 2px solid #7a3f3f;
padding: 20px;
text-align: center;
}
h1,
h3 {
text-align: center;
color: green;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>The HTML table defines the
space between cells uding CSS
border-spacing property .
</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Ravi</td>
<td>11</td>
<td>2</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>HTML Table Padding and Spacing
HTML Table Padding & Spacing facilitates the inclusion of the padding inside the cells, along with providing the spacing between the cells. It helps to define the layout and appearance of tables.
The Cell Padding is used to define the space between the cell text and the cell border. Cell Spacing is used to define the space between each cell with the help of the CSS border-spacing property.
Table of Content
- Cell Padding
- Cell Spacing
- HTML Table DOM Property