細線表

回転元:http://www.chunzhen.org.cn/2008/07/thin-table.html
 
HTMLでborder="1"を設定すると、表の枠の実際の大きさは2 pxですが、1 pxの細い線の表を作るにはどうすればいいですか?以前は1 pxの表を作る時、私は表の背景の色を使って、それから別の色でセルの背景を設計して、更に表の間隔を1 pxに設定して、このように私達の1 pxの表に達することができて、以下の例:
 

<table align="center" bgcolor="#f90" border="0" cellpadding="0" cellspacing="1" width="80%">
<tr>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
</tr>
<tr>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
</tr>
<tr>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
</tr>
</table>

 
この方法は実現できるが,ページ内のコードが多くなり,局所制御も相対的に面倒になる.
次の方法は簡単で、htmlコードも大幅に減少し、構造がより明確になりました.
 

<style type="text/css">
<!--
table{
border-collapse:collapse;
}
td{
background:#ffc;
border:solid 1px #f90;
height:22px;
}
-->
</style>

 

<table width="80%" align="center">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>