css表格边框设置

竭诚为您提供优质文档/双击可除

css表格边框设置

篇一：三、使用css处理表格边框样式化

使用css处理表格边框样式化

在以前的web开发栏目中，我介绍了不少处理html表格的方法，尽管现在使用表格来布局网页的方法已经不再时髦了，但是您依然可以使用表格来显示表列数据。

显示和样式化表格的方法有很多种，在这篇文章中，我将介绍使用css对表格边框进行样式化的方法。

链接

css2表格模型是基于html4.01表格模型的。表格包含了一个可选的锚标记和单元格以及数据行，表格模型包含以下的元素：表格、锚、数据行、数据行组、数据列、数据列组和单元格。这篇文章将集中讲解表格中各个元素的边框处理方法。

边框

根据不同的需求，您可以对表格和单元格应用不同的边

框。您可以定义整个表格的边框也可以对单独的单元格分别进行定义。css的边框属性可以指定边框的大小以及颜色和类型。以下的代码定义了宽度为5个像素的黑色实线边框：table{5pxsolidblack;}

除此以外，您还可以使用相同的语法为表格中单独的单元格分别指定边框属性。您可以使用以下的属性值来定义边框类型：

lnone:指定表格没有边框，所以边框宽度为0。

ldotted:由点线组成的表格边框。

ldashed:由虚线组成的表格边框。

lsolid:由实线组成的表格边框。

ldouble:由双实线组成的表格边框。

lgroove:槽线效果边框。

lridge:脊线效果边框，和槽线效果相反。

linset:内凹效果边框。

loutset:外凸效果边框，和内凹效果相反。

篇二：网站制作表格边框css样式

有关表格边框的css语法

具体内容包括：上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。

1.上边框宽度

语法:border-top-width:

允许值:thin|medium|thick|

初始值:medium

2.右边框宽度

语法:border-right-width:

允许值:thin|medium|thick|

3.下边框宽度

语法:border-bottom-width:

允许值:thin|medium|thick|

初始值:medium

4.左边框宽度

语法:border-left-width:

允许值:thin|medium|thick|

5.边框宽度

语法:border-width:

允许值:[thin|medium|thick|]{1,4}

6.边框颜色

语法:border-color:

允许值:{1,4}

边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。

如果两个或三个值给出了，省略了的值与对边相等。也可以使用略写的边框属性。

7.边框样式

语法:border-style:

允许

值:[none|dotted|dashed|solid|double|groove|ridge|in set|outset]{1,4}

初始值:none

none：无样式；

dotted：点线；

dashed：虚线；

solid：实线；

double：双线；

groove：槽线；

ridge：脊线；

inset：内凹；

outset：外凸。

8.上边框

语法:border-top:

允许值:||||

9.右边框

语法:border-right:

允许值:||||

10.下边框

语法:border-bottom:

允许值:||||

11.左边框

语法:border-left:

允许值:||||

12.边框

语法:border:

边框声明的例子包括：

h2{border:groove3em}

a:link{border:solidblue}

a:visited{border:thindotted#800080}

a:active{border:thickdoublered}

边框属性只能设置四种边框；只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。

13.宽度

语法:width:

允许值:||auto