Html表格制作及实例

Html表格制作及实例  

2011-10-04 21:37:45|  分类： 电脑素材 |  标签：表格   |字号大中小 订阅

简单标准表格：

Html命令：

<table border="1" style="height: 80px;"><tbody>

<tr valign="top"><td>第1行第1列</td><td>第1行第2列</td></tr>

<tr valign="top"><td>第2行第1列</td><td>第2行第2列</td></tr>

<tr valign="top"><td>31</td><td>32</td></tr>

<tr valign="top"><td>41</td><td>42</td></tr>

</tbody></table>

第1行第1列	第1行第2列
第2行第1列	第2行第2列
31	32
41	42

上下合并的表格、并可加表格线颜色：

Html命令：

<div>

<table border="2" bordercolor="#288822" cellpadding="3" cellspacing="2" style="width: 100%;"><tbody>

<tr valign="top"><td rowspan="2"><div>11</div></td><td><div>12</div></td></tr>

<tr valign="top"><td><div>21</div></td></tr>

<tr valign="top"><td><div>31</div></td><td><div>32</div></td></tr>

</tbody></table>

</div>

11	12
	21
31	32

 

左右合并的表格、并可加表格线颜色：

Html命令：

<div>
<table border="2" bordercolor="#288822" cellpadding="3" cellspacing="2" style="width: 100%;"><tbody>
<tr valign="top"><td colspan="2"><div>11 Merge</div></td></tr>
<tr valign="top"><td Style="width: 50%;"><div>21</div></td><td><div>12</div></td></tr>
<tr valign="top"><td><div>31</div></td><td><div>32</div></td></tr>
</tbody></table>
</div>

11 Merge
21	12
31	32

 

 

实例1：

合并格
11	12	13
21	22	23
31	32	33
41	42	43
51	52	53

实例1代码如下：

<div>

<table border="2" bordercolor="#288822" cellpadding="3" cellspacing="2" style="width: 100%;"><tbody>

<tr valign="top"><td colspan="3"><div>合并格</div></td></tr>

<tr valign="top"> <td style="width: 33%;"><div>11</div></td><td style="width: 33%;"><div>12</div></td><td><div>13</div></td></tr>

<tr valign="top"> <td style="width: 33%;"><div>21</div></td><td style="width: 33%;"><div>22</div></td><td><div>23</div></td></tr>

<tr valign="top"> <td style="width: 33%;"><div>31</div></td><td style="width: 33%;"><div>32</div></td><td><div>33</div></td></tr>

<tr valign="top"> <td style="width: 33%;"><div>41</div></td><td style="width: 33%;"><div>42</div></td><td><div>43</div></td></tr>

<tr valign="top"> <td style="width: 33%;"><div>51</div></td><td style="width: 33%;"><div>52</div></td><td><div>53</div></td></tr>

</tbody></table>

</div>

实例2：

合并格
11	12	13
	21	22
31	32	33
	41	42
51	52	53

实例2代码如下：

<div><table border="2" bordercolor="#288822" cellpadding="3" cellspacing="2" style="width: 100%;"><tbody>

<tr valign="top"><td colspan="3"><div>合并格</div></td></tr>

<tr valign="top"> <td rowspan="2" style="width: 33%;"><div>11</div></td><td style="width: 33%;"><div>12</div></td><td><div>13</div></td></tr>

<tr valign="top"> <td style="width: 33%;"><div>21</div></td><td style="width: 33%;"><div>22</div></td></tr>

<tr valign="top"> <td rowspan="2" style="width: 33%;"><div>31</div></td><td style="width: 33%;"><div>32</div></td><td><div>33</div></td></tr>

<tr valign="top"> <td style="width: 33%;"><div>41</div></td><td style="width: 33%;"><div>42</div></td></tr>

<tr valign="top"> <td style="width: 33%;"><div>51</div></td><td style="width: 33%;"><div>52</div></td><td><div>53</div></td></tr>

</tbody></table></div>

实例3：

合并格
11	12	13
		22
	32	33
41	42	43
	51	52

实例3代码如下：

<div>

<table border="2" bordercolor="#288822" cellpadding="3" cellspacing="2" style="width: 100%;"><tbody>

<tr valign="top"><td colspan="3"><div>合并格</div></td></tr>

