注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

XUE HAI BLOG

鸟瞰家乡 美丽独特 多骄如画 家乡明天更美好

 
 
 

日志

 
 

☆制作表格及链接的代码  

2009-02-24 13:22:38|  分类: 【表格制作大全】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

制作表格及鏈接的代碼

效果图及表格链接代码

文字 文字

连链表格代码1 <TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width=200 borderColorLight=#ffffff border=1>
<TBODY>
<TR align=middle>
<TD borderColorLight=#000000 bgColor=#b7b7b7 borderColorDark=#eeeeee><A href="
http://blog.163.com/链接地址">文字</A></FONT></TD>
<TD borderColorLight=#000000 bgColor=#b7b7b7 borderColorDark=#eeeeee><A href="
http://blog.163.com/链接地址">文字 </A></TD></TR></TD></TR></TBODY></TABLE>

说 明∶所有表格的宽〖蓝色部分〗和颜色〖黄色部分〗均可按需要调整和尝试调换。

连链表格代码2

<TABLE cellSpacing=1 cellPadding=0 width="50%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#00ff00 height=20>
<TD>
<DIV align=center><A href="
http://blog.163.com/相关地址" target=_blank><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 10pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=新宋体 color=#0000ff>表格内容</DIV></FONT></A></TD>
<TD>
<DIV align=center><A href="
http://blog.163.com/相关地址" target=_blank><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 10pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=新宋体 color=#0000ff>表格内容</DIV></FONT></A></TD></TD></TR></TBODY></TABLE>

文字 文字 文字

连链表格代码3<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#00ff00>
<TBODY>
<TR bgColor=#000000 height=30>
<TD width="33.3%"><A href="
http://blog.163.com/网址" target=_blank>文字</A></TD>
<TD width="33.3%"><A href="
http://blog.163.com/网址" target=_blank>文字</A></TD>
<TD width="33.3%"><A href="
http://blog.163.com/网址" target=_blank>文字</A></TD></TD></TR></TBODY></TABLE>

文字 文字 文字 文字

连链表格代码4<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#00ff00>
<TBODY>
<TR bgColor=#00d height=30>
<TD width="25%"><A href="
http://blog.163.com/网址" target=_blank>文字</A></TD>
<TD width="25%"><A href="
http://blog.163.com/网址" target=_blank>文字</A></TD>
<TD width="25%"><A href="
http://blog.163.com/网址" target=_blank>文字</A></TD>
<TD width="25%"><A href="
http://blog.163.com/网址" target=_blank>文字</A></TD></TD></TR></TBODY></TABLE>

内虚外实边框

内虚外实表格代码1<TABLE borderColor=#0000ff height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ff0000 border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #ffff00 2px dashed; BORDER-TOP: #ffff00 2px dashed; BACKGROUND: 10% 10%; BORDER-LEFT: #ffff00 2px dashed; BORDER-BOTTOM: #ffff00 2px dashed">
<DIV align=center>内虚外实边框</DIV></TD></TR></TBODY></TABLE>

说 明∶可分别改变右RIGHT、上TOP、左LEFT、下BOTTOM各边颜色。

内虚外实边框
内虚外实边框

内虚外实表格代码2<TABLE borderColor=#0000ff height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ff0000 border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #ffff00 2px dashed; BORDER-TOP: #ffff00 2px dashed; BACKGROUND: 10% 10%; BORDER-LEFT: #ffff00 2px dashed; BORDER-BOTTOM: #ffff00 2px dashed">
<DIV align=center>内虚外实边框</DIV></TD>
<TD style="BORDER-RIGHT: #ffff00 2px dashed; BORDER-TOP: #ffff00 2px dashed; BACKGROUND: 10% 10%; BORDER-LEFT: #ffff00 2px dashed; BORDER-BOTTOM: #ffff00 2px dashed">
<DIV align=center>内虚外实边框</DIV></TD></TR></TBODY></TABLE>

说 明∶可分别改变右RIGHT、上TOP、左LEFT、下BOTTOM各边颜色。

