关于表格的写法

首先让我们看看一个普通的表格是如何写出来的:

<table>
  <caption>表格头</caption>
  <thead>
    <tr>
      <th>标题一</th>
      <th>标题二</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2">表尾</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>内容一</td>
      <td>内容二</td>
    </tr>
  </tbody>
</table>

这段代码的现实效果如下:

表格头
标题一 标题二
表尾
内容一 内容二

以前在定义表格的居中,边框,还有字体颜色等等的时候,要写很多标签和class在html标签里,
现在,我们通过css,只要定义一个样式类:

table.tableline{
border-collapse: collapse;
width:80%;
font-size: 12px;
star:expression(this.align=’center’);
}
table.tableline th, table.tableline td{
margin:0px;
border:1px solid #808080;
}
table.tableline th{
background-color:#06c;
color:#000000;
}
table.tableline caption{
font-size:14px;
color:#347B01;
font-weight:bold;
}

再修改一下刚才代码的第一行:<table class=”tableline”>
表格就会变成下面这个样子啦

表格头
标题一 标题二
表尾
内容一 内容二

css还是很神奇的~~~

6 条评论

  1. wwccss:

    css 里面的expression在firefox下面是不起作用的,所以对齐还需要在table标签里面写。star:expression(this.align=’center’);

  2. leeyupeng:

    呵呵,专业人士来了

  3. jday:

    有一点点懂,但还是看不明白啊,有点难度

  4. ren:

    最近看ajax,偶然发现几个php的工具,一个是orm的easy php data object,一个是模版的smarty,看代码都非常简洁。不知道你们在没在用。看上去不错。
    我最近也从后台转到前台,这段时间看了ajax后,就要看相关的css,js了。根据我现在的经验,html中尽量不要用table,忘了从哪里看来的了,这样字的网页影响效率。用div布局是我们的第一目标,用css来提供不同的模版。用到ajax后,也免内容尽量widget话,就是内容要分块。尽量不用form提交。实在不愿意为了提交一个小小的表单就要等待刷新整个页面。做前台,感觉java正不如php方便,说不定以后还真要学会来?ruby?还没有hello world!php 还有点基础。
    现实生活中没得家的,网上也没的,就在你这里暂住下。

  5. ren:

    还有关于cross browser的问题,这个要总结,不能一条两条的记,看了设计模式后,觉得adapter对付这个还真是不错。browser verdors w3c organization都不配合,这个问题真麻烦,w3c提出的standard都十分模糊,让后各个厂家实现还不一样,这个问题不知道谁负责,反正安南管不了

  6. leeyupeng:

    呵呵,从一开始还不会写php的时候就用smarty了,比较幸运:oops:
    常来坐坐:mrgreen:

留下评论