HTML Table Padding

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Table Padding & Spacing

HTML Table – Cell Padding

Cell padding is defined as the spacing between the cell edges and the cell content.

The padding is set to 0 by default.

The CSS padding property is used to add padding on table cells:

Example:

				
					<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<p><strong>Tip:</strong> Try to change the padding to 5px.</p>
</body>
</html>


				
			

<style>
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>

Output:

Cellpadding

Cell padding specifies the space between the cell content and its borders.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Tip: Try to change the padding to 5px.

HTML Table – Cell Spacing

Cell spacing is the space between each cell

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing property on the table element:

Example

				
					<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cellspacing</h2>
<p>Change the space between the cells with the border-spacing property.</p>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>

				
			

<style>
table {
border-spacing: 30px;
}
</style>

Output:

Cellspacing

Change the space between the cells with the border-spacing property.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420