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

时间:2008-10-06 10:51:54  来源:第二电脑网上收集  作者:

  第二电脑网导读:ormal">在以前的web开发栏目中,我介绍了不少处理HTML表格的方法,尽管现在使用表格来布局网页的方法已...
  正文:

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

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

链接 

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

边框 

根据不同的需求,您可以对表格和单元格应用不同的边框。您可以定义整个表格的边框也可以对单独的单元格分别进行定义。CSS的边框属性可以指定边框的大小以及颜色和类型。以下的代码定义了宽度为5个像素的黑色实线边框: 

TABLE { 5px solid black; } 

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

l none: 指定表格没有边框,所以边框宽度为0

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

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

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

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

l Groove: 槽线效果边框。

l ridge: 脊线效果边框,和槽线效果相反。

l inset: 内凹效果边框。

l outset: 外凸效果边框,和内凹效果相反。 

每个边框类型都可以指定一种颜色,边框是绘制在背景颜色上的,列表

<html>

<head><title>HTML Table</title></head>

<style type="text/css">

TABLE {

background: blue;

border-collaphotoshop/ target=_blank class=infotextkey>pse: separate;

border-spacing: 10pt;

border: 5px solid red; }

TD, TH {

background: white;

border: inset 5pt;

horizontal-align: right; }

CAPTION { border: ridge 5pt blue; }

</style><body>

<table summary="TechRepublic.com - Tables and CSS">

<caption>First Quarter Sales</caption>

<thead><tr>

<thabbr="salesperson" scope="col">Person</th>

<thabbr="sales" scope="col">Sales</th>

</tr></thead>

<tbody><tr>

<td>Mr. Smith</td>

<td>600.00</td>

</tr><tr>

<td>Mr. Jones</td>

<td>0000.00</td>

</tr><tr>

<td>Ms. Williams</td>

<td>0000.00</td>

</tr></tbody>

<tfoot><tr>

<td colspan="2">Let's sale, sale, sale!</td>

</tr></tfoot></table></body></html>

列表A 

这个例子展示了很多可供使用的表格边框的选项,您可以使用您熟悉的度量单位(像素、磅,行长单位等)。设定边框的尺寸,您可以使用十六进制数值或颜色名称来指定边框颜色。以下的例子演示了定义边框的方法。 

border: 5px solid red; 

在这一条语句中融合了宽度、样式和颜色属性的定义,但是您也可以对这些元素进行单独定义,如下所示: 

"使用CSS处理表格边框样式化"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/2093.html


关键字:

关于《使用CSS处理表格边框样式化》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td