制作1px表格边框的十种方法（html和css）

最新推荐文章于 2024-07-05 17:35:21 发布

evangel_z

最新推荐文章于 2024-07-05 17:35:21 发布

阅读量7.1k

点赞数 1

分类专栏： HTML 文章标签： html css border table

HTML 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

第一种：

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

第九种：

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

第十种：

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