CSS細線表
1640 ワード
HTMLでborder="1"を設定すると、表の枠の実際の大きさは2 pxですが、1 pxの細い線の表を作るにはどうすればいいですか?以前は1 pxの表を作る时、私は表の背景の色を使って、それからもう一つの色でセルの背景を设计して、更に表の间隔を1 pxに设定して、このように私达の1 pxの表に达することができて、以下の例:
次の方法は簡単で、htmlコードも大幅に減少し、構造がより明確になりました.cssコード:
<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コードも大幅に減少し、構造がより明確になりました.cssコード:
<style type="text/css">
<!--
table{
border-collapse:collapse;
}
td{
background:#ffc;
border:solid 1px #f90;
height:22px;
}
-->
</style>
htmlコード:<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>