1 pxテーブルの枠線を作成する10の方法(htmlとcss)

3845 ワード

1つ目:
1*1の画像を使用して、セルの背景を塗りつぶし、セルの幅を1 pxの高さで設定します.
2つ目:

<html>
<body>
<table width="200" height="100" border="1" bordercolor="red" cellspacing="0">
<tr>
<td></td><!--            -->
</tr>
</table>
</body>
</html>

第3種:二級表の利用

<table width="200" height="100" border="0" bgcolor="red" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<table width="198" height="98" bgcolor="white" border="0">
<tr>
<td>www.blueidea.com</td>
</tr>
</table>
</td>
</tr>
</table>

第4種:セルのバックグラウンドで塗りつぶす

<table width="200" height="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="1" bgcolor="red"></td>
</tr>
<tr>
<td width="1" bgcolor="green"></td><td width="198" height="98">www.blueidea.com</td><td width="1" bgcolor="blue"></td>
</tr>
<tr>
<td colspan="3" height="1" bgcolor="orchid"></td>
</tr>
</table>

第5種:明るい枠線と暗い枠線を利用する

<table width="200" height="100" border="1" bordercolorlight="red" bordercolordark="white"
cellpadding="0" cellspacing="0">
<tr>
<td>www.blueidea.com</td><td>www.blueidea.com</td>
</tr>
</table>

第6種:セルの間隔を利用

<table width="200" height="100" border="0" bgcolor="red"
cellpadding="0" cellspacing="1">
<tr>
<td bgcolor="white">www.blueidea.com</td><td  bgcolor="white">www.blueidea.com</td>
</tr>
</table>

第7種:collapse利用

<table width="200" height="100" border="1" bordercolor="blue" cellspacing="0" style="border-collapse:collapse">
<tr>
<td>www.blueidea.com</td><td>www.blueidea.com</td>
</tr>
</table>

第8種:border利用

<table width="200" height="100" border="0" style="border:1px red solid">
<tr>
<td>www.blueidea.com</td>
</tr>
</table>

第9種:

<table cellspacing=1 bgcolor=black width=300 height=300>
<tr bgcolor=white><td></td><td></td><td></td></tr>
<tr bgcolor=white><td></td><td></td><td></td></tr>
<tr bgcolor=white><td></td><td></td><td></td></tr>
</table>

10番目:

<style type="text/css">
#border {
border-top: 1px red solid;
border-left: 1px red solid;
}
#border td {
border-right: 1px red solid;
border-bottom: 1px red solid;
}
</style>
<table width="500" border="0" cellspacing="0" cellpadding="0" id="border">
  <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>

css 3ではfirst-childが機能しません

jQuery位置、CSSおよび寸法