使用CSS设置表格样式
- 格式:ppt
- 大小:2.18 MB
- 文档页数:25


表格边框粗细、隐藏等设置
一、表格中单元格之间分隔线的隐藏方法
隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到
中都有rules。 它有三个参数(cols,rows,none),
当rules=cols时,表格会隐藏纵向的分隔线,这样我们就只能看到表格的行;
当rules=rows时,则 隐藏了横向的分隔线,这样我们只能看到表格的列; 而当rules=none时,纵向分隔线和横向分隔线将全部隐藏。
二、表格边框的隐藏
表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,
而不影晌单元格。 只显示上边框
只显示下边框
只显示上、下边框
只显示左边框
不显示任何边框
三、表格边框粗细代码
1、普通表格 1.
普表 通格
复制代码 2、细线表格:表格加上了漂亮的细线(利用cellspacing1像素间隙和表格与单元格背
景的不同)
1.
bgcolor="#000000" > 细表
bgcolor="#ffffff">线格
复制代码
3、能Css制细线表格:它用的是css,效果却一样。(对单元格border的定义) 1.
style="border-top: rgb(0,0,0) 1px groove; border-bottom: rgb(0,0,0) 1px groove;
border-left: rgb(0,0,0) 1px groove; border-right: rgb(0,0,0) 1px groove">细
style="border-top: rgb(0,0,0) 1px groove; border-bottom: rgb(0,0,0) 1px groove;
border-right: rgb(0,0,0) 1px groove">表
style="border-bottom: rgb(0,0,0) 1px groove; border-left: rgb(0,0,0) 1px groove;
20 个经典的 Ajax + CSS 表格,点击Word中的超链接进入下载代码
并不是所有的Web
开发者都会对美化表格数据感兴趣,今天我们收集了20
个功能强大,外观漂亮的基于Ajax + CSS 的表格效果,你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。
现在让我们来看看这些表格:(点击每个样式前面的链接即可进入下载)
#1. Tablecloth
Tablecloth 由CSS Globe 开发,是一个轻量级的、易于使用的表格,以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。
#2. Ask the CSS Guy Table
Ask the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格,例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。
#3.
A CSS styled table version 2
Veerle Duoh 为我们介绍了一种如何利用CSS 使表格更有吸引力的方法,并且在实现的过程中充分考虑了表格的可访问性。
#4. Sortable Table
Sortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。
#5. Row Locking with CSS and JavaScript
演示了如何利用Javascript 和 CSS 实现“锁定行”的效果,选中的行会一直显示高亮效果直到用户再次点击才会消失。
#6. Vertical scrolling tables
如果你有大量的数据但是没有足够大的空间来显示它,这会是一个很好的解决办法。通过CSS 固定表格的页眉和页脚,但是内容却可以滚动显示。
#7. Replicating a Tree table
利用HTML 和CSS 建立的树状表格。
#8. Collapsible tables with DOM and CSS
如何插入样式表
当读到一个样式表时,浏览器会根据它来格式化 HTML
文档。插入样式表的方法有三种:
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:
href="mystyle.css" />浏览器会从文件 mystyle.css
中读到样式声明,并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的
html 标签。样式表应该以 .css
扩展名进行保存。下面是一个样式表文件的例子:
hr {color: sienna;}p {margin-left: 20px;}body
{background-image:
url("images/back40.gif");}不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它仅在 IE 6
中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用
内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style
属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
This is a
paragraph
多重样式
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
例如,外部样式表拥有针对 h3 选择器的三个属性:
h3 { color: red; text-align: left; font-size: 8pt; }而内部样式表拥有针对 h3 选择器的两个属性:
dw将表格文字变横向的css代码
如果你想将表格文字变为横向排列,可以使用CSS的writing-mode属性和一些其他样式来实现。下面是一个示例的CSS代码:
css复制代码
table {
writing-mode: vertical-lr; /* 文字竖向排列,从上到下 */
}
td {
text-align: center; /* 居中对齐 */
padding: 10px; /* 单元格内边距 */
border: 1px solid #000; /* 单元格边框样式 */
}
通过将上述CSS代码应用于你的表格,你可以实现文字横向排列的效果。请确保将CSS代码与HTML文档中的表格相结合使用,以便正确应用样式。
需要注意的是,这只是一种基本的方式来实现横向排列文字的效果。