符合WEB标准的CSS细线表格样式
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 362
dreamweaver中制作出细线式的表格::在使用表格表现网页的数据时,我们往往希望表格的边框向Word里那样优雅地表现出细线。但是事实却是,网页设计出来的表格又粗俗又难看,粗大的边框和间距让人立

dreamweaver中制作出细线式的表格::

在使用表格表现网页的数据时,我们往往希望表格的边框向Word里那样优雅地表现出细线。但是事实却是,网页设计出来的表格又粗俗又难看,粗大的边框和间距让人立刻产生出给其瘦身的冲动。对于很有审美感的设计师来说,这种丑陋的表格是不堪忍受的,如果不能解决,那么设计师将彻夜难眠。还好,我们有了质量上乘的化妆产品——CSS,俗称“样式表”,大名“层叠样式表”,曾用名“级联样式表”,英文名“Cascading Style Sheet”。其作用是控制HTML页面的布局和外观样式,使Web文档内容结构和表现形式分离。

代码如下:

<style>
table {
      border:1px solid #000;
      border-width:1px 0 0 1px;
      margin:2px 0 2px 0;
      text-align:center;
      border-collapse:collapse; td,th {
      padding:3px;
      font-size:12px;
      border:1px solid #000;
      border-width:0 1px 1px 0;
      margin:2px 0 2px 0;
      text-align:left; th {
      text-align:center;
      font-weight:600;
      background-color:#F4F4F4; </style>
<table>
     <tr>
         <th>姓名</th>
         <th>年龄</th>
         <th>性别</th>
         <th>专业</th>
         <th>年级</th>
         <th>系别</th>
     </tr>    
     <tr>
         <td>郑春磊</td>
         <td>20</td>
         <td>男</td>
         <td>软件工程</td>
         <td>大一</td>
         <td>计算机系</td>
     </tr>
     <tr>
         <td>李肃文</td>
         <td>21</td>
         <td>男</td>
         <td>软件工程</td>
         <td>大一</td>
         <td>计算机系</td>
     </tr>
</table>

我的问题网 www.shenzhidao.com 有关于网站的东西欢迎大家一起交流!
联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2