当前位置:

首页 > 前端交互

细线表格的处理

最近的工作中老要用到表格。说真的,我现在很不习惯表格;看到就头痛;但没办法,有需要就得满足。囧!~说到表格最常用的就是细线表格了,每次都要都搜索下细线表格;虽然很简单但却一直主不住。郁闷。所以转了篇文章作个记录;在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

本文引用地址: 

随机日志

  • 2008-09-09 -- 联想IdeaPad S9/S10的视频广告《爱,永远在线》 (0)
    影片诠释的爱情故事会让许多白领MM鼻子为之一酸,这就是联想最新的S9/S10笔记本广告,爱,永远在线。 ...
  • 2008-08-28 -- 利用WP自带的JS库打造超酷的侧边栏 (5)
    从这篇文章开始,我们来认识下wordpress自带的JS库,下面这张图是WP自动的JS文件夹。可以看出有很多JS文件,当然包括大名鼎鼎的jquery和prototype。利用这些我们能实现很多很酷的效...
  • 2008-10-07 -- 批量更改图片尺寸的ps脚本 (1)
    很多时候我们要修改图片大小,这是个很简单的工作,但当要修改的图片很多的时候,那就变成了一件烦锁的工作了,今天给大家介绍一个用于批量更改打开的图片的尺寸的photoshop 脚本 (javascript...
  • 2008-10-29 -- 搜狐博客开放平台博客模板设计大赛 (0)
    一、大赛宗旨 本次大赛是搜狐博客开放平台为广大设计人员、设计爱好者与搜狐博客用户举办的规模最大的一次模板设计竞赛,并准备了价值十万元的精美大奖和成为搜狐博客开放平台模板设计伙伴的机会,我...
  • 2009-06-05 -- wordpress定制首页输出 (6)
    这个方法我们可以在一些CMS主题中经常看到。像wopus的首页;它在首页调用了很多分类。然后把分类的第一条和其他的标题区分出来;我们先来看下默认的主循环。 这里是循环的内容 ...

发表评论5 位网友发表了评论  

  1. wuleilei 说:

    呵呵,很好的方法~~

  2. 尚品元素 说:

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

  3. bolo 说:

    第一种方法很少人用吧?

  4. Jutoy 说:

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

  5. LAONB 说:

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

添加新的评论浏览评论»  

表情
icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 



注意:
1、本站启用了审核机制,你的留言可能稍后才会显示,请不要重复提交,谢谢。
2、留言时的头像是Gravatar提供的服务。想设置的看这里
3、评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。