[组图]做动易模板时我的圆角表格的做法
作者：佚名
来源：动易论坛
点击数： 次
发布时间：2005年12月27日
大家都知道现在的网页出现的圆角表格越来越多，特别是韩国风格，基本看的到圆角表格；
当然我这里不赞同大家做韩国风格，我新风格没有圆角表格（http;//)，也不是圆角表格就是韩国风格；不说这么多了。
下面是我在网上收集的圆角表格做法；
1、使用程序制作圆角表格
| 〈html xmlns:v〉 〈style〉 v:*{behavior:url(#default#VML)} 〈/style〉 〈body〉 〈v:RoundRect style="position:relative;width:150;height:240px"〉 〈v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/〉 〈v:TextBox style="font-size:10.2pt;"〉VML〈/v:TextBox〉 〈/v:RoundRect〉 〈/body〉 〈/html〉 |
他在执行前是代码，但是执行以后，把代码转换成了图片，其最终效果其实是图片。
这种方法的兼容性能不怎么好，在动易里面用不上，而且又复杂；
2、使用障眼法
| 〈center〉 〈table cellpadding=0 cellspacing=0 border=0 width=282 align=center〉 〈tr height=1〉 〈td rowspan=4 width=1〉〈/td〉 〈td rowspan=3 width=1〉〈/td〉 〈td rowspan=2 width=1〉〈/td〉 〈td width=2〉〈/td〉 〈td bgcolor=#43B5C9〉〈/td〉 〈td width=2〉〈/td〉 〈td rowspan=2 width=1〉〈/td〉 〈td rowspan=3 width=1〉〈/td〉 〈td rowspan=4 width=1〉〈/td〉 〈/tr〉 〈tr height=1〉 〈td bgcolor=#43B5C9〉〈/td〉 〈td bgcolor=#43B5C9〉〈/td〉 〈td bgcolor=#43B5C9〉〈/td〉 〈/tr〉 〈tr height=1〉 〈td bgcolor=#43B5C9〉〈/td〉 〈td colspan=3 bgcolor=#43B5C9〉〈/td〉 〈td bgcolor=#43B5C9〉〈/td〉 〈/tr〉 〈tr height=2〉 〈td bgcolor=#43B5C9〉〈/td〉 〈td colspan=5 bgcolor=#43B5C9〉〈/td〉 〈td bgcolor=#43B5C9〉〈/td〉 〈/tr〉 〈/table〉 〈table cellpadding=0 cellspacing=0 border=0 width=282 height=200 align=center bgcolor=#43B5C9〉 〈tr〉〈td〉〈/td〉〈/tr〉 〈/table〉 |
这个方法已经严重的违背了标准，并且代码复杂，在远处看类似一个园角表格，其实仅仅是使用表格堆积而成:
很多人用这方法，不赞成这方法；
3.图片模拟园角表格
| 〈?xml version="1.0" encoding="iso-8859-1"?〉 〈!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""〉 〈html xmlns="" xml:lang="en" lang="en"〉 〈head〉 〈title〉Flexible box with custom corners and borders | Lab | 456 Berea Street 〈/title〉 〈style type="text/css" media="screen,print"〉 html,body { margin:0; padding:0; color:#000; background:#fff; } body { padding:10px; font:76%/135% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; } /* CSS for the box starts here */ .box { padding:0 12px 0 0; background:#fff url(/pe2005/UploadFiles_8243/200606/20060628151123420.gif) 100% 0 repeat-y; } .bi { padding:0 0 0 12px; background:#fff url(/pe2005/UploadFiles_8243/200606/20060628151123420.gif) 0 0 repeat-y; } .bt { height:17px; margin:0 -12px; background:url(/pe2005/UploadFiles_8243/200606/20060628151133443.gif) 100% 0 no-repeat; } .bt div { width:18px; height:17px; background:url(/pe2005/UploadFiles_8243/200606/20060628151133443.gif) 0 0 no-repeat; } .bb { height:17px; margin:0 -12px; background:url(/pe2005/UploadFiles_8243/200606/20060628151133443.gif) 100% 100% no-repeat; } .bb div { width:18px; height:17px; background:url(/pe2005/UploadFiles_8243/200606/20060628151133443.gif) 0 100% no-repeat; } .box h1 { margin:0; padding:0.3em 10px; background:#efece6; font:bold 1.2em/1 Arial, Helvetica, sans-serif; } .box p, .box ul { margin:0; padding:4px 10px; background:#fff; } .box li { margin:0 0 0 2em; padding:0; } 〈/style〉 〈/head〉 〈body〉 〈div class="box"〉 〈div class="bi"〉 〈div class="bt"〉 〈div〉 〈/div〉 〈/div〉 〈h1〉Flexible box with custom corners and borders〈/h1〉 〈p〉This is a demo of a flexible box with custom corners and custom borders. The box will expand to contain any amount of content vertically, will handle any text size, and can become very wide before the horizontal borders start breaking up. How wide depends on the width of one of the background images.〈/p〉 〈p〉Two images are used. 〈a href="box.gif"〉〈code〉box.gif〈/code〉〈/a〉 is a complete box. For the sake of this demo I’ve made it 1600 pixels wide. It is used for the corners and the horizontal borders. The other image, 〈a href="borders.gif"〉〈code〉borders.gif〈/code〉〈/a〉, contains the vertical borders. Why use a single, large image for the corners instead of several smaller ones? There are several reasons:〈/p〉 〈ul〉 〈li〉Splitting the image into a bunch (six in this case – one for each corner plus the top and bottom borders) of smaller images may actually increase the total file size, depending on the look of the corners and borders.〈/li〉 〈li〉To minimize the number of HTTP requests sent to the server.〈/li〉 〈li〉Convenience. When changing the look of the borders and corners, replacing two files is faster than replacing eight files.〈/li〉 〈/ul〉 〈p〉Some extra markup is needed to put the corners and borders in place. A bit annoying, yes, but this extra, non-semantic XHTML is quite minimal, and won’t get in the way if CSS is off, so I think I can live with it. It is possible to get rid of some more markup by using the 〈code〉:before〈/code〉 and 〈code〉:after〈/code〉 pseudo-elements, but since Internet Explorer doesn’t support them I’ll leave the extra markup in there.〈/p〉 〈p〉The main content area of this box can be filled with any elements you like, as long as their background colour is set to white (or whatever colour the inside of your box has), and their margins are zeroed. If the content is transparent the left border will be doubled because the image used to create it also contains the right border. You can avoid the need for that by splitting the image in two, or adding an extra 〈code〉div〈/code〉 to put all your content in.〈/p〉 〈div class="bb"〉 〈div〉 〈/div〉 〈/div〉 〈/div〉 〈/div〉 〈/body〉 〈/html〉 |
现在使用最普遍的,是使用背景图片，并且伸缩；但我不赞成，因为背景图片太大；
4.flash制作园角表格
适合小型网页的制作，此法伸缩性和兼容性都不错，并且可以作出图片不能达到的效果，唯一的缺点就是，flash的方法是网页复杂许多；我不赞成，因为flash加了一大把代码；
5.字符充当园角表格
| 〈table border="0" cellpadding="0" cellspacing="0"〉 〈tr 〉 〈td 〉╭〈/td〉 〈td 〉──────────〈/td〉 〈td 〉╮〈/td〉 〈/tr〉 〈/table〉 |
这种方法绝，但太死板；
6、滥竽充数
| 〈fieldset〉 content 〈/fieldset〉 |
win2k & win2k-的操作系统看不出来此效果；
7、CSS3的方法
这可能是大家期待css3得最主要原应，现在Css3还没有退出，如果一旦推出，这估计是最好的圆角表格制作方法。
下面是我做动易模板的圆角表格方法；（在CSS3还没出来之前，不知大家有没有更好的）
1、线框表格
| 〈!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""〉 〈html xmlns=""〉 〈head〉 〈meta http-equiv="Content-Type" content="text/html; charset=gb2312" /〉 〈title〉无标题文档〈/title〉 〈style type="text/css"〉 .FlipH{Filter:FlipH;} .FlipV{Filter:FlipV;} .FlipVH{filter:fliph()flipv()} .top{border-top:1px solid #000000;} .main{ border-left:1px solid #000000; border-right:1px solid #000000;} .bottom{border-bottom:1px solid #000000;} 〈/style〉 〈/head〉 〈body〉 〈table width="200" border="0" cellspacing="0" cellpadding="0"〉 〈tr valign="top"〉 〈td align="left" width="20" height="20"〉〈img src="a.gif" width="20" height="20" /〉〈/td〉 〈td class="top"〉 〈/td〉 〈td align="right" width="20" height="20" class="FlipH"〉〈img src="a.gif" width="20" height="20" /〉〈/td〉 〈/tr〉 〈tr〉 〈td height="200" colspan="3" valign="top" class="main"〉 〈/td〉 〈/tr〉 〈tr valign="bottom"〉 〈td align="left" width="20" height="20" class="FlipV"〉〈img src="a.gif" width="20" height="20" /〉〈/td〉 〈td class="bottom"〉 〈/td〉 〈td align="right" width="20" height="20" class="FlipVH"〉〈img src="a.gif" width="20" height="20" /〉〈/td〉 〈/tr〉 〈/table〉 〈/body〉 〈/html〉 |
2、表格背景圆角表格
| 〈!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""〉 〈html xmlns=""〉 〈head〉 〈meta http-equiv="Content-Type" content="text/html; charset=gb2312" /〉 〈title〉无标题文档〈/title〉 〈style type="text/css"〉 .FlipH{Filter:FlipH;} .FlipV{Filter:FlipV;} .FlipVH{filter:fliph()flipv()} .bg{ background:#990000} 〈/style〉 〈/head〉 〈body〉 〈table width="200" border="0" cellpadding="0" cellspacing="0" class="bg"〉 〈tr valign="top"〉 〈td align="left" width="20" height="20"〉〈img src="1.gif" width="20" height="20" /〉〈/td〉 〈td 〉 〈/td〉 〈td align="right" width="20" height="20" class="FlipH"〉〈img src="1.gif" width="20" height="20" /〉〈/td〉 〈/tr〉 〈tr〉 〈td height="200" colspan="3" 〉 〈/td〉 〈/tr〉 〈tr valign="bottom"〉 〈td align="left" width="20" height="20" class="FlipV"〉〈img src="1.gif" width="20" height="20" /〉〈/td〉 〈td 〉 〈/td〉 〈td align="right" width="20" height="20" class="FlipVH"〉〈img src="1.gif" width="20" height="20" /〉〈/td〉 〈/tr〉 〈/table〉 〈/body〉 〈/html〉 |
1.gif图片下载（白色的）：
