目录

  • 1 商务网站项目策划与建设
    • 1.1 理解传统商务与电子商务
    • 1.2 商务网站项目的策划与实施
  • 2 商务网页设计
    • 2.1 商务网页视觉设计
    • 2.2 商务网页创意设计
    • 2.3 商务网页原型设计
  • 3 HTML网页制作技术
    • 3.1 网页基础知识
    • 3.2 文本设置方法
    • 3.3 图像设置方法
    • 3.4 超链接设置方法
    • 3.5 表格制作方法
    • 3.6 多媒体引用方法
    • 3.7 滚动字幕制作方法
    • 3.8 网页框架制作方法
  • 4 CSS网页样式制作技术
    • 4.1 CSS基础知识
    • 4.2 设置文字属性
    • 4.3 用CSS设置图像效果
    • 4.4 用CSS设置表格样式
    • 4.5 用CSS设置超链接伪类及伪元素
    • 4.6 采用DIV与SPAN制作网页
    • 4.7 用CSS设置元素的边框与边距
  • 5 网页图像制作
    • 5.1 准备图像素材
    • 5.2 制作网页图像
  • 6 商务网页制作实战
    • 6.1 商务网页制作步骤
    • 6.2 商务网页制作实例
  • 7 课程总复习及答疑
用CSS设置表格样式

在CSS中,可以对表格的边框、边距、单元格等进行设置,以简化表格制作编码,提高效率,美化表格。

4.4.1  设置边框样式

表格中有表边框和单元格边框(表头边框与单元格边框的性质相同,故此处省略表头边框的描述),表边框是指表格四周的四条边框,单元格边框是指每一个单元格的边框。默认状态下,这两种边框是分别显示的,而且单元格之间的边框也是相互独立的,不贴合显示。

1.设置表边框与单元格边框的线型

                                               

 

 
 

描述

 
 

none

 
 

定义无边框。none优先级最低

 
 

hidden

 
 

none相同。不过应用于表时除外,对于表,hidden用于解决边框冲突。hidden优先级最高

 
 

dotted

 
 

定义点状边框。在大多数浏览器中呈现为实线

 
 

dashed

 
 

定义虚线。在大多数浏览器中呈现为实线

 
 

solid

 
 

定义实线

 
 

double

 
 

定义双线。双线的宽度等于border-width的值

 
 

groove

 
 

定义 3D 凹槽边框。其效果取决于border-color的值

 
 

ridge

 
 

定义 3D 垄状边框。其效果取决于border-color的值

 
 

inset

 
 

定义 3D inset 边框。其效果取决于border-color的值

 
 

outset

 
 

定义 3D outset 边框。其效果取决于border-color的值

 
 

inherit

 
 

规定应该从父元素继承边框样式

 

2.设置表边框与单元格边框贴合显示

4.4.2  设置表格内容的显示格式

4.4.3  设置thead、tbody、tfoot标签

如果表格较宽、行数较多,很容易看错行。采用斑马纹显示风格,每行一种颜色,可以很好地解决这个问题。制作斑马纹表格,需要熟悉颜色搭配,才能产生较好的颜色交替效果。

4.4.4  设置斑马纹表格综合范例