HTML table cellspacing and cellpadding in CSS

As I often find myself cleaning up legacy webapp codebases, this item seems pretty common, particularly for sites that were using TABLE based layouts.


<table cellpadding="0" cellspacing="0">
<thead>
<tr><th>Hello</th></tr>
</thead>
<tbody>
<tr><td>World</td></tr>
</tbody>

With modern browsers, this is easily accomplished with some simple CSS, as you might need some distinction between different tables or have some cases that require padding or spacing, you MIGHT consider assigning a CSS class as I have below.


<style type="text/css">
table.modern{
border-collapse: collapse; /* 'cellspacing=0' equivalent */
}
table.modern td,
table.modern th{
padding: 0; /* 'cellpadding=0' equivalent */
}
</style>

<table class="modern">
<thead>
<tr><th>Hello</th></tr>
</thead>
<tbody>
<tr><td>World</td></tr>
</tbody>

Leave a Reply