CSS A paragraph of text with padding in a table
Padding Text in a Table with CSS
Tables are a common layout method in web design. When displaying text in a table, we often want to have a certain amount of padding to increase the space between the text and the table border, making the page look more beautiful. This article will explain how to use CSS to add padding to text in a table.
1. Use the padding property to add padding to table text
In CSS, we can use the padding property to set the padding value of an element. By adding the padding property to table cells (td or th), you can add padding to the text in the table.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
In the example code above, we added the padding: 10px; attribute to the th and td elements in the table, setting a 10-pixel padding. Running this code, you can see that there’s some space between the text and the table border.
2. Use padding-top, padding-right, padding-bottom, and padding-left to set the top, right, bottom, and left padding values, respectively.
In addition to using the padding property directly to set uniform padding, you can also use padding-top, padding-right, padding-bottom, and padding-left to set the top, right, bottom, and left padding values, respectively.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
}
</style>
</head>
<body>
<table> <tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
In the example code above, we set different padding values for the top, right, bottom, and left of the table cells: 15px, 20px, 15px, and 20px, respectively. Run the code to see the padding effects in different directions.
3. Using the padding shorthand property to set top, right, bottom, and left padding
In addition to setting the top, right, bottom, and left padding values individually, we can also use the padding shorthand property to set padding values in all four directions simultaneously.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 15px 20px 15px 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
In the example code above, we use padding: 15px 20px 15px 20px; to set the top, right, bottom, and left padding values to 15px, 20px, 15px, and 20px, respectively. Run this code to see the padding effects in all four directions.
4. Setting Padding Using Percentages
In addition to using pixel values to set padding, we can also use percentage values to achieve padding effects relative to the parent element.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5% 10% 5% 10%;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
In the example code above, we use padding: 5% 10% 5% 10%; to set the top, right, bottom, and left padding values to 5% and 10% of the parent element’s width. Running this code will show the padding effect relative to the parent element’s width.
5. Using em or rem Units to Set Padding
In addition to using pixels and percentages to set padding, we can also use em or rem units to achieve padding relative to the element’s font size.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 0.5em 1em 0.5em 1em;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
In the example code above, we use padding: 0.5em 1em 0.5em 1em; to set the top, right, bottom, and left padding values to 0.5em and 1em of the element’s font size. Running this code will show the effect of the padding relative to the element’s font size.
6. Using the calc() Function to Calculate Padding Values
In CSS, we can also use the calc() function to calculate padding values, allowing for more flexible padding settings.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: calc(1em + 10px) calc(2em - 5px) calc(1em + 10px) calc(2em - 5px);
}
</style>
</head>
<body> <table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
In the example code above, we use the calc() function to calculate the top, right, bottom, and left padding values: 1em + 10px, 2em – 5px, 1em + 10px, and 2em – 5px, respectively. Run this code to see the calculated padding effect.
7. Use inherit to inherit padding values from a parent element
In CSS, we can use the inherit keyword to inherit padding values from a parent element.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
padding: 10px;
}
th, td {
border: 1px solid black;
padding: inherit;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th> </tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
In the example code above, we set padding: 10px; for the table, and then set padding: inherit; for the th and td elements within the table to inherit the parent element’s padding value. Running this code, you can see that the padding value is successfully inherited.