Welcome to the CSS tutorial, and today we will cover the CSS cell padding. We have already covered the CSS Padding, if you missed it, then just give a few minutes to learn the basics. The padding means a space around the element or the contents of the element.
CSS cell padding – Definition
The CSS cell padding will set the space between the cell wall and content of the cell. We can use cell padding more effectively as compared to the CSS cell spacing.
The use of the cell padding will let you create an impressive layout, or table, which will work perfectly as per your website template or theme. You can apply cell padding by two ways:
- Cell padding using HTML.
- CSS cell padding.
CSS cell padding – Example
We will illustrate the examples with the pictures to let you understand the meaning of the cell padding, and when you will learn CSS cell spacing, then it will clear your doubt regarding the cell spacing and the cell padding.
Cell padding example – HTML
In this example, we have just set the border to ‘1’, and cell padding attributes value to ‘50px’. To make it simple, we have just put Html padding A, B, C and D data. When you will run this code, then you will see these values in the table cells.
<html> <head> <title>Learn CSS cell padding</title> </head> <body> <h2>Cell padding using Html</h2> <table border="1" cellpadding="50px"> <tr><td>Html padding A</td><td>Html padding B</td></tr> <tr><td>Html padding C</td><td>Html padding D</td></tr> </body> </html>
The output of the above example will be:
The black area is cell padding, as it is the space between the content and the wall. In fact, we have set the cell padding for each side of the content.
Cell padding example – CSS
In this example, we will get the same result that we got in the earlier example. We have just replaced the HTML tables attribute with the CSS properties. Let’s see the result we will get, when we will run this code.
<html>
<head>
<title> Learn CSS cell padding</title>
<style type="text/css">
table.sharplesson_CSS td { padding:50px; }
</style>
</head>
<body>
<h2>Cell padding using CSS</h2>
<table border="5" class="sharplesson_CSS">
<tr><td>CSS Padding A</td><td>CSS Padding B</td></tr>
<tr><td>CSS Padding C</td><td>CSS Padding D</td></tr>
</table>
</body>
</html>
The output will be:
We can see that, the result is same with a slight change. Here we have changed the border value of the table from the 1 to 5. We did it to show you the border part as well.
CSS Cell Padding – Length units
In our example, we have just used the pixel unit, but you can use:
- Point (pt)
- Centimeter (cm)
- Percent (%)
- Em
Conclusion
We have just covered CSS cell padding with examples using the HTML and CSS. CSS is an easy to learn language, and for sure you will love CSS. CSS needs attention, and if you will manage to give, then trust me, you can design beauty using the CSS.