1、可以用很多 div ，全部做成 1px X 1px ，然后组成图形。
这样做，比较麻烦，浏览器渲染很累。。。
2、直接用 vml。
网上上有公司已经做了这方面画图插件，很方便调用的。。。
像什么 sin ，cos ，圆，三角，的都可以。。。
去 找找吧，很多。。
使鼠标经过显示 css3 绘图三角形参考下面方法：<a class="tooltips" href="#tooltips">这就是Tooltips<span>这些附加的说明文字在鼠标经过的时候显示。
</span></a>
<style type="text/css">
/*Tooltips*/
.tooltips{
position:relative/*这个是关键*/
z-index:2
}
.tooltips:hover{
z-index:3
background:none/*没有这个在IE中不可用*/
}
.tooltips span{
display: none
}
.tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/
display:block
position:absolute
top:21px
left:9px
width:15em
border:1px solid black
background-color:#ccFFFF
padding: 3px
color:black
}
</style>
以下代码解决你的问题：
机电系统表格.html 文件代码清单如下：
<!doctype html><html langj="zh">
<head>
<meta charset="utf-8" />
<title>机电系统表格</title>
<link rel="stylesheet" href="electromechanical-systems.css" />
</head>
<body>
<table summary="">
<caption>状态指示系统</caption>
<colgroup>
<col id="col1" />
<col id="col2" />
<col id="col3" />
<col id="col4" />
<col id="col5" />
<col id="col6" />
<col id="col7" />
<col id="col8" />
<col id="col9" />
<col id="col10" />
<col id="col11" />
</colgroup>
<tbody>
<tr>
<th scope="col" colspan="2">电动放火风闸</th>
<td rowspan="15">  </td>
<th scope="col" colspan="2">灭火系统</th>
<td rowspan="15">  </td>
<th scope="col" colspan="2">水密门</th>
<td rowspan="15">  </td>
<th scope="col" colspan="2">冷藏压缩机</th>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>1号机舱送风机风闸开指示</td>
<td><img src="#" alt="" /></td>
<td>C02灭火装置失电报警</td>
<td><img src="#" alt="" /></td>
<td>1号水密门综合故障报警</td>
<td><img src="#" alt="" /></td>
<td>冷藏压缩机过载报警</td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>1号机舱送风机风闸开指示</td>
<td><img src="#" alt="" /></td>
<td>C02灭火装置失电报警</td>
<td><img src="#" alt="" /></td>
<td>2号水密门综合故障报警</td>
<td><img src="#" alt="" /></td>
<td>冷藏压缩机过载报警</td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>2号机舱送风机风闸开指示</td>
<td><img src="#" alt="" /></td>
<td>C02灭火装置失电报警</td>
<td><img src="#" alt="" /></td>
<td>3号水密门综合故障报警</td>
<td><img src="#" alt="" /></td>
<td>冷藏压缩机过载报警</td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>2号机舱送风机风闸开指示</td>
<td><img src="#" alt="" /></td>
<td>C02灭火装置失电报警</td>
<td><img src="#" alt="" /></td>
<td>4号水密门综合故障报警</td>
<td><img src="#" alt="" /></td>
<td>冷藏压缩机过载报警</td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>3号机舱送风机风闸开指示</td>
<td><img src="#" alt="" /></td>
<td>C02灭火装置失电报警</td>
<td><img src="#" alt="" /></td>
<td>5号水密门综合故障报警</td>
<td><img src="#" alt="" /></td>
<td>冷藏压缩机过载报警</td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>3号机舱送风机风闸开指示</td>
<td><img src="#" alt="" /></td>
<td>C02灭火装置失电报警</td>
<td><img src="#" alt="" /></td>
<td>6号水密门综合故障报警</td>
<td><img src="#" alt="" /></td>
<td>备用</td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>4号机舱送风机风闸开指示</td>
<td><img src="#" alt="" /></td>
<td>C02灭火装置失电报警</td>
<td><img src="#" alt="" /></td>
<td>7号水密门综合故障报警</td>
<td></td>
<th>主辅机供油单元</th>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>4号机舱送风机风闸开指示</td>
<td><img src="#" alt="" /></td>
<td>C02灭火装置失电报警</td>
<td><img src="#" alt="" /></td>
<td>8号水密门综合故障报警</td>
<td><img src="#" alt="" /></td>
<td>供油单元1号燃油供应泵运行指示</td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>分油机间送风机风闸开指示</td>
<td><img src="#" alt="" /></td>
<td>机舱压力水雾灭火系统释放报警</td>
<td></td>
<th>压缩空气系统</th>
<td><img src="#" alt="" /></td>
<td>供油单元2号燃油供应泵运行指示</td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>分油机间送风机风闸关指示</td>
<td><img src="#" alt="" /></td>
<td>机舱压力水雾灭火系统故障报警</td>
<td><img src="#" alt="" /></td>
<td>1#主空气瓶压力低报警</td>
<td><img src="#" alt="" /></td>
<td>供油单元1号燃油循环泵运行指示</td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>分油机间送风机风闸开指示</td>
<td></td>
<th>油水分离器</th>
<td><img src="#" alt="" /></td>
<td>2#主空气瓶压力低报警</td>
<td><img src="#" alt="" /></td>
<td>供油单元2号燃油循环泵运行指示</td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>分油机间送风机风闸关指示</td>
<td><img src="#" alt="" /></td>
<td>油水分离器综合故障报警</td>
<td><img src="#" alt="" /></td>
<td>工作空气瓶压力低报警</td>
<td><img src="#" alt="" /></td>
<td>三通转换阀燃油遥控指示</td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>备用</td>
<td><img src="#" alt="" /></td>
<td>油水分离器运行指示</td>
<td><img src="#" alt="" /></td>
<td>备用</td>
<td><img src="#" alt="" /></td>
<td>三通转换阀柴油遥控指示</td>
</tr>
<tr>
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>
</tr>
</tbody>
</table>
</body>
</html>
electromechanical-systems.css 文件代码清单如下：
body {background: #000000
}
table {
border: 1px solid #ffffff
border-collapse: collapse
background: #000000
font-size: 0.9em
_font-size: 13px
color: #ffffff
}
#col2, #col5, #col8, #col11 {
width: 220px /* 修改装置名称列宽度 */
}
table th {
border: 1px solid #ffffff
color: green
}
table td {
_border-right: 1px solid #ffffff
border-left: 1px solid #ffffff
}
table tr td img {
display: block
margin: 0 auto
width: 10px /* 修改图片宽度 */
height: 10px /* 修改图片高度 */
}
