商务网页第16课课件.ppt

1、4.4 用CSS设置表格样式l 在CSS中，可以对表格的边框、边距、单元格等进行设置，以简化表格制作编码，提高效率，美化表格。4.4.1 设置边框样式l 表格中有表边框和单元格边框（表头边框与单元格边框的性质相同，故此处省略表头边框的描述），表边框是指表格四周的四条边框，单元格边框是指每一个单元格的边框。默认状态下，这两种边框是分别显示的，而且单元格之间的边框也是相互独立的，不贴合显示。1设置表边框与单元格边框的线型l 在CSS中设置表边框与单元格边框的线型，需要使用、选择符的border属性（还可以使用border-top、border-right等属性，具体参见4.7.2小节）。以标签选择

2、符为例，设置表边框的方法如下：tableborder:边框宽度 边框颜色 边框类型l 设置单元格边框的方法如下：table tdborder:边框宽度 边框颜色 边框类型其中，边框宽度通常用像素值来表达，如2px；边框颜色用十六进制值来表示，如#003399；边框类型有实线、虚线、双线等多种类型，具体属性值如表4.9所示。表4.9 CSS中边框属性值值描述none定义无边框。none优先级最低hidden与none相同。不过应用于表时除外，对于表，hidden用于解决边框冲突。hidden优先级最高dotted定义点状边框。在大多数浏览器中呈现为实线dashed定义虚线。在大多数浏览器中呈现为

3、实线solid定义实线double定义双线。双线的宽度等于border-width的值groove定义 3D 凹槽边框。其效果取决于border-color的值ridge定义 3D 垄状边框。其效果取决于border-color的值inset定义 3D inset 边框。其效果取决于border-color的值outset定义 3D outset 边框。其效果取决于border-color的值inherit规定应该从父元素继承边框样式2设置表边框与单元格边框贴合显示l 为了美化边框效果，可将表边框与单元格边框贴合起来显示，CSS 给出了“border-collapse”属性，控制表边框与单元格

4、边框是分离显示，还是贴合显示。设置方法为表格标签选择符border-collapse:属性值;其中，border-collapse属性值为separate或collapse。separate表示边框分离显示，collapse表示边框贴合显示，默认值为separate。CSS设置表边框 table border:5px blue solid;table td border:3px green solid;.setborder border:5px#003399 solid;border-collapse:collapse;默认表格边框与单元格边框示例 单元格1 单元格2 单元格3 表格边框与单元

5、格边框贴合示例 单元格1 单元格2 单元格3 4.4.2 设置表格内容的显示格式l 我们可以通过CSS统一制定表格内容的整体显示规则，如字体、字号、文字颜色、对齐属性等，可以提高表格制作效率，美化显示效果。下面我们以标签选择符为例，介绍设置方法。如果有必要，多个选择符可以共同定义和声明，选择符之间用“,”号分隔。共同定义和声明的选择符具有相同的显示格式。如果不同的选择符有不同的显示要求，就需要分别定义和声明。table，th，td /*注意table，th与table th 的不同*/font-family:属性值;font-size:属性值;font-weight:属性值;font-styl

6、e:属性值;color:属性值;text-align:属性值 vertical-align:属性值;CSS设置表格内容显示格式table font-family:宋体;font-size:28px;font-weight:900;color:green;border:5px blue solid;text-align:center;border-collapse:collapse;table th border:3px red solid;width:150px;vertical-align:middle;table td border:3px black double;font-family

7、:楷体;font-size:22px;font-weight:700;font-style:italic;color:gray;table tr height:60px;vertical-align:bottom;控制表格内容显示格式 表头1 表头2 表头3 单元格1 单元格2 单元格3 单元格1 单元格2 单元格3 4.4.3 设置thead、tbody、tfoot标签l、标签并不是必需的，主要作用是增强表格的显示控制能力。为了控制表格的整体显示风格，可以把表格分为头、中、尾3段，用于增强对表格头段（通常是表头）的显示控制，用于增强对表格中段（通常是数据区）的显示控制，用于增强对表格尾段（通

8、常是表注）的显示控制。、标签通常用于斑马纹表格的显示控制。l 使用、进行样式设计，则只能针对它们包含的单元格起作用。中单元格边框的显示规则高于中单元格边框的显示规则高于和和CSS设置表格头段中段尾段显示格式table border:3px blue solid;border-collapse:collapse;table thead,thead th border:3px blue solid;vertical-align:middle;font-family:宋体;font-size:24px;font-weight:900;color:black;table tbody,tbody td

9、border:3px red double;text-align:center;font-family:楷体;font-size:20px;font-weight:700;font-style:italic;color:gray;table tfoot,tfoot td border:3px green solid;text-align:center;font-family:仿宋;font-size:20px;font-weight:700;font-style:normal;color:black;vertical-align:bottom;table th width:300px;heig

10、ht:30px;table td height:30px;表头1 表头2 表头3 单元格1 单元格2 单元格3 单元格1 单元格2 单元格3 单元格1 单元格2 单元格3 单元格1 单元格2 单元格3 l 练习：制作一个采用CSS设置表格的网页，写出完整的HTML及CSS代码，具体要求如下。（1）采用内部样式制作。（2）采用标签选择符定义表的样式：边框宽度为4px，边框颜色为蓝色，边框线条为双线（double），边框贴合显示。字体为“宋体”，字的大小为“18px”，表格水平居中；（3）采用标签选择符定义表头样式：表头内容水平居中、垂直居中。（4）采用单元格选择符定义单元格样式：字体为“楷体”，内容水平居中、垂直靠下对齐。（5）制作主文档。表格的内容如下。