打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
表格代码
代码:
<TABLE(表格) background="背景地址" borderColor=# (框边的颜色) cellSpacing= (单元格间距) cellPadding= (单元格高度) width= (总宽度) height= (总高度) bgColor=# (背景颜色) align=center(居中) border= (框边宽度) >
<TBODY>
<TR>
<TD>填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容</TD></TR>
<TR>
<TD>填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容</TD></TR>
<TR>
<TD>填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容</TD></TR></TBODY></TABLE>
★ <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。也可用此单边边框一个套一个做套装边框。
表格代码,是美化博客不可缺少的工具。可做出精美的边框,编排图文并茂的各式日志版面、模块,亦可独出心裁地搞出各种博客创意。
表格的多种款式:
12
34
最简表格 代码
<TABLE width=220 border=1>
<TBODY>
<TR>
<TD>1</TD><TD>2</TD></TR>
<TR >
<TD>3</TD><TD>4</TD></TR></TBODY></TABLE>
12
34
单线表格 代码
<TABLE cellSpacing=0 cellPadding=0 width=220 border=1>
<TBODY>
<TR>
<TD>1</TD><TD>2</TD></TR>
<TR>
<TD>3</TD><TD>4</TD></TR></TBODY></TABLE>
12
34
细线表格1 代码
<TABLE cellSpacing=1 cellPadding=0 width=220 bgColor=#000000 border=0>
<TBODY>
<TR bgColor=#ffffff>
<TD>1</TD><TD>2</TD></TR>
<TR bgColor=#ffffff>
<TD>3</TD><TD>4</TD></TR></TBODY></TABLE>
12
34
细线表格2  代码
<TABLE cellSpacing=0 cellPadding=0 width=220 bgColor=#900000>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-LEFT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">1</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">2</TD></TR>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-LEFT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">3</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">4</TD></TR></TBODY></TABLE>
12
34
单虚线表格 代码
<TABLE cellSpacing=0 cellPadding=0 width=220 bgColor=#E5E5E5>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">1</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">2</TD></TR>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">3</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">4</TD></TR></TBODY></TABLE>
12
34
双虚线表格 代码
<TABLE cellSpacing=3 cellPadding=0 width=220 bgColor=#FFFFCC>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">1</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">2</TD>
<TR>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">3</TD>
<TD style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">4</TD></TR></TR></TBODY></TABLE>
12
34
立体表格 代码
<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width=220 borderColorLight=#ffffff border=1>
<TBODY>
<TR>
<TD borderColorLight=#000000 bgColor=#b7b7b7 borderColorDark=#eeeeee>1</TD>
<TD borderColorLight=#000000 bgColor=#b7b7b7 borderColorDark=#eeeeee>2</TD></TR>
<TR>
<TD borderColorLight=#000000 bgColor=#b7b7b7 borderColorDark=#eeeeee>3</TD>
<TD borderColorLight=#000000 bgColor=#b7b7b7 borderColorDark=#eeeeee>4</TD></TR></TBODY></TABLE>
标题1 正文内容
标题表格1  代码
<FIELDSET style="WIDTH: 220px" align=center><LEGEND><FONT color=#cc99ff>标题1 </FONT></LEGEND>
<P style="TEXT-INDENT: 2em"><FONT color=#993399>正文内容</FONT></P></FIELDSET>
标题2 正文内容
标题表格2  代码
<FIELDSET style="WIDTH: 220px" align=center><LEGEND align=center><FONT color=#cc99ff>题目2 </FONT></LEGEND>
<P style="TEXT-INDENT: 2em"><FONT color=#993399>正文内容</FONT></P></FIELDSET>
标题3正文内容
标题表格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>
<P style="TEXT-INDENT: 2em"><FONT color=#995599>正文内容</FONT></P></FIELDSET>
标题4正文内容
标题表格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>
<P style="TEXT-INDENT: 2em"><FONT color=#995599>正文内容</FONT></P></FIELDSET>
12
34
闪底表格 代码
<TABLE cellSpacing=2 width=220 background=http://image102.360doc.com/DownloadImg/2017/01/1120/89066842_1.gif border=1>
<TBODY>
<TR>
<TD>1</TD><TD>2</TD></TR>
<TR>
<TD>3</TD><TD>4</TD></TR></TBODY></TABLE>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
漂亮表格代码大全
表格的高级样式
滚动.透明.对开图制作
虚线表格制作代码大全
常用表格代码
简单的导航模版
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服