辛夷坞

涧户寂无人,纷纷开且落

By - Christen

HTML & CSS 实现一像素表格

表格也需要看起来靓丽一些,虽然不可再用来布局页面。
这里提供两种常用的方法:

一、借助CSS

<meta charset="UTF-8">
<style type="text/css">
table{
    width: 500;
    border: 0;
    border-spacing:0;
    border-collapse:collapse;
}
#border {
    border-top: 1px gray solid;
    border-left: 1px gray solid;
}
#border td {
    border-right: 1px gray solid;
    border-bottom: 1px gray solid;
}
</style>
<table 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>

二、利用边距和背景

<table cellspacing="1" cellpadding="5" 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>

Leave a Reply

Your email address will not be published.
*
*