198彩票官网

    欢迎访问北大青鸟鲁广校区~

  1. 加入收藏
  2. 设为主页
  3. 学校简介

三分钟了解北大青鸟

×

网站建设中使用CSS处理表格边框样式化

责任编辑:北大青鸟鲁广校区来源:北大青鸟鲁广校区网络营销技术教程发布时间:2013-01-22 09:04
导读:在以前的web开发栏目中,我介绍了不少处理HTML表格的方法,尽管现在使用表格来布局网页的方法已经不再时髦了,但是您依然可以使用表格来显示表列数据。

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

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

  链接

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

  边框

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

  TABLE { 5px solid black; }

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

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

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

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

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

198彩票官网   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>

198彩票官网   <td>600。00</td>

  </tr><tr>

  <td>Mr. Jones</td>

  <td>0000。00</td>

  </tr><tr>

198彩票官网   <td>Ms. Williams</td>

  <td>0000.00</td>

  </tr></tbody>

  <tfoot><tr>

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

198彩票官网   </tr></tfoot></table></body></html>

  列表A

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

  border: 5px solid red;

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

  border-width: 5px;

198彩票官网   border-style: solid;

  border-color: red;

本文标题:网站建设中使用CSS处理表格边框样式化,责任编辑:北大青鸟鲁广校区,来源:武汉宏鹏,于2013年01月22日09时04分发布于北大青鸟鲁广校区。武汉北大青鸟宏鹏鲁广校区,是北大青鸟武汉电脑学校,专业IT计算机培训,拥有软件/网络/安卓/Web前端/Java课程.北大青鸟地址:光谷广场鲁巷数码港.电话:027-87807717

专业老师指导

赵老师

从事IT教育培训十年有余,致力于帮助广大学子找到适合自己的专业。

培训咨询客服

刘老师

IT培训专业客服,用自己的真诚解决了无数学子的困惑。

本文地址:
文章标题:
×
在线咨询更多问题

如您有任何疑问
在线咨询随时为您解答或拨打咨询热线:17740513250

×
  • 姓 名*
  • 手 机*
  • QQ号/微信号
  • 所报学科 *
  • 其他备注
  • 198彩票官网温馨提示:请保持手机畅通,咨询老师将为您提供专属的一对一报名服务。

必中彩票充值 伯乐彩票充值 内蒙古快3走势图 159彩票 内蒙古快3 内蒙古快3 奔驰彩票充值 博悦彩票平台 博悦彩票平台 118彩票