【蓝波制作】
一行效果:↓
要写的文字 |
一行代码:↓
<TABLE cellSpacing=1 cellPadding=0 width=600 align=center bgColor=#ff0000 border=1>
<TBODY>
<TR bgColor=#00cd00 height=20>
<TD><A href="链接地址">要写的文字</A></TD></TR>
</TBODY></TABLE>
一行两列效果↓
要写的文字1 | 要写的文字2 |
一行两列代码↓:
<TABLE cellSpacing=1 cellPadding=0 width=600 align=center bgColor=#ff0000 border=1>
<TBODY>
<TR bgColor=#00cd00 height=20>
<TD width="50%"><A href="链接地址">要写的文字1</A></TD>
<TD width="50%"><A href="链接地址">要写的文字2</A></TD></TR>
</TBODY></TABLE>
两行三列效果:↓
要写的文字1 | 要写的文字2 | 要写的文字3 |
要写的文字4 | 要写的文字5 | 要写的文字6 |
两行三列代码:↓
<TABLE cellSpacing=1 cellPadding=0 width=600 align=center bgColor=#ff0000 border=1>
<TBODY>
<TR bgColor=#00cd00 height=20>
<TD width="33%"><A href="链接地址">要写的文字1</A></TD>
<TD width="33%"><A href="链接地址">要写的文字2</A></TD>
<TD width="33%"><A href="链接地址">要写的文字3</A></TD></TR>
<TR bgColor=#00cd00 height=20>
<TD width="33%"><A href="链接地址">要写的文字4</A></TD>
<TD width="33%"><A href="链接地址">要写的文字5</A></TD>
<TD width="33%"><A href="链接地址">要写的文字6</A></TD></TR>
</TBODY></TABLE>
四行五列效果:↓
要写的文字1 | 要写的文字2 | 要写的文字3 | 要写的文字4 | 要写的文字5 |
要写的文字6 | 要写的文字7 | 要写的文字8 | 要写的文字9 | 要写的文字10 |
要写的文字11 | 要写的文字12 | 要写的文字13 | 要写的文字14 | 要写的文字15 |
要写的文字16 | 要写的文字17 | 要写的文字18 | 要写的文字19 | 要写的文字20 |
四行五列代码:↓
<TABLE cellSpacing=1 cellPadding=0 width=600 align=center bgColor=#ff0000 border=1>
<TBODY>
<TR bgColor=#00cd00 height=20>
<TD width="20%"><A href="链接地址">要写的文字1</A></TD>
<TD width="20%"><A href="链接地址">要写的文字2</A></TD>
<TD width="20%"><A href="链接地址">要写的文字3</A></TD>
<TD width="20%"><A href="链接地址">要写的文字4</A></TD>
<TD width="20%"><A href="链接地址">要写的文字5</A></TD></TR>
<TR bgColor=#00cd00 height=20>
<TD width="20%"><A href="链接地址">要写的文字6</A></TD>
<TD width="20%"><A href="链接地址">要写的文字7</A></TD>
<TD width="20%"><A href="链接地址">要写的文字8</A></TD>
<TD width="20%"><A href="链接地址">要写的文字9</A></TD>
<TD width="20%"><A href="链接地址">要写的文字10</A></TD></TR>
<TR bgColor=#00cd00 height=20>
<TD width="20%"><A href="链接地址">要写的文字11</A></TD>
<TD width="20%"><A href="链接地址">要写的文字12</A></TD>
<TD width="20%"><A href="链接地址">要写的文字13</A></TD>
<TD width="20%"><A href="链接地址">要写的文字14</A></TD>
<TD width="20%"><A href="链接地址">要写的文字15</A></TD></TR>
<TR bgColor=#00cd00 height=20>
<TD width="20%"><A href="链接地址">要写的文字16</A></TD>
<TD width="20%"><A href="链接地址">要写的文字17</A></TD>
<TD width="20%"><A href="链接地址">要写的文字18</A></TD>
<TD width="20%"><A href="链接地址">要写的文字19</A></TD>
<TD width="20%"><A href="链接地址">要写的文字20</A></TD></TR>
</TBODY></TABLE>
合并2格效果:↓
水果类 | 苹果 | 香蕉 | 哈密瓜 |
---|---|---|---|
葡萄 | 菠萝 | 脐橙 | |
动物类 | 兔子 | 大灰狼 | 狗熊 |
合并2格代码:↓
<TABLE cellSpacing=1 cellPadding=0 width=600 align=center bgColor=#ff0000 border=1>
<TBODY>
<TR align=middle bgColor=#00cd00 height=20>
<TH width="15%" rowSpan=2>水果类</TH>
<TD width="28%">苹果</TD>
<TD width="28%">香蕉</TD>
<TD width="28%">哈密瓜</TD></TR>
<TR align=middle bgColor=#00cd00 height=20>
<TD width="28%">葡萄</TD>
<TD width="28%">菠萝</TD>
<TD width="28%">脐橙</TD></TR>
<TR align=middle bgColor=#00cd00 height=20>
<TD width="15%"><STRONG>动物类</STRONG></TD>
<TD width="28%">兔子</TD>
<TD width="28%">大灰狼</TD>
<TD width="28%">狗熊</TD></TR></TBODY></TABLE>
一行不分 几行细分效果:↓
治安巡逻值班表 | |||
星期一 | 张三 | 李四 | 王老五 |
星期二 | 王麻子 | 李麻子 | 张麻子 |
星期三 | 肖张 | 刘级 | 万精油 |
一行不分 几行细分代码:↓
<DIV>
<TABLE cellSpacing=1 cellPadding=0 width=600 align=center bgColor=#ff0000 border=1>
<TBODY>
<TR align=middle bgColor=#00cd00 height=20>
<TD colSpan=4>
<DIV align=center><FONT color=#ffff00 size=5>治安巡逻值班表</FONT></DIV></TD></TR>
<TR align=middle bgColor=#00cd00 height=20>
<TD width="15%">星期一</TD>
<TD width="28%">张三</TD>
<TD width="28%">李四</TD>
<TD width="28%">王老五</TD></TR>
<TR align=middle bgColor=#00cd00 height=20>
<TD width="15%">星期二</TD>
<TD width="28%">王麻子</TD>
<TD width="28%">李麻子</TD>
<TD width="28%">张麻子</TD></TR>
<TR align=middle bgColor=#00cd00 height=20>
<TD width="15%">星期三</TD>
<TD width="28%">肖张</TD>
<TD width="28%">刘级</TD>
<TD width="28%">万精油</TD></TR></TBODY></TABLE></DIV>
※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※
部分代码说明:↓
bgColor=背景颜色
cellSpacing=边框的大小(即看到的红色边框)
width=表格长度
<TR>.........</TR>这里代表行
<TD>........</TD>这里代表列
<TD width="20%">本列占行的比例
<TR bgColor=#00cd00> 本行的背景色(绿色)
<TR height=20> 本行的高度
rowSpan=2 表示2行合并
colSpan=4 表示4列合并
★ 表格里的文字大小、颜色、连接要不要 都可以自己设定~!
表格样式及代码总汇
序号 | 样式 | 代码 | |
001 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1> </TR></TBODY></TABLE> |
|
002 |
|
<TABLE style="BORDER-RIGHT: #333333 1px dashed; BORDER-TOP: #333333 1px dashed; BORDER-LEFT: #333333 1px dashed; BORDER-BOTTOM: #333333 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1> </TR></TBODY></TABLE> |
|
003 |
|
<TABLE style="BORDER-RIGHT: #333333 2px dotted; BORDER-TOP: #333333 2px dotted; BORDER-LEFT: #333333 2px dotted; BORDER-BOTTOM: #333333 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=2> </TR></TBODY></TABLE> |
|
004 |
|
<TABLE borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=3> </TR></TBODY></TABLE> |
|
005 |
|
<TABLE style="BORDER-RIGHT: #00f901 10px groove; BORDER-TOP: #00f901 10px groove; BORDER-LEFT: #00f901 10px groove; BORDER-BOTTOM: #00f901 10px groove; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10> </TR></TBODY></TABLE> |
|
006 |
|
<TABLE style="BORDER-RIGHT: #00f901 10px ridge; BORDER-TOP: #00f901 10px ridge; BORDER-LEFT: #00f901 10px ridge; BORDER-BOTTOM: #00f901 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10> </TR></TBODY></TABLE> |
|
007 |
|
<TABLE style="BORDER-RIGHT: #00f901 10px inset; BORDER-TOP: #00f901 10px inset; BORDER-LEFT: #00f901 10px inset; BORDER-BOTTOM: #00f901 10px inset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10> </TR></TBODY></TABLE> |
|
008 |
|
<TABLE style="BORDER-RIGHT: #00f901 10px outset; BORDER-TOP: #00f901 10px outset; BORDER-LEFT: #00f901 10px outset; BORDER-BOTTOM: #00f901 10px outset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10> </TR></TBODY></TABLE> |
|
009 |
|
<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2> </TR></TBODY></TABLE> |
|
010 |
|
<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=#ffffff border=2> </TR></TBODY></TABLE> |
|
011 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0> </TR></TBODY></TABLE> |
二、不完整边框的表格样式
不完整边框的表格可分为11种:隐藏下边框的表格、隐藏上边框的表格、隐藏左边框的表格、隐藏右边框的表格、隐藏左右边框的表格、隐藏上下边框的表格、只显示上边框的表格、只显示下边框的表格、只显示左边框的表格、只显示右边框的表格、无边框的表格。具体样式及代码如下:
序号 | 样式 | 代码 | |
001 |
|
<TABLE style="BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1> </TR></TBODY></TABLE> |
|
002 |
|
<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1> </TR></TBODY></TABLE> |
|
003 |
|
<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1> </TR></TBODY></TABLE> |
|
004 |
|
<TABLE style="BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1> </TR></TBODY></TABLE> |
|
005 |
|
<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1> </TR></TBODY></TABLE> |
|
006 |
|
<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1> </TR></TBODY></TABLE> |
|
007 |
|
<TABLE borderColor=#111111 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=above> </TR></TBODY></TABLE> |
|
008 |
|
<TABLE borderColor=#111111 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=below> </TR></TBODY></TABLE> |
|
009 |
|
<TABLE borderColor=#111111 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=lhs> </TR></TBODY></TABLE> |
|
010 |
|
<TABLE borderColor=#111111 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=rhs> </TR></TBODY></TABLE> |
|
011 |
|
<TABLE borderColor=#111111 cellSpacing=0 cellPadding=0 width=250 align=center bgColor=#fffbec border=1 frame=void> </TR></TBODY></TABLE> |
三、不同结构的表格样式
表格按其结构不同可分为:单行单列表格、一行多列表格、一列多行表格、多行多列表格、合并列的表格、合并行的表格、复杂表格、隐藏横向分隔线表格、隐藏纵向分隔线表格、隐藏纵横分隔线表格等十种。具体样式及代码如下:
序号 | 样式 | 代码 | ||||||||||||||||||||
001 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1> </TR></TBODY></TABLE> |
||||||||||||||||||||
002 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1> </TR></TBODY></TABLE> |
||||||||||||||||||||
003 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1> </TR></TBODY></TABLE> |
||||||||||||||||||||
004 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1> </TR></TBODY></TABLE> |
||||||||||||||||||||
005 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1> </TR></TBODY></TABLE> |
||||||||||||||||||||
006 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1> </TR></TBODY></TABLE> |
||||||||||||||||||||
007 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1> </TR></TR></TR></TR> </TR></TBODY></TABLE> |
||||||||||||||||||||
008 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=cols width=300 align=center bgColor=#e1f8ff border=1> </TR></TBODY></TABLE> |
||||||||||||||||||||
009 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=rows width=300 align=center bgColor=#e1f8ff border=1> </TR></TBODY></TABLE> |
||||||||||||||||||||
010 |
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=none width=300 align=center bgColor=#e1f8ff border=1> </TR></TBODY></TABLE> |
四、带标题的表格样式
带标题的表格大致有四种:标题位于表体外的表格、标题位于表体内的表格、标题位于边框上的表格、表中表效果表格。其中后两种表格若改变其属性(如边框颜色、边框样式、加背景颜色等),则表格的边框将由圆角矩形变为直角矩形。具体样式及代码如下:
序号 | 样式 | 代码 | ||
001 |
|
<TABLE width=250 align=center border=0> </TR></TBODY></TABLE> |
||
002 |
|
<TABLE width=250 align=center border=0> </TD></TR> </TR> </TBODY></TABLE> |
||
003 |
<FIELDSET style="WIDTH: 250px" align=center><LEGEND>标题</LEGEND> </DIV></FIELDSET> |
|||
004 |
|
<TABLE cellSpacing=0 cellPadding=0 width=250 align=center> </TR></TBODY></TABLE> |
附:表格常用属性
border:表格的边框宽度。如border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。
cellspacing:表格中各单元格的间距。属性值为数字。当表格只有一个单元格时,则表示该单元格与表格边框的距离。
cellpadding:单元格内容与单元格边框之间的距离,属性值是数字。
width:表格的宽度。属性值为像素和百分比两种。
height:表格的高度。取值方法同width。
bgcolor:表格的背景颜色。属性值为各种颜色代码。
background:表格的背景图案。属性值为有效的图片地址。
bordercolor:表格边框的颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
bordercolorlight:亮边框(表格的左边和上边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
bordercolordark:暗边框(表格的右边和下边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
align:表格的对齐方式。属性值为left(左对齐,默认)、center(居中)以及right(右对齐)。
colspan:定义合并表格的列数。属性值是数字。
rowspan定义合并表格的行数,属性值是数字。
评论