表格代码
代码:
<TABLE(表格) background="背景地址" borderColor=# (框边的颜色) cellSpacing= (单元格间距) cellPadding= (单元格高度) width= (总宽度) height= (总高度) bgColor=# (背景颜色) align=center(居中) border= (框边宽度) >★ <P style="TEXT-INDENT: 2em"> colSpan= (占列数) rowSpan= (占行数) ★
这是一个完整的表格代码,我称他为万能代码。设置相应的参数、增减行列数、插入一些特殊的代码,即可得到预想的表格效果。一般情况下:cellPadding(单元格高度)、height(表格总高度)均设为0,由日志内容找齐;width(表格总宽度)根据实际设置。另外,各单元格的宽度可设为等宽,也可不等宽。
这里的 width=700,cellSpacing=2,border=4,borderColor=#7744ff,bgColor=#000060。没有置入背景,background="背景地址"可以不动。在此为了演示的需要,设height=500。
此表格设计的是5列8行,各单元格等宽,单元格高度根据内容而定,基本格式是:
表格的变化(代码 colSpan= 、rowSpan= 、vAlign=top 、vAlign=bottom 、align=middle 的运用):
<TD colSpan=3>合并第1行的前三列单元格 | ||||
<TD vAlign=top>表示与上对齐 | <TD vAlign=bottom>表示与下对齐 | <TD align=middle>表示居中 | ||
<TD rowSpan=4>合并第五列4、5、6、7行四个单元格 | ||||
<TD colSpan=2 rowSpan=3>合并第一、二列5、6、7行六个单元格 | ||||
上述表格代码最简单的形式就是只有一个单元格,也就是一个单边的边框,如下图:
可在此处写日志、贴图或flash。也可用此单边边框一个套一个做套装边框。 |
表格代码,是美化博客不可缺少的工具。可做出精美的边框,编排图文并茂的各式日志版面、模块,亦可独出心裁地搞出各种博客创意。
表格的多种款式: | |||||
| 最简表格 代码 <TABLE width=220 border=1> | ||||
| 单线表格 代码 <TABLE cellSpacing=0 cellPadding=0 width=220 border=1> | ||||
| 细线表格1 代码 <TABLE cellSpacing=1 cellPadding=0 width=220 bgColor=#000000 border=0> | ||||
| 细线表格2 代码 <TABLE cellSpacing=0 cellPadding=0 width=220 bgColor=#900000> | ||||
| 单虚线表格 代码 <TABLE cellSpacing=0 cellPadding=0 width=220 bgColor=#E5E5E5> | ||||
| 双虚线表格 代码 <TABLE cellSpacing=3 cellPadding=0 width=220 bgColor=#FFFFCC> | ||||
| 立体表格 代码 <TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width=220 borderColorLight=#ffffff border=1> | ||||
标题表格1 代码 <FIELDSET style="WIDTH: 220px" align=center><LEGEND><FONT color=#cc99ff>标题1 </FONT></LEGEND> | |||||
标题表格2 代码 <FIELDSET style="WIDTH: 220px" align=center><LEGEND align=center><FONT color=#cc99ff>题目2 </FONT></LEGEND> | |||||
标题表格3 代码 <FIELDSET style="WIDTH: 220px; COLOR: #000000; BORDER-TOP-STYLE: groove; BORDER-RIGHT-STYLE: groove; BORDER-LEFT-STYLE: groove; BORDER-BOTTOM-STYLE: groove" align=center><LEGEND style="BORDER-RIGHT: #f66600 1px solid; BORDER-TOP: #f66600 1px solid; BORDER-LEFT: #f66600 1px solid; WIDTH: 50px; COLOR: #cc99ff; BORDER-BOTTOM: #f66600 1px solid; HEIGHT: 0px">标题2</LEGEND> | |||||
标题表格4 代码 <FIELDSET style="WIDTH: 220px; COLOR: #000000; BORDER-TOP-STYLE: groove; BORDER-RIGHT-STYLE: groove; BORDER-LEFT-STYLE: groove; BORDER-BOTTOM-STYLE: groove" align=center><LEGEND style="BORDER-RIGHT: #f66600 1px solid; BORDER-TOP: #f66600 1px solid; BORDER-LEFT: #f66600 1px solid; WIDTH: 50px; COLOR: #cc99ff; BORDER-BOTTOM: #f66600 1px solid; HEIGHT: 0px" align=center>标题4</LEGEND> | |||||
| 闪底表格 代码 <TABLE cellSpacing=2 width=220 background=http://img838.ph.126.net/KqL9raSTWeliWxXM1CKH-w==/812899732741320166.gif border=1> | ||||
评论