在以前的web开发栏目中，我介绍了不少处理HTML表格的方法，尽管现在使用表格来布局网页的方法已经不再时髦了，但是您依然可以使用表格来显示表列数据。
显示和样式化表格的方法有很多种，在这篇文章中，我将介绍使用CSS对表格边框进行样式化的方法。
链接
CSS2表格模型是基于HTML 4.01表格模型的。表格包含了一个可选的锚标记和单元格以及数据行，表格模型包含以下的元素：表格、锚、数据行、数据行组、数据列、数据列组和单元格。这篇文章将集中讲解表格中各个元素的边框处理方法。
边框
根据不同的需求，您可以对表格和单元格应用不同的边框。您可以定义整个表格的边框也可以对单独的单元格分别进行定义。CSS的边框属性可以指定边框的大小以及颜色和类型。以下的代码定义了宽度为5个像素的黑色实线边框：
TABLE
除此以外，您还可以使用相同的语法为表格中单独的单元格分别指定边框属性。您可以使用以下的属性值来定义边框类型：
l none: 指定表格没有边框，所以边框宽度为0。
l dotted: 由点线组成的表格边框。
l dashed: 由虚线组成的表格边框。
l solid: 由实线组成的表格边框。
l Double: 由双实线组成的表格边框。
l Groove: 槽线效果边框。
l ridge: 脊线效果边框，和槽线效果相反。
l inset: 内凹效果边框。
l outset: 外凸效果边框，和内凹效果相反。
每个边框类型都可以指定一种颜色，边框是绘制在背景颜色上的，列表A使用边框属性来样式化整个表格以及锚标记和单独的单元格。
<html>
<head><title>HTML Table</title></head>
<style type="text/css">
TABLE {
background: blue;
border-collapse: separate;
border-spacing:
border: 5px solid red; }
TD, TH {
background: white;
border: inset
horizontal-align: right; }
CAPTION
</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;
在这一条语句中融合了宽度、样式和颜色属性的定义，但是您也可以对这些元素进行单独定义，如下所示：
border-width: 5px;
border-style: solid;
border-color: red;
请保留地址 http://www.qqread.com/css/u311348.html
更多内容请看数据库处理专题专题，或进入讨论组讨论。
相关专题
- 数据库处理专题 (8684篇文章)
- CSS 菜单举一反三 (0次浏览)
- CSS Image Maps—图像地图 (0次浏览)
- CSS 全攻略(希望斑竹加精) (0次浏览)
- 7。1sp1风格制作之css解析 (0次浏览)
- HTML和CSS在Flash中的应用 (0次浏览)
- 通过Dreamweaver学习了解CSS (0次浏览)
- CSS实现文本渐变效果 (0次浏览)
- CSS Hack整理 (0次浏览)
- Photoshop做简单的xhtml+css网页 (0次浏览)
- 面向对象的XHTML与CSS编程 (0次浏览)
