网站建设中使用CSS处理表格边框样式化
责任编辑：宏鹏来源：武汉北大青鸟鲁广校区时间：01-22在以前的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: 外凸效果边框，和内凹效果相反。
每个边框类型都可以指定一种颜色，边框是绘制在背景颜色上的，列表A使用边框属性来样式化整个表格以及锚标记和单独的单元格。
<html>
<head><title>HTML Table</title></head>
<style type="text/css">
TABLE {
background: blue;
border-collapse: 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;
在这一条语句中融合了宽度、样式和颜色属性的定义，但是您也可以对这些元素进行单独定义，如下所示：
border-width: 5px;
border-style: solid;
border-color: red;
本文标题：网站建设中使用CSS处理表格边框样式化，责任编辑：宏鹏，来源：武汉北大青鸟鲁广校区栏目，于01-22发布于北大青鸟鲁广校区。在以前的web开发栏目中，我介绍了不少处理HTML表格的方法，尽管现在使用表格来布局网页的方法已经不再时髦了，但是您依然可以使用表格来显示表列数据。
热点关注
推荐网络营销技术教程
热门网络营销技术教程
预约你的精彩未来
预约将免费领取7天课程体验卡
全国百余家校区
只为您方便就学
