商务网页第16课.pptVIP

4.4 用CSS设置表格样式 在CSS中，可以对表格的边框、边距、单元格等进行设置，以简化表格制作编码，提高效率，美化表格。 4.4.1 设置边框样式 表格中有表边框和单元格边框（表头边框与单元格边框的性质相同，故此处省略表头边框的描述），表边框是指表格四周的四条边框，单元格边框是指每一个单元格的边框。默认状态下，这两种边框是分别显示的，而且单元格之间的边框也是相互独立的，不贴合显示。 1．设置表边框与单元格边框的线型 在CSS中设置表边框与单元格边框的线型，需要使用table、th、td选择符的border属性（还可以使用border-top、border-right等属性，具体参见4.7.2小节）。以标签选择符为例，设置表边框的方法如下： table｛border:边框宽度 边框颜色 边框类型｝ 设置单元格边框的方法如下： table td｛border:边框宽度 边框颜色 边框类型｝ 其中，边框宽度通常用像素值来表达，如2px；边框颜色用十六进制值来表示，如#003399；边框类型有实线、虚线、双线等多种类型，具体属性值如表4.9所示。 表4.9 CSS中边框属性值 值 描述 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．设置表边框与单元格边框贴合显示 为了美化边框效果，可将表边框与单元格边框贴合起来显示，CSS 给出了“border-collapse” 属性，控制表边框与单元格边框是分离显示，还是贴合显示。设置方法为 表格标签选择符｛border-collapse:属性值;｝ 其中，border-collapse属性值为separate或collapse。separate表示边框分离显示，collapse表示边框贴合显示，默认值为separate。 html head titleCSS设置表边框/title style type=text/css table{ border:5px blue solid; } table td{ border:3px green solid; } .setborder{ border:5px #003399 solid; border-collapse: collapse; } /style /head body h3 align=center默认表格边框与单元格边框示例/h3 table tr td单元格1/td td单元格2/td td单元格3/td /tr /table h3 align=center表格边框与单元格边框贴合示例/h3 table class=setborder tr td单元格1/td td单元格2/td td单元格3/td /tr /table /body /html 4.4.2 设置表格内容的显示格式 我们可以通过CSS统一制定表格内容的整体显示规则，如字体、字号、文字颜色、对齐属性等，可以提高表格制作效率，美化显示效果。下面我们以标签选择符为例，介绍设置方法。 如果有必要，多个选择符可以共同定义和声明，选择符之间用“,”号分隔。共同定义和声明的选择符具有相同的显示格式。如果不同的选择符有不同的显示要求，就需要分别定义和声明。 table，th，td /*注意table，th与table th 的不同*/ ｛ font-family:属性值; font-size:属性值; font-weight:属性值; font-style:属性值; color:属性值; text-align:属性值