Seperating the style from the markup of a web document is generally a painless, if sometimes time-consuming, task. In many cases however, the process can have some added speed-bumps; most notably when the original HTML is using an infamous table-based layout. The two most common speedbumps when dealing with table-based layouts and styling are recreating the classic borderless table and keeping the default table border appearance.
The appearance of these two kinds of table are as follows
Default Border
Borderless
The markup for these two tables looks like:
<!--Default Border -->
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<!-- Borderless -->
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
If you want to get the same effects while losing the HTML attributes you can use the folllow CSS:
Default Border
table{border-spacing:0px;border:solid 1px #8D8D8D;width:130px;}
table td{
border:solid 1px #C0C0C0;
border-bottom:solid 1px #8D8D8D;
border-left:solid 1px #8D8D8D;
display:table-cell;
margin:0;
padding:0;}
Borderless
table{border:none;border-collapse:collapse;}
table td{padding:0;margin:0;}
Duplicating the default table border look requires extra rules in its style definition because the default border contains two shades so the border-color values must be set accordingly.
That is the basic method to replicating HTML table effects with CSS that are usually created with HTML attributes.
Subscribe
Email Subscription