| |||||||
原代码:
<DIV align=center>
<TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR height=1>
<TD width=1></TD><TD width=1></TD><TD width=1></TD>
<TD bgColor=边框颜色></TD>
<TD width=1></TD><TD width=1></TD><TD width=1></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色 colSpan=2></TD>
<TD bgColor=背景色></TD>
<TD bgColor=边框颜色 colSpan=2></TD><TD></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色></TD>
<TD bgColor=背景色 colSpan=3></TD>
<TD bgColor=边框颜色></TD><TD></TD></TR>
<TR>
<TD width=1 bgColor=边框颜色></TD>
<TD bgColor=背景色 colSpan=5>
<TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=3>
<TBODY>
<TR>
<TD align=center>你要写的文字、图片、或表格</TD>
</TR></TBODY></TABLE>
</TD>
<TD width=1 bgColor=边框颜色></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色></TD>
<TD bgColor=背景色 colSpan=3></TD>
<TD bgColor=边框颜色></TD><TD></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色 colSpan=2></TD>
<TD bgColor=背景色></TD>
<TD bgColor=边框颜色 colSpan=2></TD><TD></TD></TR>
<TR height=1>
<TD colSpan=3></TD>
<TD bgColor=边框颜色></TD>
<TD colSpan=3></TD></TR>
</TBODY></TABLE></DIV>
上图代码: <table style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%">
<tr height=1>
<td width=1></td>
<td width=1></td>
<td width=1></td>
<td bgColor=#999999></td>
<td width=1></td>
<td width=1></td>
<td width=1></td>
</tr>
<tr height=1>
<td></td>
<td bgColor=#999999 colSpan=2></td>
<td bgColor=#ccff99></td>
<td bgColor=#999999 colSpan=2></td>
<td></td>
</tr>
<tr height=1>
<td></td>
<td bgColor=#999999></td>
<td bgColor=#ccff99 colSpan=3></td>
<td bgColor=#999999></td>
<td></td>
</tr>
<tr>
<td bgColor=#999999></td>
<td bgColor=#ccff99 colSpan=5>
<table style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=3>
<tr>
<td align=middle><FONT color=#0000ff>用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦! </FONT></td>
</tr>
</table>
</td>
<td bgColor=#999999></td>
</tr>
<tr height=1>
<td></td>
<td bgColor=#999999></td>
<td bgColor=#ccff99 colSpan=3></td>
<td bgColor=#999999></td>
<td></td>
</tr>
<tr height=1>
<td></td>
<td bgColor=#999999 colSpan=2></td>
</tr>
</table>
虽然代码看起来很长,其实原理很简单,昨天我把原代码精简了一下,将嵌套的表格从四个减少到两个,应该更好理解了吧。需要指出一点,“cellPadding=3”是避免表格内文字过于贴近表格边框而特意添加的!
制作这个圆角表格的主要目的有两个:一是可以用来作为带背景色的日志模板,二是可以制作自己日志标题档或者签名档,用处还是很大的。用<Table>语句制作圆角表格,和网上其他常见方法相比,不仅省去了制作、使用圆角图片的麻烦,而且此圆角表格具有“自适应性”——因为语句中使用的是相对宽度(width=100%),所以此表格会随着发布日志栏的宽度变化而自我调节,这比一般图片做出来的圆角表格更具灵活性!
评论