css控制表格细边框样式

表格边框的粗细在css中可以轻松实现,不会的朋友可以参考下文

 

 

复制代码
代码如下:

table{border-collapse:collapse;}
td{background:#F2F2F2;border:solid 1px #CCCCCC;width:100px;height:22px;}

时间: 2025-01-29 10:45:08

css控制表格细边框样式的相关文章

CSS控制Table内外边框、颜色、大小示例

在默认的情况下,我们的CSS将Table的边框清除掉了,下面与大家分享下CSS控制Table内外边框.颜色.大小的样式,想学习的朋友可以参考下   其实按照常理来说,现在的网站应该早已经抛弃什么表格了,现在肯定是DIV+CSS当道嘛!不过客户的网站在添加内容的时候始终不满意那些边框效果:要么没有,要么很粗.看得出来,这位客户是位完美主义者. 在默认的情况下,我们的CSS将Table的边框清除掉了,是没有的,看到的效果是这样的. 无边框Table 为了给,表格加一个边框,我在CSS里面写了这样一句

CSS控制表格——制作日历

表格是网页上最常见的元素,除了用它来显示数据,还常被用来排版.这一次我们就来学习如何用CSS控制表格. 一.表格中的标记 表格(<table>标记)在最初HTML设计时,仅仅是用来存放各种数据的. 下图是一个没有使用任何CSS修饰的表格: 二.表格的颜色 表格的颜色设置与文字颜色设置完全一样,通过color属性设置表格中文字的颜色,通过background属性设置表格的背景颜色. 三.表格的边框 border属性是用来设置表格边框的粗细的,当设置其值为0时,表明表格没有边框. borderco

HTML表格内部边框样式属性RULES

  通过RULES可以控制表格内部边框的样式. 基本语法 <TABLEreles="value"> 语法解释 value的取值如下表所示: 表格的内部边框样式 属性值描述 All显示所有的内部边框 Cols仅显示行边框 Groups显示介于行列间的边框 None不显示内部边框 Rows仅显示列边框 文件范例:10-13.htm 设定表格的内部边框样式. 01<!----------------------------------> 02<!--文件范例:1

怎样用css美化表格的边框

我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | medium | thi

Dreamweaver中制作表格细边框的方式方法

Dreamweaver虽然为用户提供了定义表格边框的属性Border,但是很多用户不喜欢用它,因为感觉它的样子很粗糙,达不到我们预期的效果.小编应广大考生的需要,特为参加考试的考生策划了"Dreamweaver中制作表格细边框"专题等有关资料,供考生参考! 制作表格细边框 Dreamweaver虽然为用户提供了定义表格边框的属性Border,但是很多用户不喜欢用它,因为感觉它的样子很粗糙,达不到我们预期的效果.我们可以利用Dreamweaver的另外一个表格的属性CellSpace(单

关于CSS控制表格文字样式的研究

即使在DIV满天飞的今天,Table在网页的布局中还是少不了的,因为当需要输出数据时,Table布局远远比DIV布局有优势,而且同样的我们可以通过CSS来控制表格样式.要知道WEB标准并非是通篇的DIV+CSS,而是倡导采用更合理的语义标签来进行布局. 文字的对齐方式一直是排版的重中之重,特别是对于数据显示来说,如何才能让众多的数据的可读性更强可识别性更高呢? 先来看表格一的文字对齐,这无疑是最失败的对齐方式.表格标题<th />标签内容默认是居中对齐的,可是当把<td />标签的

css 入门教程:css控制input与bottn样式

哈哈今天我们来看看,css 入门教程:css控制文本输入框与按钮的css样式,好了我们先来看看效果图. 现在看到了我的文本输入框是不是淡色的背景与边框哦.现在来看看我们下面是怎么实现的吧.  <p align="center"><input name="" type="submit" class="btn" value="提交"></p>     <p align=

利用CSS控制表格的交替颜色

css|控制 <style type="text/css"><!--tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}--></style></HEAD><table><tr><td>第1行</td><td>第1行</td><

css控制表格边框:css 控制边框

以下内容为程序代码  <style> h3 {color: #cc6600} table.pad {padding: 5mm; background-color: #ccefcc} p.width5 {border-width: 1px} p.colorred {border-width: 2px; border-color: red} p.inset {border-width: 5px; border-color: red; border-style: inset} p.outset {b