第一部分:一行多列
一、1行2列居中均分
1、效果
表格内容 | 表格内容 |
2、代码:
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容1</DIV></TD>
<TD>
<DIV align=center>表格内容2</DIV></TD>
</TR></TBODY></TABLE></DIV>
二、1行3列居中均分
1、效果
表格内容1 | 表格内容2 | 表格内容3 |
2、代码
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容1</DIV></TD>
<TD>
<DIV align=center>表格内容2</DIV></TD>
<TD>
<DIV align=center>表格内容3</DIV></TD>
</TR></TBODY></TABLE></DIV>
三、1行4列居中均分
1、效果
表格内容1 | 表格内容2 | 表格内容3 | 表格内容4 |
2、代码
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容1</DIV></TD>
<TD>
<DIV align=center>表格内容2</DIV></TD>
<TD>
<DIV align=center>表格内容3</DIV></TD>
<TD>
<DIV align=center>表格内容4</DIV></TD>
</TR></TBODY></TABLE></DIV>
四、小结
通过以上演示,我们以1行4列来简要说明(其实,我还有一些技术问题没有全面解决,就装一次吧)。细心的朋友会发现,这是一套固定的搭配,每增加一列,只要增加:
<TD>
<DIV align=center>表格内容4</DIV></TD>
就可以了,可以根据需要无限的增加。这是最重要的,其他什么不知道都行,会用就可以了,就这么简单。不过,其中的要点是数字和颜色可以变化,其他不许动。
第二部分:多行2列
一、2行2列居中均分
1、效果
表格内容11 | 表格内容12 |
表格内容21 | 表格内容22 |
2、代码
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
</TR></TBODY></TABLE></DIV>
二、3行2列居中均分
1、效果
表格内容11 | 表格内容12 |
表格内容21 | 表格内容22 |
表格内容31 | 表格内容32 |
2、代码
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>
</TR></TBODY></TABLE></DIV>
三、4行2列居中均分
1、效果
表格内容11 | 表格内容12 |
表格内容21 | 表格内容22 |
表格内容31 | 表格内容32 |
表格内容41 | 表格内容42 |
2、代码
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>
</TR></TBODY></TABLE></DIV>
四、小结
通过第二部分演示,我们以4行2列来简要说明。请再细心观察一下,会发现颜色的变化的意义,每一种颜色的代码表示增加一行:也就是每增加一列,只要增加:
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>
就可以了,其他不许动,可无限增加行。
第三部分:多行3列
一、2行3列居中均分
1、效果
表格内容11 | 表格内容12 | 表格内容13 |
表格内容21 | 表格内容22 | 表格内容23 |
2、代码
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TD>
<DIV align=center>表格内容13</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TD>
<DIV align=center>表格内容23</DIV></TD>
</TR></TBODY></TABLE></DIV>
二、3行3列居中均分
1、效果
表格内容11 | 表格内容12 | 表格内容13 |
表格内容21 | 表格内容22 | 表格内容23 |
表格内容31 | 表格内容32 | 表格内容33 |
2、代码
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TD>
<DIV align=center>表格内容13</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TD>
<DIV align=center>表格内容23</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>
<TD>
<DIV align=center>表格内容33</DIV></TD>
</TR></TBODY></TABLE></DIV>
三、4行3列居中均分
1、效果
表格内容11 | 表格内容12 | 表格内容13 |
表格内容21 | 表格内容22 | 表格内容23 |
表格内容31 | 表格内容32 | 表格内容33 |
表格内容41 | 表格内容42 | 表格内容43 |
2、代码
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TD>
<DIV align=center>表格内容13</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TD>
<DIV align=center>表格内容23</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>
<TD>
<DIV align=center>表格内容33</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>
<TD>
<DIV align=center>表格内容43</DIV></TD>
</TR></TBODY></TABLE></DIV>
四、小结
通过第三部分演示,我们以4行3列来说明。请再细心观察颜色的变化的意义,每一种颜色的代码表示增加一行:也就是每增加一行,只要增加:
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>
<TD>
<DIV align=center>表格内容43</DIV></TD>
第四部分:多行多列
一、4行4列
1、效果
表格内容11 | 表格内容12 | 表格内容13 | 表格内容14 |
表格内容21 | 表格内容22 | 表格内容23 | 表格内容24 |
表格内容31 | 表格内容32 | 表格内容33 | 表格内容34 |
表格内容41 | 表格内容42 | 表格内容43 | 表格内容44 |
2、代码
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TD>
<DIV align=center>表格内容13</DIV></TD>
<TD>
<DIV align=center>表格内容14</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TD>
<DIV align=center>表格内容23</DIV></TD>
<TD>
<DIV align=center>表格内容24</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>
<TD>
<DIV align=center>表格内容33</DIV></TD>
<TD>
<DIV align=center>表格内容34</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>
<TD>
<DIV align=center>表格内容43</DIV></TD>
<TD>
<DIV align=center>表格内容44</DIV></TD>
</TR></TBODY></TABLE></DIV>
二、5行5列
1、效果
表格内容11 | 表格内容12 | 表格内容13 | 表格内容14 | 表格内容15 |
表格内容21 | 表格内容22 | 表格内容23 | 表格内容24 | 表格内容25 |
表格内容31 | 表格内容32 | 表格内容33 | 表格内容34 | 表格内容35 |
表格内容41 | 表格内容42 | 表格内容43 | 表格内容44 | 表格内容45 |
表格内容51 | 表格内容52 | 表格内容53 | 表格内容54 | 表格内容55 |
2、代码
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TD>
<DIV align=center>表格内容13</DIV></TD>
<TD>
<DIV align=center>表格内容14</DIV></TD>
<TD>
<DIV align=center>表格内容15</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TD>
<DIV align=center>表格内容23</DIV></TD>
<TD>
<DIV align=center>表格内容24</DIV></TD>
<TD>
<DIV align=center>表格内容25</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>
<TD>
<DIV align=center>表格内容33</DIV></TD>
<TD>
<DIV align=center>表格内容34</DIV></TD>
<TD>
<DIV align=center>表格内容35</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>
<TD>
<DIV align=center>表格内容43</DIV></TD>
<TD>
<DIV align=center>表格内容44</DIV></TD>
<TD>
<DIV align=center>表格内容45</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容51</DIV></TD>
<TD>
<DIV align=center>表格内容52</DIV></TD>
<TD>
<DIV align=center>表格内容53</DIV></TD>
<TD>
<DIV align=center>表格内容54</DIV></TD>
<TD>
<DIV align=center>表格内容55</DIV></TD>
</TR></TBODY></TABLE></DIV>
四、小结
通过第四部分演示,我们细心观察颜色的变化来确定增加行与列的意义。如下这组粉色代码表示1行5列的意思,其中:每出现一次<TR bgColor=#ffffff height=20>,就增加了一行的含义,
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容51</DIV></TD>
<TD>
<DIV align=center>表格内容52</DIV></TD>
<TD>
<DIV align=center>表格内容53</DIV></TD>
<TD>
<DIV align=center>表格内容54</DIV></TD>
<TD>
<DIV align=center>表格内容55</DIV></TD>
每出现一个如下代码:
<TD>
<DIV align=center>表格内容55</DIV></TD>
表示增加一列 。其他的就无所谓了。表格中的内容可链接地址。
评论