web前端技能方法总结(css、js、jquery、html)(26)-阿里云开发者社区

开发者社区> Tobenumberone> 正文

web前端技能方法总结(css、js、jquery、html)(26)

简介: web前端技能方法总结(css、js、jquery、html)
+关注继续查看

1、表头除了常规的放在表格的上面以外也可以放在左边。只需要将表格表头元素分别放入每行来代替原先的第一行。把每个

元素放在每行的开头,那么所有的表头就在第一列了。

2、关于完全只用表格来完成页面的版面设计:在CSS出现之前,使用表格来完成版面设计是非常普遍的。坦率地说,当时没有更好的方法来做一些复杂的版面设计。不过,在今天,使用表格做版面设计却是一个糟糕的方法。如果完全只是用表格,既困难又难以维护。那种技巧已经过时了,应该学习正确的方法,也就是XHTML和CSS做版面设计。

3、要优化你的表格,有两件事情你要立刻去做:一是添加一个标题,二是添加一个摘要。

摘要就是给table标签添加summary属性。摘要不会在你的网页中显示出来。它的作用纯粹只是增加表格的可读性,起一小块文本的作用,还能使屏幕读取器能够更好地读取用户所描述的表格。

标题,默认状态下,多数浏览器将标题设置在表格上方。如果你不喜欢标题的默认位置,可以用CSS重新定位标题,有些浏览器并不完全支持重置标题的默认格式。

将标题移到表格的下部的方法是给table元素添加caption-side属性,属性值设为bottom.

4、你可以用表格指定表格式数据之间的关系,然后一般用CSS来改变表格的外观。

5、表格单元的确包含了补白和一个边框——正如你在盒模式中看到的——不过表格和盒模式在边界属性上有所不同。

单元格包含了内容、补白、边框,但是用边框间距属性来代替边界,边框间距(border-spacing)属性定义在整个表格中,也就是说,我们不能对单个的表格单元而只能对所有的单元格设置边界属性。

边框间距是相对于整个表格的,而边界只是针对于单个的元素。 IE6不支持边框间距属性。

可以在水平和垂直方向上设置不同的边框间距: border-spacing:10px 30px; 这条语句设置了10个像素的水平边框间距和30个像素的垂直边框间距。

压缩边框:除border-spacing属性之外,还有另外一种方法可以处理边框空间问题。你可以使用CSS中一个叫做border-collapse的属性来消除边框间距。使用这个属性时,浏览器将忽略设置在表格上的所有边框间距,并且将两个相邻的边框合并为一个边框。这样就将两个边框“压缩”为一个边框了。 border-collapse: collapse;

将border-spacing属性设置为0px也可以消除边框间距,不过仍存在两条线,只不过它们紧靠在一起罢了,我们得到的是双重的虚线边框。border-collapse: collapse;的方法可以得到单元格之间的单线边框。

6、实现行扩展和列扩展:在

元素中添加rowspan属性并设置行的数值可以实现多行跨越;在元素中添加colspan属性并设置列的数值可以实现多列跨越。

7、嵌套表格:将元素

8、使用CSS中的text-align和vertical-align属性可以改变表格数据的对齐方式(前者可以设置左、右或居中对齐,后者可设垂直对齐方式如设为top即为向上对齐)。使用background-color属性可以为表格添加一些颜色。背景颜色的设置可以是整个表格、一行或者单个单元格。

9、如果一个数据单元格为空,那么

元素中不放置任何内容。不管怎样,你都需要使用一个标记对维持表格的对齐方式。

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

相关文章
Day6:ECS进阶班训练营学习总结
转眼训练营就要结营了,我在这里总结了本次培训学习到的知识点,以及一些学习体会。
298 0
总结CSS3新特性(Transition篇)
CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition 后,将按一个曲线速率变化。
677 0
最全总结 JavaScript Array 方法详解--《前端那些事》
我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲染到页面当中。 二次处理的过程是 考验 `Coder` 对 `Array` 是否熟练 以及 在 何种 场景下使用哪种方法处理最优 。
71 0
CSS垂直居中总结
原文:CSS垂直居中总结   工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享。本文讨论的垂直居中仅支持IE8+   1、使用绝对定位垂直居中 生活不能等待别人来安排,要自已去争取和奋斗; 而不论其结果是喜是悲,但可以慰藉的是,你总不枉在这世界上活了一场。
1077 0
jquery 网页局部打印总结
最近开发过程中遇到了js局部打印的功能,在网上找相关的资料,最终找到了juery.jqprint-0.3.js 和jquery.PrintArea.js两种。    最初使用的是jquery.jqprint-0.3.js,是在弹窗的情况下使用,即使出现滚动条也依然能够把所有内容成功打印出来。
1128 0
好程序员web前端教程分享3种方法实现CSS隐藏滚动条并可以滚动内容
好程序员web前端教程分享3种方法实现CSS隐藏滚动条并可以滚动内容,隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。
1237 0
活动总结:阿里专家技术问答第二期,HTML5,我有话说!
1月26日推出的是第二期专家问答“HTML5,我有话说",由前端专家胡才俊(昵称:前道)来为大家解答在HTML5开发工作和学习中遇到难题,各位前端攻城狮们,请叫我雷锋!
7551 0
+关注
Tobenumberone
never say never~
42
文章
60
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载