一、表格代码之行列基础
1.一行一列表格
|
一行一列 |
代码如下：
<TABLE borderColor=#0033ff cellSpacing=2 width="92%" align=center bgColor=#ff00ff border=2>
<TBODY>
<TR bgColor=#ddff99 height=50>
<TD><FONT size=4>一行一列</FONT></TD>
</TR></TBODY></TABLE>
2.一行四列表格
|
一行四列 |
一行四列 |
一行四列 |
一行四列 |
代码如下：
<TABLE borderColor=#0033ff cellSpacing=2 width="92%" align=center bgColor=#ff00ff border=2>
<TBODY>
<TR bgColor=#ddff99 height=50>
<TD width=20%><FONT size=4>一行四列</FONT></TD>
<TD width=20%><FONT size=4>一行四列</FONT></TD>
<TD width=20%><FONT size=4>一行四列</FONT></TD>
<TD width=40%><FONT size=4>一行四列</FONT></TD>
</TR></TBODY></TABLE>
3.三行三列表格（可对表格中的文字进行水平对齐和垂直对齐设置）
|
水平居左 垂直居上 |
水平居中 垂直居上 |
水平居右 垂直居上 |
|
水平居左 垂直居中 |
水平居中 垂直居中 |
水平居右 垂直居中 |
|
水平居左 垂直居下 |
水平居中 垂直居下 |
水平居右 垂直居下 |
代码如下：
<TABLE borderColor=#0033ff cellSpacing=2 width="92%" align=center bgColor=#ff0000 border=2>
<TBODY>
<TR bgColor=#ddff99 height=100>
<TD vAlign=up width="33%"><FONT size=4>水平居左 垂直居上</FONT></TD>
<TD vAlign=up align=middle width="34%"><FONT size=4>水平居中 垂直居上</FONT></TD>
<TD vAlign=up align=right width="33%"><FONT size=4>水平居右 垂直居上</FONT></TD></TR>
<TR bgColor=#ddff99 height=100>
<TD width="33%"><FONT size=4>水平居左 垂直居中</FONT></TD>
<TD align=middle width="34%"><FONT size=4>水平居中 垂直居中</FONT></TD>
<TD align=right width="33%"><FONT size=4>水平居右 垂直居中</FONT></TD></TR>
<TR bgColor=#ddff99 height=100>
<TD vAlign=bottom width="33%"><FONT size=4>水平居左 垂直居下</FONT></TD>
<TD vAlign=bottom align=middle width="34%"><FONT size=4>水平居中 垂直居下</FONT></TD>
<TD vAlign=bottom align=right width="33%"><FONT size=4>水平居右 垂直居下</FONT></TD></TR>
</TBODY></TABLE>
二、表格代码之合并单元格
1.合并表格第一行单元格
|
合并第一行单元格 |
||
|
单元格4 |
单元格5 |
单元格6 |
|
单元格7 |
单元格8 |
单元格9 |
代码如下：
<TABLE borderColor=#0000ff cellSpacing=2 width="92%" align=center bgColor=#ffffff border=2>
<TBODY>
<TR height=40>
<TD bgColor=#bbbbbb colSpan=3><FONT size=4>合并第一行单元格</FONT></TD></TR>
<TR height=40>
<TD><FONT size=4>单元格4</FONT></TD>
<TD><FONT size=4>单元格5</FONT></TD>
<TD><FONT size=4>单元格6</FONT></TD></TR>
<TR height=40>
<TD><FONT size=4>单元格7</FONT></TD>
<TD><FONT size=4>单元格8</FONT></TD>
<TD><FONT size=4>单元格9</FONT></TD></TR></TBODY></TABLE>
2.合并表格第1、2两个单元格
|
合并第1、2单元格 |
单元格3 |
|
|
单元格4 |
单元格5 |
单元格6 |
|
单元格7 |
单元格8 |
单元格9 |
代码如下：
<TABLE borderColor=#0000ff cellSpacing=2 width="92%" align=center bgColor=#ffffff border=2>
<TBODY>
<TR height=40>
<TD bgColor=#bbbbbb colSpan=2><FONT size=4>合并第1、2单元格</FONT></TD>
<TD><FONT size=4>单元格3</FONT></TD></TR>
<TR height=40>
<TD><FONT size=4>单元格4</FONT></TD>
<TD><FONT size=4>单元格5</FONT></TD>
<TD><FONT size=4>单元格6</FONT></TD></TR>
<TR height=40>
<TD><FONT size=4>单元格7</FONT></TD>
<TD><FONT size=4>单元格8</FONT></TD>
<TD><FONT size=4>单元格9</FONT></TD></TR></TBODY></TABLE>
3.合并表格第4、7单元格
|
单元格1 |
单元格2 |
单元格3 |
|
合并第4、7单元格 |
单元格5 |
单元格6 |
|
单元格8 |
单元格9 |
代码如下：
<TABLE borderColor=#0000ff cellSpacing=2 width="92%" align=center bgColor=#ffffff border=2>
<TBODY>
<TR height=40>
<TD><FONT size=4>单元格1</FONT></TD>
<TD><FONT size=4>单元格2</FONT></TD>
<TD><FONT size=4>单元格3</FONT></TD></TR>
<TR height=40>
<TD width="33%" bgColor=#bbbbbb rowSpan=2><FONT size=4>合并第4、7单元格</FONT></TD>
<TD><FONT size=4>单元格5</FONT></TD>
<TD><FONT size=4>单元格6</FONT></TD></TR>
<TR height=40>
<TD><FONT size=4>单元格8</FONT></TD>
<TD><FONT size=4>单元格9</FONT></TD></TR></TBODY></TABLE>