表格合并css1005无标题,基于css样式的网页表格的美化

基于css样式的网页表格的美化

技术与方法

TECHNIQUE AND METHOD

计　算　机　应　用

ＲＡＩＬＷＡＹＣＯＭＰＵＴＥＲＡＰＰＬＩＣＡＴＩＯＮ

第１５卷第６期Ｖｏｌ．１５　　　　　Ｎｏ．６

文章编号：１００５－８４５１(２００６)０６－００５０－０２

基于ＣＳＳ样式的网页表格的美化

郑蓉　，　冯霞

摘

(杭州职业技术学院信息电子工程系，杭州　３１００１８)

要：ＣＳＳ(Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ)它是一种制作网页的新技术。与传统的ｈｔｍｌ语言相比，ＣＳＳ技

术为网页设计提供了更丰富、更美观的表现方式。结合几个实例详细介绍如何利用ＣＳＳ来美化网页表格，使

得网页增光添彩，从而能够吸引更多的浏览者。

关键词：　ＣＳＳ样式；表格；网页设计；滤镜中图分类号：ＴＰ３９３文献标识码：Ａ

Making table of webpage beautificatization based on CSS

ZHENG Rong, FENG Xia

(The Department of Information and Electron Engineering of Hangzhou Vocational and Technical College

Hangzhou 310018, China)

Abstract: CSS (Cascading Style Sheets) was a new technology of making webpage. CSS provided more abundant and beautifulways of representing for webpage design, comparing to traditional Hypertext Markup Language. It was introduced how tomake use of CSS to make the table beautiful.

Key words: Cascading Style Sheets; table; webpage design; filter

表格在网页设计中常常用于定位，是网页排版的主要手段，尤其是在大型网站的设计中，表格的作用非常突出，灵活运用表格技巧可以为制作的网页增色不少，而利用传统的ｈｔｍｌ技术很难做出漂亮的网页，本文结合“层叠样式表”ＣＳＳ(ＣａｓｃａｄｉｎｇＳｔｙｌｅ　Ｓｈｅｅｔｓ)，样式技术详细介绍几种特效表格的制作方法。

式”弹出如图１所示的对话框，参数设置亦如图１所示(当然标签ｔａｂｌｅ也可以改成ｔｄ)，点击“确定”。

１实例

１．１象素边框的表格制作图　１新建ＣＳＳ样式对话框

用过ｄｒｅａｍｗｅａｖｅｒ的读者知道，利用此软件做的表格的边框比较粗(尽管边框已经设定为１)，样第３步：第２步“确定”后将出现“ｔａｂｌｅ的ＣＳＳ子也比较粗糙，而很多网页常采用细线边框的表格样式定义”对话框，在“分类”里选择“边框”，然来美化，用ＣＳＳ样式表可以灵活的实现这一技术。后设置边框的样式、宽度和颜色(即表格的边框样如果要制作一个１ｘ１的１ｐｘ表格只要简单定义一下边式、边框宽带、边框的颜色)，具体参数如图２所示框值就可以了。具体方法如下：(当然读者也可以根据自己的喜好进行更改)。

第１步：首先用Ｄｒｅａｍｗｅａｖｅｒ插入一个１ｘ１表格，第４步：第３步“确定”后，就得到最终的效宽度为３００ｐｘ，并在属性面板里设置表格的填充、间果图(如图３所示)。距、边框值都为０。通过以上两副图的比较可以发现利用ＣＳＳ样式

第２步：然后在ＣＳＳ面板中选择“新建ＣＳＳ样做出的边框效果比较精致，而采用传统的做法做出

来的表格边框效果比较粗(尽管边框已经设定为收稿日期：２００６－０１－１７

１)。而现在许多网页为了增强页面的显示效果常采作者简介：郑蓉，助教；　冯霞，助教。