用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,如需转载请自行联系原作者
相关文章
|
7月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
75 0
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
103 0
|
Web App开发 前端开发 算法
css表格和表单
css表格和表单
|
1月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
63 12
|
5月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
215 0
|
4月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
6月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
6月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
57 1
|
6月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
88 1

热门文章

最新文章