当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 制作精美圆角表格两种方法

HTML/XHTML教程
网页设计师如何应对客户无理要求
打开网页速度提升的简单而有效的方法
让IE8启动IE7兼容模式的简便代码
HTML的sub,sup标签制作电子商务网站中的价格
IE9关键字:硬件渲染,新的JS引擎,CSS,标准
让IE支持HTML5办法
HTML教程:HTML的10个表格相关标记
HTML教程:网页页面切换的各种效果
网页制作掌握的最常用的HTML标记
应该怎样把HTML结构化
XHTML基础教程:xhtml的块级标记
网页页面实现自动刷新的3种代码
网页制作教程:TD也可以溢出隐藏显示
网页设计教程:TabIndex元素
微软:IE9与HTML 5的关系
HTML设备标识符可以让用户使用网页与摄像头等硬件设备打交道
HTML5和CSS3的一些新变化
超级链接标记A的TARGET属性详解
语义化的网页:XHTML语义化标记
理论知识:PSD模板切成HTML的正确操作

HTML/XHTML教程 中的 制作精美圆角表格两种方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 32 ::
收藏到网摘: n/a

  做网页时候为了美化网页,常常把表格边框的拐角处做成圆角,这样可以避免直接使用表格直角的生硬,使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。

  方法一:用图片制作圆角表格

  这是最常用也是最通用的方法,它能很好地适应各种浏览器和不同分辨率,大部分网页都使用这种方法。

  ①先用Photoshop等作图软件绘制一个圆角矩形,再用“矩形选框工具”选取左上交的圆角部分(如图1),复制它。

  


  ②不要取消选取,直接新建一副图像,Photoshop会根据选取部分的高度、宽度自动设置新建图像的大小。张贴后,保存为WEB所用格式即可。

  ③重复步骤②,分别用“水平翻转”工具和“垂直翻转”工具,保存另外三个方向的圆角。(如图2)

  

  ⑤再已插入的两个表格中间再插入一个一行三列同宽的的表格,CellPad、CellSpace和Border属性值都为0,宽度为100%。设置第一列和第三列背景颜色为与圆角图片一致的颜色,宽度为1像素,并打开源代码察看器,删除这两列中的字符” ”。到这,一个圆角表格就做好了,您可以在第二列中添加您想要的内容。(如图3)

  


  方法二:利用VML技术

  用VML技术可以更容易地制作一个圆角表格,而且还有投影哦!

  ①修改<html>表识为<html xmlns:v>

  ②在<head>区域添加如下代码:
  <style>〈br>v:* {behavior: url(#default#VML);}〈br〉</style>

  在您要添加圆角表格的地方加入以下代码:<v:RoundRect style="position:relative;width:200;height:100px">
  <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
  <v:textbox style="font-size:12px">

  这里输入表格中的内容
  </v:textbox>
  </v:RoundRect>

  您可以在上面的代码中设置圆角表格的宽度、高度、投影颜色等。


  这样,一个有投影的圆角表格就制作好了(如图4)。

  


  这种添加圆角表格的方法虽然很方便,但是它不能很好的适应每个浏览器版本,且在设计时是以层的方式现实,不利于版面设计,所以尽量使用第一种方法。