外虚内实边框 外虚内实边框
外虚内实边框 外虚内实边框

外虚内实表格3<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ff0000 border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">外虚内实边框</TD>
<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">外虚内实边框</TD>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">外虚内实边框</TD>
<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">外虚内实边框</TD></TR></TBODY></TABLE>

说 明∶可分别改变右RIGHT、上TOP、左LEFT、下BOTTOM各边颜色。

一行多列
一行多列
一行多列

一行多列表格代码4<TABLE style="BORDER-COLLAPSE: collapse" borderColor=red cellSpacing=0 width=300 align=center bgColor=#800000 border=2>
<TBODY>
<TR>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD></TR></TBODY></TABLE>

一 列 多 行
一 列 多 行
一 列 多 行

一列多行表格代码5<TABLE style="BORDER-COLLAPSE: collapse" borderColor=red cellSpacing=0 width=300 align=center bgColor=#800000 border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD></TR></TR></TR></TBODY></TABLE>

多行多列
多行多列
多行多列
多行多列
多行多列
多行多列
多行多列
多行多列
多行多列

多行多列表格代码6<TABLE style="BORDER-COLLAPSE: collapse" borderColor=red cellSpacing=0 width=300 align=center bgColor=#8B0000 border=1>
<TBODY>
<TR>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TR>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TR>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD></TR></TBODY></TABLE>

合并列的表格
合并列的表格
合并列的表格
合并列的表格
合并列的表格
合并列的表格
合并列的表格

合并列的表格代码7<TABLE style="BORDER-COLLAPSE: collapse" borderColor=red cellSpacing=0 width=300 align=center bgColor=#000000 border=1>
<TBODY>
<TR>
<TD colSpan=3>
<DIV align=center>合并列的表格</DIV></TD>
<TR>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并列的表格</DIV></TD>
<TD>
<DIV align=center>合并列的表格</DIV></TD>
<TD>
<DIV align=center>合并列的表格</DIV></TD></TR></TBODY></TABLE>

说 明∶这里增加了合并列代码colSpan=3

合并行的表格
合并行的表格
合并行的表格
合并行的表格
合并行的表格
合并行的表格
合并行的表格

合并行的表格代码8<TABLE style="BORDER-COLLAPSE: collapse" borderColor=red cellSpacing=0 width=300 align=center bgColor=#8b0000 border=1>
<TBODY>
<TR>
<TD width=100 rowSpan=3>
<DIV align=center>合并行的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并行的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TD>
<DIV align=center>合并行的表格</DIV></TD></TR></TBODY></TABLE>

说 明∶这里增加了合并行代码rowSpan=3

复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格
复杂表格

复杂表格代码9<TABLE style="BORDER-COLLAPSE: collapse" borderColor=red cellSpacing=0 width=300 align=center bgColor=#000000 border=1>
<TBODY>
<TR>
<TD width=60>
<DIV align=center>复杂表格</DIV></TD>
<TD width=180 colSpan=3>
<DIV align=center>复杂表格</DIV></TD>
<TD width=60>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD rowSpan=4>
<DIV align=center>复杂表格</DIV></TD>
<TD rowSpan=3>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD colSpan=3>
<DIV align=center>复杂表格</DIV></TD></TR></TBODY></TABLE>

说 明∶这里增加了合并列代码colSpan=3和合并行代码rowSpan=3

标 题
文本内容——标题位于表体内的表格

标题位于表体内的表格代码10<TABLE width=280 align=center border=0>
<TBODY>
<TR>
<TD bgColor=red>
<DIV align=center><FONT color=#000000><B>标题</B></FONT></DIV></TD></TR>
<TR>
<TD bgColor=#cccccc>
<DIV style="HEIGHT: 60px" align=center>文本内容——标题位于表体内的表格</DIV></TD></TR></TBODY></TABLE>

金钥匙〖制作表格连接的代码〗
☆制作表格及链接的代码 - 学 海 - XVE HAI BLOG

  评论这张
 
阅读(538)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017