Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set cell padding in HTML?
In HTML, cell padding refers to the space between the cell borders and the content inside table cells. We can set cell padding using CSS properties like padding applied through inline styles, internal stylesheets, or external CSS files. Cell padding improves table readability by providing breathing space around cell content.
Syntax
Following is the syntax to set cell padding in HTML using inline styles −
<th style="padding: value">Header Content</th> <td style="padding: value">Cell Content</td>
Following is the syntax using CSS selectors −
th, td {
padding: value;
}
The value can be specified in pixels (px), ems (em), percentages (%), or other valid CSS units.
Using Inline Style Attribute
The simplest method is to use the style attribute directly on <th> and <td> elements to set padding for individual cells.
Example
<!DOCTYPE html>
<html>
<head>
<title>Cell Padding with Inline Styles</title>
<style>
table, th, td {
border: 1px solid black;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h2>Programming Languages</h2>
<table>
<tr>
<th style="padding: 15px">Language</th>
<th style="padding: 15px">Type</th>
</tr>
<tr>
<td style="padding: 10px">Python</td>
<td style="padding: 10px">Interpreted</td>
</tr>
<tr>
<td style="padding: 10px">Java</td>
<td style="padding: 10px">Compiled</td>
</tr>
</table>
</body>
</html>
The output shows a table with 15px padding in header cells and 10px padding in data cells −
Programming Languages +------------------+------------------+ | Language | Type | (15px padding) +------------------+------------------+ | Python | Interpreted | (10px padding) +------------------+------------------+ | Java | Compiled | (10px padding) +------------------+------------------+
Using CSS Selectors
For consistent padding across all table cells, it's more efficient to use CSS selectors in the <style> section or external stylesheets.
Example
<!DOCTYPE html>
<html>
<head>
<title>Cell Padding with CSS</title>
<style>
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
table, th, td {
border: 1px solid #333;
}
th {
padding: 20px;
background-color: #f0f0f0;
font-weight: bold;
}
td {
padding: 12px;
}
</style>
</head>
<body>
<h2>Employee Information</h2>
<table>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
<tr>
<td>John Smith</td>
<td>Developer</td>
<td>$75,000</td>
</tr>
<tr>
<td>Sarah Johnson</td>
<td>Designer</td>
<td>$65,000</td>
</tr>
</table>
</body>
</html>
The output displays a professional-looking table with consistent padding and styling −
Employee Information +----------------+----------------+----------------+ | Name | Position | Salary | (20px padding, gray background) +----------------+----------------+----------------+ | John Smith | Developer | $75,000 | (12px padding) +----------------+----------------+----------------+ | Sarah Johnson | Designer | $65,000 | (12px padding) +----------------+----------------+----------------+
Different Padding Values for Each Side
CSS allows setting different padding values for top, right, bottom, and left sides of cells using individual padding properties or shorthand notation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Custom Cell Padding</title>
<style>
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding-top: 8px;
padding-bottom: 12px;
padding-left: 20px;
padding-right: 15px;
}
</style>
</head>
<body>
<h2>Product Catalog</h2>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Laptop</td>
<td>$899</td>
<td>25</td>
</tr>
<tr>
<td>Smartphone</td>
<td>$549</td>
<td>42</td>
</tr>
</table>
</body>
</html>
The output shows asymmetric padding with more space on the left and bottom sides −
Product Catalog +----------------------+----------------------+----------------------+ | Product | Price | Stock | +----------------------+----------------------+----------------------+ | Laptop | $899 | 25 | +----------------------+----------------------+----------------------+ | Smartphone | $549 | 42 | +----------------------+----------------------+----------------------+
Padding Shorthand Notation
CSS padding can be specified using shorthand notation with one to four values −
padding: 10px− Same padding on all sidespadding: 10px 20px− Vertical (top/bottom) and horizontal (left/right)padding: 5px 10px 15px− Top, horizontal, bottompadding: 5px 10px 15px 20px− Top, right, bottom, left (clockwise)
Example
<!DOCTYPE html>
<html>
<head>
<title>Padding Shorthand Examples</title>
<style>
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
table, th, td {
border: 1px solid #666;
}
.method1 th, .method1 td { padding: 15px; }
.method2 th, .method2 td { padding: 10px 25px; }
.method3 th, .method3 td { padding: 5px 15px 10px 20px; }
</style>
</head>
<body>
<h3>Equal Padding (15px all sides)</h3>
<table class="method1">
<tr><th>Header</th><td>Content</td></tr>
</table>
<h3>Vertical 10px, Horizontal 25px</h3>
<table class="method2">
<tr><th>Header</th><td>Content</td></tr>
</table>
<h3>Custom: Top 5px, Right 15px, Bottom 10px, Left 20px</h3>
<table class="method3">
<tr><th>Header</th><td>Content</td></tr>
</table>
</body>
</html>
The output demonstrates three different padding approaches with visibly different spacing around cell content.
Comparison of Padding Methods
| Method | Best Use Case | Advantages | Disadvantages |
|---|---|---|---|
| Inline Style | Individual cell customization | Precise control, overrides other styles | Repetitive code, harder to maintain |
| CSS Selectors | Consistent table styling | Clean HTML, easy maintenance, reusable | Less granular control per cell |
| Individual Properties | Asymmetric padding needs | Fine-grained control of each side | More verbose CSS code |
| Shorthand Notation | Clean, concise styling | Compact syntax, multiple values | Less explicit than individual properties |
Conclusion
Cell padding in HTML tables is controlled using CSS padding properties, which can be applied via inline styles or CSS selectors. Use inline styles for individual cell customization and CSS selectors for consistent table-wide padding. Proper cell padding significantly improves table readability and visual appeal.
51K+ Views
