How do I create a table with a thin 1 pixel border?
This solution is deprecated and should be avoided when creating standards-compliant or accessible websites.
It is possible to create this effect with HTML, but it involves nesting tables and using cellspacing to get the desired effect. This does go against the purist HTML grain - using tables to create effects, tables should be for tabulating correlated data.
<table border="0" cellpadding="0">
<tr>
<td bgcolor="black">
<table border="0" cellspacing="1">
<tr bgcolor="white">
<td> Column #1 </td>
<td> Column #2 </td>
<td> Column #3 </td>
</tr>
</table>
</td>
</tr>
</table>
A better, and more modern way of creating this effect is to use Cascading Style Sheets. The only problem with CSS is that it is only supported in standards compliant browsers, but each browser is falling into line, albeit rather slowly, so in modern browsers this technique shouldn't present a problem. As you can see in most browsers, the snippet of code above is surrounded with a thin black line, this is the styled rendering of the <pre>. Here is the essential snippet of the style:
pre {
border-style: solid;
border-width: 1px;
}