table画斜线、直线、圆、矩形、圆角矩形、圆弧、多边形、曲线等
<html xmlns:v>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<styletype="text/css">
<!--
v\:*{behavior:url(#default#VML);}
body,td,th{
font-size:10pt;
}
-->
</style>
</head><body>
<divalign="center"style="font-size:30px"><strong>模拟投资试算比较分析</strong>
</div>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC"><tr>
<tdcolspan="4"bgcolor="#B2CDFF"><p><strong>试算过程说明 </strong></p>
<p>※基金的历史净值水平是包含了分红再投资的收益； </p>
<p>※如果选择日期为非工作日，则选取下一工作日的净值进行测算； </p>
<p>※投资净收益＝投资总收益－投资总成本 </p>
<p>※投资回报率＝投资净收益/投资总成本； </p>
<p>※年化投资回报率是按照复利方式计算的。 </p></td>
</tr>
<tr>
<tdcolspan="4"bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<tdheight="12"colspan="4"bgcolor="#4F81BD"><strongstyle="color:#FFFFFF">投资基金：博时价值增长基金（前端：050001）</strong></td>
</tr>
<tr>
<tdheight="5"colspan="4"bgcolor="#95B3D7"><strongstyle="color:#FFFFFF">投资时间段：2007年1月1日至2008年12月23日</strong></td>
</tr>
<tr>
<tdheight="0"bgcolor="#FFFFFF"><divalign="right">投资方式</div><div>收益情况</div>
<v:groupstyle="width:100%;height:32px;position:absolute;top:309px;"coordsize="100,100">
<v:linestrokecolor="black"from="0,0"to="100,100"></v:line>
</v:group></td>
<tdbgcolor="#FFFFFF">一次性投资</td>
<tdbgcolor="#FFFFFF">定期定额投资</td>
<tdheight="-2"bgcolor="#FFFFFF">定期不定额投资</td>
</tr>
<tr>
<tdheight="1"bgcolor="#FFFFFF"> </td>
<tdbgcolor="#FFFFFF"> </td>
<tdbgcolor="#FFFFFF"> </td>
<tdheight="-1"bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<tdheight="3"bgcolor="#FFFFFF"> </td>
<tdbgcolor="#FFFFFF"> </td>
<tdbgcolor="#FFFFFF"> </td>
<tdheight="-1"bgcolor="#FFFFFF"> </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代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条从(0,0)到(200,200)的红色的边框为2px的直线</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:linestrokecolor="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:linestrokecolor="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代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽400高400边框为红色填充为绿色的圆</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:Ovalstrokecolor='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:Ovalstrokecolor='red'fillcolor='green'style='width:400;height:400'/>
</body></html>
b.专用属性：无 c.其他说明：其高宽主要由style中的width和height决定
3.rect(矩形)
a.示例：
Html代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽100高100的矩形</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:rectstyle="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:rectstyle="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>
</body>
</html>b.专用属性：无
c.其他说明：其高宽主要由style中的width和height决定
4.roundrect(圆角矩形)
a.示例：
Html代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆角矩形</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:roundrectstyle="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:roundrectstyle="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代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆弧</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:arcstyle="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:arcstyle="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代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个多边形</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:polylinestyle="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:polylinestyle="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代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条曲线</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:curvestyle="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:curvestyle="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代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建任意曲线</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:shapestyle="width:100;height:100"coordsize="100,100"filled="f"strokecolor="blue"path="m0,0l100,100e"/>
<v:shapestyle="width:100;height:100"coordsize="50,50"filled="f"strokecolor="blue"path="m0,0l0,100,100,100,100,0,0,0e"/>
<v:shapestyle="width:100;height:100"coordsize="100,100"filled="f"strokecolor="blue"path="m0,0l0,100,100,100,100,0,0,0e"/>
<v:shapestyle="width:100;height:100"coordsize="100,100"filled="f"strokecolor="blue"path="m0,0c130,-90,30,90,150,180e"/>
<v:shapestyle="width:100;height:100"coordsize="100,100"filled="f"strokecolor="blue"path="m0,0c130,-90,30,90,150,180xe"/>
</body></html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建任意曲线</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head><body>
<v:shapestyle="width:100;height:100"coordsize="100,100"filled="f"strokecolor="blue"path="m0,0l100,100e"/>
<v:shapestyle="width:100;height:100"coordsize="50,50"filled="f"strokecolor="blue"path="m0,0l0,100,100,100,100,0,0,0e"/>
<v:shapestyle="width:100;height:100"coordsize="100,100"filled="f"strokecolor="blue"path="m0,0l0,100,100,100,100,0,0,0e"/>
<v:shapestyle="width:100;height:100"coordsize="100,100"filled="f"strokecolor="blue"path="m0,0c130,-90,30,90,150,180e"/>
<v:shapestyle="width:100;height:100"coordsize="100,100"filled="f"strokecolor="blue"path="m0,0c130,-90,30,90,150,180xe"/>
</body>
</html>b.专用属性：path 路径(m 起点、 l 画直线、 c 画曲线、x 曲线自动闭合、 e 结束)
coordsize比例(实际宽:width*100/coordsize第一个值；实际高:height*100/coordsize第二个值)
type引用模板的名称
9.shapetype(模板)
a.示例：
Html代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>模板使用示例</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:ShapeTypeid="m1"coordsize="10001000"fillcolor="yellow">
<v:Pathv="m0,0l30,-30,60,0,0,0e"/>
</v:ShapeType>
<v:Shapestyle="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000"type="#m1"/>
<v:Shapestyle="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600"type="#m1"/>
<v:Shapestyle="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:ShapeTypeid="m1"coordsize="10001000"fillcolor="yellow">
<v:Pathv="m0,0l30,-30,60,0,0,0e"/>
</v:ShapeType>
<v:Shapestyle="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000"type="#m1"/>
<v:Shapestyle="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600"type="#m1"/>
<v:Shapestyle="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代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>背景示例</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:backgroundfillcolor="white">
<v:fillangle=50type='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:backgroundfillcolor="white">
<v:fillangle=50type='gradient'color2="yellow"/>
</v:background>
</body>
</html>11.group(容器)
a.示例：
Html代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>容器示例</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:groupid="group1"style='position:absolute;left:0;top:0;z-index:1;width:100;height:100'coordsize="100,100">
<v:ovalstyle="left:100;top:100;width:50;height:50"fillcolor="white"/>
<v:rectstyle="left:200;top:100;width:50;height:50"fillcolor="yellow"/>
<v:rectstyle="left:100;top:200;width:80;height:80"fillcolor="red"/>
<v:arcstyle="left:200;top:200;width:80;height:80"startangle="360"endangle="167"fillcolor="blue"/>
</v:group>
<v:groupid="group2"style='position:absolute;left:100;top:100;z-index:1;width:100;height:100'coordsize="100,100">
<v:ovalstyle="left:100;top:100;width:50;height:50"fillcolor="white"/>
<v:rectstyle="left:200;top:100;width:50;height:50"fillcolor="yellow"/>
<v:rectstyle="left:100;top:200;width:80;height:80"fillcolor="red"/>
<v:arcstyle="left:200;top:200;width:80;height:80"startangle="360"endangle="167"fillcolor="blue"/>
</v:group>
<v:groupid="group3"style='position:absolute;left:100;top:100;z-index:1;width:200;height:200'coordsize="100,100">
<v:ovalstyle="left:100;top:100;width:50;height:50"fillcolor="white"/>
<v:rectstyle="left:200;top:100;width:50;height:50"fillcolor="yellow"/>
<v:rectstyle="left:100;top:200;width:80;height:80"fillcolor="red"/>
<v:arcstyle="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:groupid="group1"style='position:absolute;left:0;top:0;z-index:1;width:100;height:100'coordsize="100,100">
<v:ovalstyle="left:100;top:100;width:50;height:50"fillcolor="white"/>
<v:rectstyle="left:200;top:100;width:50;height:50"fillcolor="yellow"/>
<v:rectstyle="left:100;top:200;width:80;height:80"fillcolor="red"/>
<v:arcstyle="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:ovalstyle="left:100;top:100;width:50;height:50"fillcolor="white"/>
<v:rectstyle="left:200;top:100;width:50;height:50"fillcolor="yellow"/>
<v:rectstyle="left:100;top:200;width:80;height:80"fillcolor="red"/>
<v:arcstyle="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:ovalstyle="left:100;top:100;width:50;height:50"fillcolor="white"/>
<v:rectstyle="left:200;top:100;width:50;height:50"fillcolor="yellow"/>
<v:rectstyle="left:100;top:200;width:80;height:80"fillcolor="red"/>
<v:arcstyle="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代码
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>二级标记示例</title>
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<v:linestyle="z-index:5;position:absolute;left:200;top:200"to="0,150"strokecolor="red"strokeweight="10px">
<v:Strokedashstyle="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:linestyle="z-index:5;position:absolute;left:200;top:200"to="0,150"strokecolor="red"strokeweight="10px">
<v:Strokedashstyle="shortdot"endarrow='classic'/>
</v:line>
</body>
</html>例子中的stroke即为二级标记，它可以用来设置边框样式，除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、 textbox、imagedata(背景图片)等二级标记。
二级标记也有自己的属性，我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单，直接嵌套于图形标签中即可。