当前位置: 代码迷 >> Web前端 >> table画斜线、直线、圆、矩形、圆角矩形、圆弧、多角形、曲线等
  详细解决方案

table画斜线、直线、圆、矩形、圆角矩形、圆弧、多角形、曲线等

热度:456   发布时间:2012-10-09 10:21:45.0
table画斜线、直线、圆、矩形、圆角矩形、圆弧、多边形、曲线等

<html?? xmlns:v>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
v\:*{behavior:url(#default#VML);}??
body,td,th {
font-size: 10pt;
}
-->
</style>
</head>

<body>


<div align="center" style="font-size:30px"><strong>模拟投资试算比较分析</strong>
</div>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC">

<tr>
??? <td colspan="4" bgcolor="#B2CDFF"><p><strong>试算过程说明&#13;</strong></p>
????? <p>※ 基金的历史净值水平是包含了分红再投资的收益;&#13;</p>
????? <p>※ 如果选择日期为非工作日,则选取下一工作日的净值进行测算;&#13;</p>
????? <p>※ 投资净收益=投资总收益-投资总成本&#13;</p>
????? <p>※ 投资回报率=投资净收益/投资总成本;&#13;</p>
????? <p>※ 年化投资回报率是按照复利方式计算的。&#13;</p></td>
</tr>
<tr>
??? <td colspan="4" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
??? <td height="12" colspan="4" bgcolor="#4F81BD"><strong style="color:#FFFFFF">投资基金:博时价值增长基金(前端:050001)</strong></td>
</tr>
<tr>
??? <td height="5" colspan="4" bgcolor="#95B3D7"><strong style="color:#FFFFFF">投资时间段:2007年1月1日 至 2008年12月23日</strong></td>
</tr>
<tr>
??? <td height="0" bgcolor="#FFFFFF"><div align="right">投资方式</div><div>收益情况</div>
????? <v:group?? style="width:100%; height:32px; position:absolute; top: 309px;"?? coordsize="100,100">??
???????? <v:line?? strokecolor="black"?? from="0,0"?? to="100,100"></v:line>??
?????? </v:group>??

?? </td>
??? <td bgcolor="#FFFFFF">一次性投资</td>
??? <td bgcolor="#FFFFFF">定期定额投资</td>
??? <td height="-2" bgcolor="#FFFFFF">定期不定额投资</td>
</tr>
<tr>
??? <td height="1" bgcolor="#FFFFFF">&nbsp;</td>
??? <td bgcolor="#FFFFFF">&nbsp;</td>
??? <td bgcolor="#FFFFFF">&nbsp;</td>
??? <td height="-1" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
??? <td height="3" bgcolor="#FFFFFF">&nbsp;</td>
??? <td bgcolor="#FFFFFF">&nbsp;</td>
??? <td bgcolor="#FFFFFF">&nbsp;</td>
??? <td height="-1" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
</table>

</body>

</html>

解析:

1. xmlns?? 全称就是XML?? NameSpace?? 也就是命名空间。

2. Behavior(行为)也是IE5.0新推出的东西,它的功能非常强大,结合样式表,可以给任何HTML对象增加行为(新的属性、方法、事件),而在这里,它的用处是把命名空间“v”和系统预定义的行为VML连接。这样定义以后,你就可以使用下面的标记了,和普通的HTML标记有所区别,每个标记都增加了一个命名空间。

3. position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。Object.style.position=static|relative|absolute|fixed

可能的值
值 描述
static 默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
relative 位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute 位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
fixed 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。


其原理是引进vml进行画图,下面一些vml例子

注:其中所有的left:top:都是针对图左上角的,比如圆,他的左上角应该是以圆为中心的矩形的左上角
1.line(直线)

a.示例:
Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>创建一条从(0,0)到(200,200)的红色的边框为2px的直线</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
?
<body>?
<v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>?
</body>?
</html>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条从(0,0)到(200,200)的红色的边框为2px的直线</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
</body>
</html>


b.专用属性:from??? 起点坐标;? to??? 终点坐标
2.Oval(圆)
a.示例:
Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>创建一个宽400高400边框为红色填充为绿色的圆</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
?
<body>?
<v:Oval strokecolor='red' fillcolor='green' style='width:400;height:400'/>?
</body>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽400高400边框为红色填充为绿色的圆</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:Oval strokecolor='red' fillcolor='green' style='width:400;height:400'/>
</body>

</html>

b.专用属性:无
c.其他说明:其高宽主要由style中的width和height决定

3.rect(矩形)
a.示例:
Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>创建一个宽100高100的矩形</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
?
<body>?
<v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>?
</body>?
</html>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽100高100的矩形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>
</body>
</html>

b.专用属性:无
c.其他说明:其高宽主要由style中的width和height决定
4.roundrect(圆角矩形)
a.示例:
Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>创建一个圆角矩形</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
?
<body>?
<v:roundrect style="position:absolute;z-index:1;left:220;width:100;top:100;height:100" fillcolor="red" strokecolor="red" strokeweight="1px" arcsize="0.15"/>?
</body>?
</html>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆角矩形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:roundrect style="position:absolute;z-index:1;left:220;width:100;top:100;height:100" fillcolor="red" strokecolor="red" strokeweight="1px" arcsize="0.15"/>
</body>
</html>

b.专用属性:arcsize??? 描述圆矩形四角的弧度值,0-0.5,默认值0.05
c.其他说明:其高宽主要由style中的width和height决定
5.arc(圆弧)
a.示例:
Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>创建一个圆弧</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
?
<body>?
<v:arc style="z-index:1;left:110;width:100;position:absolute;top:10;height:100" startangle="-180" endangle="0"/>?
</body>?
</html>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆弧</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:arc style="z-index:1;left:110;width:100;position:absolute;top:10;height:100" startangle="-180" endangle="0"/>
</body>
</html>

b.专用属性:startangle??? 圆弧的起点缺口,取值范围-360-360,默认值-180;
??????????????????? endangle??? 圆弧的终点缺口,取值范围-360-360,默认值null(0)
c.其他说明:其高宽主要由style中的width和height决定


6.polyline(多边形)
a.示例:
Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>创建一个多边形</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
?
<body>?
<v:polyline style="z-index:1;left:71;position:absolute;top:225" points="0,0,30,-40,100,100,0,0" filled="t" fillcolor="white"/>?
</body>?
</html>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个多边形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:polyline style="z-index:1;left:71;position:absolute;top:225" points="0,0,30,-40,100,100,0,0" filled="t" fillcolor="white"/>
</body>
</html>

?b.专用属性:points??? 各折点坐标,上例表示(0,0)、(30,-40)、(100,100)、(0,0)四个点

7.curve(曲线)

Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>创建一条曲线</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
?
<body>?
<v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>?
</body>?
</html>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条曲线</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>
</body>
</html>

b.专用属性:from??? 起点
??????????????????? to?????? 终点
??????????????????? control1??? 曲线的第一个曲度
??????????????????? control2??? 曲线的第二个曲度
c.其他说明:control1、control2可用都不用、用一个或用两个都用
8.shape(任意形状)
a.示例:
Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>创建任意曲线</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
?
<body>?
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 e"/>?
<v:shape style="width:100;height:100" coordsize="50,50" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>?
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>?
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 e"/>?
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 x e"/>?
</body>

?
</html>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建任意曲线</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 e"/>
<v:shape style="width:100;height:100" coordsize="50,50" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 x e"/>
</body>
</html>

?b.专用属性:path??? 路径(m??? 起点、 l???? 画直线、 c??? 画曲线、x??? 曲线自动闭合、 e??? 结束)
?????????????????? coordsize??? 比例(实际宽:width*100/coordsize第一个值;实际高:height*100/coordsize第二个值)
?????????????????? type??? 引用模板的名称
9.shapetype(模板)
a.示例:
Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>模板使用示例</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
<body>?
<v:ShapeType id="m1" coordsize="1000 1000" fillcolor="yellow">?
<v:Path v="m0,0 l30,-30,60,0,0,0 e"/>?
</v:ShapeType>?
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000" type="#m1"/>?
<v:Shape style="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600" type="#m1"/>?
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:300;height:1000" type="#m1" fillcolor="red"/>?
</body>?
</html>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>模板使用示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:ShapeType id="m1" coordsize="1000 1000" fillcolor="yellow">
<v:Path v="m0,0 l30,-30,60,0,0,0 e"/>
</v:ShapeType>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000" type="#m1"/>
<v:Shape style="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600" type="#m1"/>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:300;height:1000" type="#m1" fillcolor="red"/>
</body>
</html>

?b.其他说明:shapetype是专门用来定义形状摸版的(不可见),而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形(可见)。
10.background(背景)
a.示例:
Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>背景示例</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
<body>?
<v:background fillcolor="white">?
<v:fill angle=50 type='gradient' color2="yellow"/>?
</v:background>?
</body>?
</html>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>背景示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:background fillcolor="white">
<v:fill angle=50 type='gradient' color2="yellow"/>
</v:background>
</body>
</html>

?11.group(容器)
a.示例:
Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>容器示例</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
<body>?
<v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100">?
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>?
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>?
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>?
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>?
</v:group>?
?
<v:group id="group2" style='position:absolute;left:100;top:100;z-index:1;width:100;height:100' coordsize="100,100">?
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>?
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>?
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>?
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>?
</v:group>?
?
<v:group id="group3" style='position:absolute;left:100;top:100;z-index:1;width:200;height:200' coordsize="100,100">?
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>?
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>?
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>?
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>?
</v:group>?
</body>?
</html>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>容器示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>

<v:group id="group2" style='position:absolute;left:100;top:100;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>

<v:group id="group3" style='position:absolute;left:100;top:100;z-index:1;width:200;height:200' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
</body>
</html>


b.其他说明:当使用group后,容器内图形的left、top、width、height等值都是相对group的值。

五、二级标记


二级标记可以看作是对有限的属性进行扩展,就像CSS和HTML的关系一样,利用它我们可以做出更漂亮的图画出来,如上边background(背景)中就使用了fill二级标记,下边我们再来看下如何利用二级标记画一条带箭头的直线:
Html代码
<html xmlns:v="urn:schemas-microsoft-com:vml">?
<head>?
<title>二级标记示例</title>?
<style>?
v\:* { behavior: url(#default#VML);}??
</style>?
</head>?
<body>?
<v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px">?
<v:Stroke dashstyle="shortdot" endarrow='classic'/>?
</v:line>?
</body>?
</html>?

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>二级标记示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px">
<v:Stroke dashstyle="shortdot" endarrow='classic'/>
</v:line>
</body>
</html>

例子中的stroke即为二级标记,它可以用来设置边框样式,除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、 textbox、imagedata(背景图片)等二级标记。

二级标记也有自己的属性,我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单,直接嵌套于图形标签中即可。

?

  相关解决方案