用CSS制作细线表格-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

用CSS制作细线表格

简介:
用HTML做表格简直太轻松了,看一遍例题就会了,做细线表格也不难,用DW顶多修改几个值就可以了,但是总是用鼠标点来点去,不免
会想:有满意用一行代码就解决这个问题呢?于是问老师,答案是肯定有的,就是用CSS可以完成这个作业
那CSS是什么呢?CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
我也是刚刚学习CSS,对于CSS的语法格式、选择器的类别,以及样式分类不做赘述,只把语法贴出来与新手们共享,以三行三列为例:
<html>
 <head>
  <title>CSS制作细线表格</title>
   <style>
      table,td{border:#0000FF; border-collapse:collapse}
   </style>
  </head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
   
  </tr>
  </table>
</body>
</html>
细线表格做完了,还有个例题也拿出来跟大家分享,就是用CSS做虚线表格,还是以三行三列为例,我只把CSS样式写出来,如果建表,我就不多说了,怕说多了,被仍板砖
<style>
table,td{border:#0000FF dotted 1px;
border-collapse:collapse}
</style>
border-collapse:collapse写不写看要求,加上后,虚线表格会看起来更直观一些。



本文转自 小孙村长 51CTO博客,原文链接:http://blog.51cto.com/xiaosuncunzhang/143395,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章