博主呓语:

设置表格边框为1px的方法

Posted by 破冰 on 2013-6-17 14:40 Monday

下面是网页制作中八种设置表格边框为1px的方法:

第一种:
使用1*1的图片,来填充单元格背景,并设置单元格的宽度,高度为1px

第二种:
<html>
<body>
<table width="200" height="100" border="1" bordercolor="red" cellspacing="0">
<tr>
<td></td><!--单元格中不要插入任何内容-->
</tr>
</table>
</body>
</html>

第三种:利用二级表格

<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>

第四种:利用单元格背景填充

<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>

第五种:利用亮边框和暗边框

<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>


第六种:利用单元格的间距

<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>


第七种:利用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>


第八种:利用border:

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

发表评论: