| 鞋的恋爱 |
 |
| 等级:职业侠客 |
| 权限:普通用户 |
| 积分:66 |
| 金钱:4501 |
| 声望:99 |
| 经验:99 |
| 发帖数:1311 |
| 注册:2006年8月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: 外凸效果边框，和内凹效果相反。 每个边框类型都可以指定一种颜色，边框是绘制在背景颜色上的，列表 <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; 在这一条语句中融合了宽度、样式和颜色属性的定义，但是您也可以对这些元素进行单独定义。
|
|
|
|
|
|
所在位置：论坛首页 -> ┈┋电脑网络技术区┋┈ -> 网页制作技术 -> 使用CSS处理表格边框样式化
资料
短消息