<tr valign="top"> <td rowspan="3" style="width: 33%;"><div>11</div>

</td><td rowspan="2" style="width: 33%;"><div>12</div></td><td><div>

13</div></td></tr>

<tr valign="top"> <td style="width: 33%;"><div>22</div></td></tr>

<tr valign="top"> <td style="width: 33%;"><div>32</div></td><td style="width: 33%;"><div>33</div></td> </tr>

<tr valign="top"> <td rowspan="2" style="width: 33%;"><div>

41</div></td><td style="width: 33%;"><div>42</div></td> <td style="width: 33%;"><div>43</div></td></tr>

<tr valign="top"> <td style="width: 33%;"><div>51</div></td><td style="width: 33%;"><div>52</div></td></tr>

</tbody></table></div>

 

	11	12	13
	11	12	13
	11	12	13
	11	12	13
	11	12	13
	11	12	13
	11	12	13
	11	12	13

代码如下： 
<TABLE border=10 cellSpacing=0 borderColor=#ff99cc borderColorLight=#c990ff borderColorDark=#a050ff cellPadding=0 width="100%">
<TBODY><TR vAlign=“TOP”><TD rowSpan=8 width=200>
<P align=center><A href="http://classwu1.blog.163.com" target=_blank><IMG style="MARGIN: 0px 10px; FLOAT: none; cssFloat: none" border=0 src="http://image40.360doc.com/DownloadImg/2011/10/2212/18671892_2.jpg"></A></P></TD>
<TD width="25%">11</TD><TD width="25%">12</TD><TD width="25%">13</TD></TR><TR>
<TD width="25%">11</TD><TD width="25%">12</TD><TD width="25%">13</TD></TR>
<TR vAlign=“TOP”><TD width="25%">11</TD><TD width="25%">12</TD><TD width="25%">13</TD></TR>
<TR vAlign=“TOP”><TD width="25%">11</TD><TD width="25%">12</TD><TD width="25%">13</TD></TR>
<TR vAlign=“TOP”><TD width="25%">11</TD><TD width="25%">12</TD><TD width="25%">13</TD></TR>
<TR vAlign=“TOP”><TD width="25%">11</TD><TD width="25%">12</TD><TD width="25%">13</TD></TR>
<TR vAlign=“TOP”><TD width="25%">11</TD><TD width="25%">12</TD><TD width="25%">13</TD></TR>
<TR vAlign=“TOP”><TD width="25%">11</TD><TD width="25%">12</TD><TD width="25%">13</TD></TR></TBODY></TABLE>

代码如下：

<TABLE border=10 cellSpacing=0 borderColor=#ff99cc borderColorLight=#c990ff borderColorDark=#a050ff cellPadding=0 width="100%">
<TBODY><TR vAlign=“TOP”><TD rowSpan=6 width=200>
<P align=center><A href="http://classwu1.blog.163.com/" target=_blank><IMG style="MARGIN: 0px 10px; FLOAT: none; cssFloat: none" title="精美图片欣赏 - classwu - Classwu空间" border=0 alt="精美图片欣赏 - classwu - Classwu空间" src="http://image40.360doc.com/DownloadImg/2011/10/2212/18671892_2.jpg"></A></P></TD>
<TD rowSpan=3 width="25%" middle="top"></TD><TD rowSpan=2 width="25%"></TD><TD width="25%"></TD></TR>
<TR vAlign=“TOP”><TD width="25%"></TD></TR>
<TR vAlign=“TOP”><TD rowSpan=2 width="25%"></TD><TD width="25%"></TD></TR>
<TR vAlign=“TOP”><TD rowSpan=3 width="25%"></TD><TD width="25%"></TD></TR>
<TR vAlign=“TOP”><TD rowSpan=2 width="25%"></TD><TD width="25%"></TD></TR>
<TR vAlign=“TOP”><TD width="25%"></TD></TR>
<TR vAlign=“TOP”><TD width="25%"></TD><TD width="25%"></TD><TD width="25%"></TD><TD width="25%"></TD></TR>
<TR vAlign=“TOP”><TD width="25%"></TD><TD width="25%"></TD><TD width="25%"></TD><TD width="25%"></TD></TR></TBODY></TABLE>

 

 

11	12	13
		23
	22
		33
41	42	43
51