等待-放飞梦想

勤现在-乐将来

细线表格的处理

Await / 前端交互 / 2009/11/14 9:12 / 热度(4,474)

最近的工作中老要用到表格。说真的,我现在很不习惯表格;看到就头痛;但没办法,有需要就得满足。囧!~说到表格最常用的就是细线表格了,每次都要都搜索下细线表格;虽然很简单但却一直主不住。郁闷。所以转了篇文章作个记录;在HTML中,我们设置border=”1″ 时,表格边框实际大小是2px,那如果我们要做成1px的细线表格要怎么办?以前在做1px的表格的时候,我会用表格背景颜色,然后再用另一种颜色设计单元格的背景,再把表格间距设置成1px,这样就能达到我们的1px表格了,如下例:

<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代码也减少了很多,结构更加的清晰。

  1. <style type="text/css">
  2. <!--
  3. table{
  4. border-collapse:collapse;
  5. }
  6. td{
  7. background:#ffc;
  8. border:solid 1px #f90;
  9. height:22px;
  10. }
  11. -->
  12. </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>

本文转载自:http://www.chunzhen.org.cn/2008/07/thin-table.html

评论(6)

  1. wuleilei
    2009/12/30

    呵呵,很好的方法~~

    • david
      2010/06/10

      呵,这主题确实挺好看的!

  2. 尚品元素
    2009/11/27

    太深懊了点,主题不错的。

  3. bolo
    2009/11/24

    第一种方法很少人用吧?

  4. Jutoy
    2009/11/19

    table现在用得很少了,但有时候还是挺有用的……

  5. LAONB
    2009/11/16

    表格很少用,上次用滑动门时用过,平时都是DIV加无序列表。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Top 管理

无觅相关文章插件,快速提升流量