当前位置:

首页 > 前端交互

细线表格的处理

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

本文引用地址: 

随机日志

  • 2009-11-30 -- 不刷新(AJAX)获取文章的内容 (24)
    相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处,不用在刷新页面就能发表评论。实时提交,实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了,很多人都作了详细的讲...
  • 2008-10-27 -- 色色却富有哲理的10句经典 (0)
    1、单位领导总结发言:我们工作搞不好的原因是:一是像寡妇睡觉,上面没人;二是像“女支女”睡觉,上面老换人;三是像和老婆睡觉,自己人老搞自己人   2、生活就象被弓虽暴:要么反抗要么就去享受;工作就...
  • 2008-10-27 -- 看着非常舒服的颜色 (1)
    点击运行,这样的颜色让人感觉很舒服. 舒服的颜色 body{ margin:20px; font-family: Verdana, Geneva, Arial, Hel...
  • 2008-10-27 -- WordPress模板常用调用函数 (1)
    虽然都是些基本的东西,但今天想要用的时候却记不了怎么多.没办法,只好百度一下.SO... 在这做下笔记,方便以后查询. WordPress基本模板文件 一套完整的WordPress模板应至少...
  • 2009-09-05 -- 新工作,新起点。 (12)
    时间过得真快,转眼来北京已经一个月了。可记忆中好像就是昨天才蹋上这片陌生的土地;一直以来,从没想过有天会离开那个熟悉的城市,到另一个完全陌生的城市。当蹋上开往北京的列车的那一刻,心里有很多很多种滋味。...

发表评论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空格'的方式将自己的评论通知另外评论者。