`
sty2008boy
  • 浏览: 302418 次
  • 性别: Icon_minigender_1
  • 来自: 太原
社区版块
存档分类
最新评论

表格CSS引用

    博客分类:
  • CSS
阅读更多
注:除非特殊声明,本文所举各例插入的表格的cellspacing、cellpadding、border值均为0。
  例一:1px表格
  
  很多人热衷于制作1px表格,于是发明了各式各样的方法,用css做起来可就灵活的多。如果要制作一个1x1的1px表格只要简单定义一下边框值就可以了。我们首先用Dreamweaver插入一个1x1表格,宽度为50,然后在该表格table或者td中定义border:1 solid teal,所做的表格的效果如下:


  但是要制作一个非1x1的表格(如2x2)就稍微麻烦些,因为如果直接定义td样式border:1 solid teal ,则显示的效果如下:



  你会发现表格外框为1px,而里面则变成了2px了,这是由于叠加的原因。为了解决这么问题我们可以这样做:
  首先为td定义样式:border:#cc0000 solid;border-width:0 1 1 0,这样表格表现为:



  然后再为table定义样式:border:#cc0000 solid;border-width:1 0 0 1,这样就可做作成一个完整的1px表格了。


  例二:粗边框的1px表格




  此表格的内格线为1px而外边框为3px,有了例一的基础做起来就不难了,只要修改border-width值就行了。
  对table所使用的样式的代码是:border:blue solid;border-width:3 2 2 3
  对td所使用的样式的代码是:border:blue solid;border-width:0 1 1 0
  例三:虚线框表格




  做法和例一类似,border-style从solid改为dashed。
  对table所使用的样式的代码是 :border:black dashed;border-width:1 0 0 1
  对td所使用的样式的代码是:border:black dashed;border-width:0 1 1 0
  例四:点线边框表格





  注意点线(dotted)的最小象素为2。
  对table所使用的样式的代码是 :border:green dotted ;border-width:2 0 0 2
  对td所使用的样式的代码是 :border:green dotted;border-width:0 2 2 0
  例五:双线边框表格




  注意双线(double)的最小象素为3。
  对table所使用的样式的代码是 :border:teal 4 double
  对td所使用的样式的代码是 :border:teal 1 solid
  例六:outset外框表格




  对table所使用的样式的代码是 :border: 3 outset
  对td所使用的样式的代码是 :border: 1 solid
  例七:inset外框表格




  对table所使用的样式的代码是 :border: 3 inset
  对td所使用的样式的代码是 :border: 1 solid
  例八:ridge外框表格



  
  对table所使用的样式的代码是 :border:#ee0000 3 ridge
  对td所使用的样式的代码是 :border: 1 solid
例九:综合使用一



  
  这个表格的外框采用的是脊线,内单元格边框是槽线,注意表格插入时cellspacing设为1了。

  对table所使用的样式的代码是 :border:skyblue 4 ridge
  对td所使用的样式的代码是 :border: navy 1 groove
  例十:综合使用二



  
  别以为这是九个表格,其实他们是一个表格中的九个单元格,由于表格外边框为0,所以你看不到罢了。
  只需对td使用样式:border:maroon 3 double,另外别忘了把表格的cellspacing设为1哦。
  例十一:综合使用三



  
  此表格的上下左右边框采用了不同的样式,你可以根据喜好自行更改。
对table所使用的样式的代码是 :border:purple 4 ;border-style:dashed double
对td所使用的样式的代码是 :border:1 solid
  例十二:综合使用四




  
  这是一个双线边框的1px表格,和例五比较起来要显得精巧,具体做法是这样的:
  1.先做一个1x1的1px表格,并将cellspacing设为1;
  2.再做一个3x3的1px表格,将width和height均设为100%;
  3.将后做的表格插入先前做的表格中即可。
  例十三:背景边框一:




  
  利用改变cellspacing的值可以把背景做成边框,上面的表格的制作方法是:
  1.首先做一个1x1的表格,并设置好背景,将cellspace的值设为3;

  2.再做一个3x3的1px表格,width和height均设为100%;
  3.将后做的表格插入先前做的表格中即可。
  如果你采用一幅会变色的gif动画,那么表格的边框就会自动连续改变颜色。
  例十四:背景边框二



  这个表格的制作方法和前面一个类似,你肯定能研究出来!
  例十五:3D边框表格












  
  这是一个具有3D边框效果的表格,做起来有点窍门。
  我们先来学做1x1的:
  第一步:
  建立两个样式如下:
.out{border-width:1px;border-style:solid;border-color:#dddddd #777777 #777777 #dddddd}
.in{border-width:1px;border-style:solid;border-color:#777777 #dddddd #dddddd #777777;background:#ffcccc}
  第二步:
  建立一个1x1的表格,高和宽均为100,cellspacing设为1,如下所示:


  第三步:
  对整个表格(即table标签)采用out样式,而单元格(即td标签)采用in样式。现在存盘看看效果吧,是不是和下面的一样?

  
  学会了1x1的3D边框的表格的制作,要做出本例的效果就不难了,读者不妨自己摸索一下。
  小结
  前面我们通过举例讲述了一些用css美化表格边框的方法,您可以尝试不同的组合,从而做出更漂亮的表格!

分享到:
评论

相关推荐

    jQuery和CSS3实用响应式商品参数比较表格

    本项目“jQuery和CSS3实用响应式商品参数比较表格”就是针对这一需求而设计的,它允许用户在商城网站上方便地比较不同商品的参数。 jQuery库是JavaScript的一个强大工具,它简化了DOM操作、事件处理、动画制作和...

    jQuery+PureCSS可编辑表格插件

    **jQuery+PureCSS可编辑表格插件** 这款插件结合了jQuery的动态功能和PureCSS的简洁设计,为网页开发者提供了一种简单易用的可编辑表格解决方案。它允许用户直接在表格中编辑数据,提高了交互性和用户体验。下面将...

    表格样式CSS

    表格设计样式,为CSS代码,可直接引用,但未对表格大小进行设置。

    uParse修复版优化表格css等html富文本加载

    "uParse修复版优化表格css等html富文本加载"这一主题,聚焦于如何有效地处理和展示HTML富文本,特别是涉及到表格和CSS样式时的优化问题。这里我们将深入探讨JavaScript开发中的CSS相关技术,以及如何通过uParse这个...

    DIV CSS布局教程:应用ul、li实现表格形式

    - 创建一个无序列表`<ul>`,并给它一个唯一的ID,例如`id="biaoge"`,以便在CSS中引用。 - 在`<ul>`内,用`<li>`元素表示每一行的数据单元格。对于表格的表头,可以给特定的`<li>`元素添加一个类,例如`class=...

    layui引用资源整合(包括layui.js、css、font等)

    只需通过CSS类名引用,即可在页面中显示对应的图标。 在实际开发中,layui的引用方式通常是将layui.js和layui.css链接添加到HTML头部,确保在页面加载时能正确解析和应用样式及脚本。同时,需要确保font图标所在的...

    css3+lodash.js用户反馈表格步骤向导代码

    `css`目录存放所有CSS样式文件,`img`可能包含与项目相关的图像资源,`index.html`是项目的主入口文件,包含HTML结构和引用的外部资源,而`js`目录则存放JavaScript代码,包括lodash.js库和其他自定义脚本。...

    常用的css模板css

    HTML元素可以通过类名或ID引用CSS规则,实现特定样式的效果。 4. **布局技术**:在提供的资源中,可能会涵盖常见的布局模式,如固定宽度布局、流式布局、响应式布局等。固定宽度布局适用于屏幕尺寸相对固定的场景;...

    extjs4.0引用的JS和CSS

    <link rel="stylesheet" type="text/css" href="ext4.0引用js和css/ext-theme-neptune.css" /> 引用js和css/ext-all.js"> <!-- 语言包 --> 引用js和css/ext-lang-zh_CN.js"></script> <!-- 在这里编写你的...

    easyui.css+icon.css

    通过引用 `icon.css`,开发者可以轻松地在页面上添加这些图标,提高用户体验。图标库可能包括通用的操作图标,如加号(添加)、减号(删除)、刷新、保存等,以及特定组件的图标,如排序箭头、过滤器等。 在实际...

    头歌教学实践平台 Web前端开发基础 CSS-表格样式

    - 内嵌样式是在HTML元素的`style`属性中定义CSS,而外部样式表则是通过`<link>`标签引用单独的CSS文件,后者有利于代码组织和维护。 10. **实践操作** "头歌教学实践平台"提供的"CSS——表格样式"课程,通过实际...

    tablesorter实现HTML表格点击表头排序

    1. **安装与引入**:首先,你需要在项目中下载或引用`tablesorter`库。这可以通过CDN链接、npm安装或者直接下载js文件来完成。例如,你可以使用以下CDN链接引入: ```html ...

    superTables引用的js和css

    在这个压缩包"superTables"中,我们可以预见到它提供了用于创建高级表格功能的JS和CSS资源。 JavaScript是一种轻量级的解释型编程语言,主要用于增加网页的动态性和交互性。在"superTables"中,JS文件很可能包含了...

    李炎恢HTML_CSS教程.pdf

    * CSS表格与列表:表格样式、列表样式 * CSS其他样式:圆角、阴影、透明度 CSS高级 * CSS3前缀和rem:CSS3新特性、rem单位 * CSS3文本效果:文本阴影、文本描边、文本装饰 * CSS3边框图片效果:border-image、...

    利用jQuery与PureCSS实现的可编辑表格源码.zip

    在本项目中,"利用jQuery与PureCSS实现的可编辑表格源码.zip"是一个前端开发资源,它结合了两种强大的工具来创建一个交互式的、可编辑的表格。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...

    HTML与CSS前台页面设计

    3. 外部样式表:通过`<link>`标签引用单独的CSS文件,适用于多个页面共享样式,是最佳实践。 在进行前台页面设计时,理解并熟练运用HTML和CSS的语法规则、选择器、盒模型、布局技巧和响应式设计原则至关重要。此外...

    Bootstrap v3.3.5文件css

    虽然这个压缩包只包含了CSS文件,但在实际项目中,还需要引用jQuery库和Bootstrap的JS文件以启用所有的交互功能。 总的来说,Bootstrap 3.3.5的`bootstrap.min.css`是构建现代网页设计的基础,它提供了一套完整的...

    HTML+CSS常用代码

    HTML+CSS 常用代码大全 HTML(HyperText Markup Language)是一种标记语言,用来创建网页。它是网页的结构和内容的基础。HTML 由一系列的元素组成,每个元素都有其特定的语义和用途。下面是 HTML 中一些常用的标签...

    js+css制作的一款漂亮相册

    此外,压缩包中的`带倒影的图片切换.html`可能是项目的主HTML文件,其中包含HTML结构以及JavaScript和CSS的引用。`images`文件夹则包含了相册中使用的图片资源。 总结来说,这个"js+css制作的漂亮相册"结合了...

    css+html数独九宫格制作

    最后,将HTML和CSS代码分别保存为`index.html`和`styles.css`,并把它们放在同一个文件夹下,确保`index.html`引用了`styles.css`。这样,一个简单的数独九宫格网页就制作完成了。用户可以在浏览器中打开`index....

Global site tag (gtag.js) - Google Analytics