css table border-collapse 与border-spacing教程

<html>
<head>
<style type="text/css">
table.one
{
border-collapse: separate;
border-spacing: 10px
}
table.two
{
border-collapse: separate;
border-spacing: 10px 50px
}
</style>
</head>
<body>

<table class="one" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

<br />

<table class="two" border="1">
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
<tr>
<td>Glenn</td>
<td>Quagmire</td>
</tr>
</table>

</body>
</html>

Peter Griffin
Lois Griffin

Cleveland Brown
Glenn Quagmire
时间: 2024-09-30 00:21:51

css table border-collapse 与border-spacing教程的相关文章

CSS table 单行布局示例代码

table 单行布局在某系特殊的情况下还是比较实用的,下面为大家介绍下使用css如何实现,感兴趣的朋友可以参考下,希望对大家有所帮助     复制代码 代码如下: <html> <head> <mce:style type="text/css"><!-- table{border-collapse:collapse;} td{border:1px blue solid;} --></mce:style> <style t

css中border:0和border:none的区别详解

性能差异: [border:0;]把border设为"0"像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值. [border:none;]把border设为"none"即没有,浏览器解析"none"时将不作出渲染动作,即不会消耗内存值. 兼容性差异: 兼容性差异只针对浏览器IE6.IE7与标签button.input而言,在win.win7.vista

border:none与border:0使用区别_基础教程

一.border:noneborder-style的简写在chrome审查元素看到以下结果 复制代码 代码如下: element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: initial;} 在firefox中用firebug查看元素

如何掌握CSS精要,学习网页布局教程

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 CSS是不是真的很难学?其实不难,只是缺少了掌握的经验,拿着一本书硬肯,有没有收获?有!但可能成效不大,作为过来人我觉得被动学习想要记住的东西是很难的,学习它我的经验是可以先掌握精要(重要属性开始),待掌握精要自然而然这些属性远远不够满足自己的需求引起自己求知的欲望,自动延伸其他相关的属性从而自然掌握和加深对CSS的认识.这是我认为的一种方法

详解css的position:relative与display:table-cell教程

在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目上使用却产生意想不到的表现方式. 因为我在其中又使用了 position: relative; 这样一个属性.同样是一个很简单而标准的属性,我想即使放在一起,肯定也是可以正常工作的.可惜,我错了. 缘起 就这样的一个简单的样式场景, Chrome   FireFox   看着两个图不一样,很难受是吧

border:none;与border:0;的区别

核心提示:这问题在网络相信已经有不少人问到,最近再次被牵起讨论,籍此记录一下个人的理解,border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异. 这问题在网络相信已经有不少人问到,最近再次被牵起讨论,籍此记录一下个人的理解,border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异. 1.性能差异 [border:0;]把border设为"0"像素虽然在页面上看不见,但按border默认值理

border:none与border:0使用区别

 无边框用border:none还是border:0一直都是一个热议的问题,两者除了在渲染性能上面的差别以为,在标准浏览器中页面表现是没有任何差别的.下面一起认识一下它们本质的区别 一.border:none border-style的简写 在chrome审查元素看到以下结果  代码如下: element.style { border: none; border-top-style: none; border-right-style: none; border-bottom-style: non

css中的有趣的border

CSS 中的 border 属性,我想凡是了解一点 CSS 的都知道它是作用,可以在 MDN 上找到对它的详细介绍. border 简单来说,就是我们常用的边框,一个非常基础的用法,就是 border: 1px solid black;  // 等价于  border-width: 1px;  border-style: solid;  border-color: black;   下面是演示的效果: 当然还可以定义很多奇形怪状的边框类型,比如圆角(radius,可能兼容性不是很好),椭圆(其实

css控制table表格宽度的小技巧教程

对table表格宽度定义有直接table标签内使用width宽度属性定义其宽度,另外也可以通过css样式设置定义其宽度,根据需要可选择自己适用的定义宽度方法. 一.html table标签内宽度定义 我们直接在table标签内加入width宽度属性即可定义宽度如下: <table width="300"> 这样定义table宽度为300px,记住这个宽度的值不需要带html长度单位,默认以像素px为单位. 二.css定义table宽度 Css定义table宽度的css代码如