CSS去除表格的默认间距并且制作1px的细线表

css

现在在所谓“div+css”的风气下,很多人放弃了表格,其实应该让每个标签物尽其用,在表现数据的地方,我们还是应该使用table。但是,我们在建立table的时候,会发现它会具有一些默认的样式,比如单元格td之间会有间距,所以我们通常开头是这样写的:

<table border="0" cellspacing="0" cellpadding="0">

在页面内,通过cellspacing="0"将这个间距消除,合并边框。现在,我们要一个干净的表格table。

<table class="dir">
<caption>如何通过CSS去除表格默认样式的间距</caption>
 <tr>
   <th>test</th>
   <th>test</th>
   <th>test</th>
 </tr>
 <tr>
   <td>test</td>
   <td>test</td>
   <td>test</td>
 </tr>
</table>

我们只要给这个table一个border-collapse:collapse的样式,就可以达到这个效果了。

.dir{ width:100%; border-left:#C8B9AE solid 1px;border-top:#C8B9AE solid 1px;border-collapse:collapse;}
.dir td{width:25%;border-right:#C8B9AE solid 1px;border-bottom:#C8B9AE solid 1px;background-color: #D7D1CB;padding:10px 10px 6px;vertical-align: top;}

这样,我们达到了所需要的效果,并且,上面的css样式还把表格table定义成了1px的细线表格。

在没有对table进行内部样式定义,而通过样式表,成功的去除td默认的间距,以及定义为1象素的细线表格。真正做到了结构与表现的分离。

时间: 2024-10-30 01:52:42

CSS去除表格的默认间距并且制作1px的细线表的相关文章

CSS控制表格——制作日历

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

使用CSS处理表格边框样式化

css 在以前的web开发栏目中,我介绍了不少处理HTML表格的方法,尽管现在使用表格来布局网页的方法已经不再时髦了,但是您依然可以使用表格来显示表列数据. 显示和样式化表格的方法有很多种,在这篇文章中,我将介绍使用CSS对表格边框进行样式化的方法. 链接 CSS2表格模型是基于HTML 4.01表格模型的.表格包含了一个可选的锚标记和单元格以及数据行,表格模型包含以下的元素:表格.锚.数据行.数据行组.数据列.数据列组和单元格.这篇文章将集中讲解表格中各个元素的边框处理方法. 边框 根据不同的

20 个精美的Ajax + CSS 的表格效果

20 个功能强大,外观漂亮的基于Ajax + CSS 的表格效果,你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据.现在让我们来看看这些表格: #1. TableclothTablecloth 由CSS Globe 开发,是一个轻量级的.易于使用的表格,以友好的方式将样式和行为添加到你当前的HTML 表格元素当中. #2. Ask the CSS Guy TableAsk the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格,例如在单

DIV+CSS模拟表格对角线

首先声明:这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见的作法是用图片的方式来处理,还有就是用vml来画对角线,能不能用html+css方式来实现呢?答案是肯定的,下面我们来摸拟一个表格对角线.其原理:用边框线来摸拟斜线,我们知道,如果将一个DIV的边框线设置得足够宽并定义了不同的颜色时,其相邻的两条边框线交界处就是斜线.知道了这个原理,我们就可以用bor

用CSS设置表格边框的语法详解

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

使用CSS改变表格边框样式

css 用CSS改变表格边框样式,很实用的一种方法. 制作方法: 将下面的代码复制到<body>~</body>里,此为隐藏下边框 <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-bottom-width: 0" bordercolor="#111111&

用CSS实现表格背景颜色渐变效果

css|渐变 怎么样用CSS实现表格背景颜色的渐变效果呢,请看下面的例子: <style>td{text-align:center;color:white;font-family:宋体;font-size:14px;}table{table-layout:fixed;border:1 dashed blue;width:567;height:234;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFF0000

CSS有关表格边框的语法汇总

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

修饰之美:CSS在表格边框上的美学应用

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