It can be incredibly frustrating for a beginner to try and grasp the basic concepts of how tables should be built, and how to style them properly, so that all of the data is presented in understandable manner.
The tag we’re after is called cellpadding, which enables us wrap the TD and TH html elements with room around them. The important thing to note is that this works only when we’ve set a border for our tables, so the effect becomes visible. On the other hand, cellspacing is used to wrap space around your table elements.
Here are two examples I’ve just built,
Table with cellpadding set to 20:
Table with cellpadding set to 40:
We clearly get to see that instead of table padding not working for us, we’ve got it working just fine, and it’s doing its job like it should. Here is the code sample that I used:
<table cellpadding="40">
<tr>
<th>Code</th>
<th>Condo</th>
</tr>
<tr>
<td>Full Stack</td>
<td>Custom</td>
</tr>
</table>
and because I said we need a border, here is your CSS for the border of the table:
table, th, td {
border:1px solid black;
}
This is the most traditional way of getting it to work, and please do try and play with it yourself right now, before making any further assumptions. It’s often our own fault of overlooking and over-complicating things, that we start to blame the whole World, instead of looking at our own way of thinking.
I have had these little snippets in my bookmarks for ages now, and so it’s time I share them forward with the community. I have used these pieces in my own projects, or have linked to them when helping out, and they’re all unique approaches on how to style and modify your table padding.
Setting Up cellpadding & cellspacing in CSS
This was shared a couple of years ago, and is still a valid way of modifying and optimizing the cellpadding through CSS. You can see the full snippet by following this link.
Quick & Easy Alternative
This snippet is perfect for those who’re unsure of how border-spacing and border-collapse works, and so an easy to use alternative has been produced. Take a look at it here, thanks to whoever shared this!
HTML Attribute cellpadding Reference
This is exactly what the headline says it is, a quick reference to refresh your memory, or to educate yourself on the attritube itself. I’ve added this to the list because it has a ‘Playground’, where you can edit live HTML / CSS code, and so in turn try out any of the above methods.
It’s from SitePoint, check it out here.
Using div for cellpadding
The last way of getting our table padding to work for us by using a div to style the element and then CSS to organize everything else. You can see and play with code in the snapshot by following this link, you might need to add some borders (see the top code), to make it easier to understand.
Is Your Table Padding Not Working?
You’re more than welcome to leave a comment with your issues / problems regarding table padding. I’ve tried to provide enough demos and examples to help you out, and these have been the ultimate resources / tutorials to myself along the path.
If you’ve got other ways of dealing with this ‘issue’, please educate me and the rest of the community. I hope this helps, and good luck.
