高級表格的制作及語法解析
默認分類 2009-12-04 22:53:26 閱讀185 評論1 字號：大中小
高級表格的制作及語法解析
源自:
金鑰匙的
【高級表格的制作及語法解析】表格式樣:
單元格1 “滾動圖” 單元格3
單元格4 單元格5 單元格6 單元格7 單元格8
單元格9 單元格10 單元格11 單元格12 單元格13
單元格14 單元格15 單元格16
“旋轉(zhuǎn)字”
單元格18 單元格19 單元格20 單元格21 單元格22
單元格23 單元格24 單元格25
單元格26 單元格27 單元格28 單元格29 單元格30
單元格31 單元格32 單元格33 單元格34
代 碼 如 下:
<TABLE borderColor=green width="90%" bgColor=#fff000 border=5>
<CAPTION align=bottom><STRONG>高級表格制作</STRONG></CAPTION>
<TBODY>
<TR>
<TH bgColor=blue rowSpan=9>單元格1</TH>
<TD bgColor=red colSpan=5>“滾動圖”</TD>
<TD bgColor=blue rowSpan=9>單元格3</TD></TR>
<TR>
<TD>單元格4</TD>
<TD>單元格5</TD>
<TD>單元格6</TD>
<TD>單元格7</TD>
<TD>單元格8</TD></TR>
<TR>
<TD>單元格9</TD>
<TD bgColor=blue rowSpan=2>單元格10</TD>
<TD>單元格11</TD>
<TD bgColor=blue rowSpan=2>單元格12</TD>
<TD>單元格13</TD></TR>
<TR>
<TD>單元格14</TD>
<TD>單元格15</TD>
<TD>單元格16</TD></TR>
<TR>
<TD bgColor=red colSpan=5>“旋轉(zhuǎn)字”</TD></TR>
<TR>
<TD>單元格18</TD>
<TD bgColor=blue rowSpan=2>單元格19</TD>
<TD>單元格20</TD>
<TD bgColor=blue rowSpan=2>單元格21</TD>
<TD>單元格22</TD></TR>
<TR>
<TD>單元格23</TD>
<TD>單元格24</TD>
<TD>單元格25</TD></TR>
<TR>
<TD>單元格26</TD>
<TD>單元格27</TD>
<TD>單元格28</TD>
<TD>單元格29</TD>
<TD bgColor=blue rowSpan=12>單元格30</TD></TR>
<TR>
<TD>單元格31</TD>
<TD>單元格32</TD>
<TD>單元格33</TD>
<TD>單元格34</TD></TR></TBODY></TABLE>
【語法解析】
1.<TABLE></TABLE>分別作起始標識符 這是定義表格的元素，是表格的“身份證”。網(wǎng)頁中有幾張表格 那就有幾對此元素。
2.<TR></TR> 這是用來定義表格中“行”的元素。即：表格中 行的“身份證”。在表格中有幾對此元素就表示當前表格中有幾行。尾標簽</tr>在后面仍有銜接的<tr>時可以省略
3.<TD></TD>是表示一行中單元格的元素。一行中有幾對此元素，就有幾個單元格。
4.<TD ROWSPAN=x>插入對象</TD>表示在縱向上合并x行；
5.<TD COLSPAN=x>插入對象</TD>表示在水平方向上合并x列
6.bgcolor=red 表格的背景顏色；borderColor=green 表格的邊框顏色
7.<TH>表頭</TH> 定義表頭 表頭內(nèi)容置于<TH>和</TH>之間，顯示時呈粗體字形式
8.<CAPTION > </CAPTION> 建立表格的標題，通過ALIGN屬性定義標題的位置，其屬性有四：即top（在表格上方）、bottom（在表格下方）、left（在表格的左上方）、right（在表格的右上方）。
【分解制作要領(lǐng)】
1 表格某行各列單元格通跨
單元格1
單元格2 單元格3 單元格4
代 碼 如 下:
<TABLE borderColor=green width="60%" bgColor=#fff000 border=2>
<TBODY>
<TR>
<TD bgColor=red colSpan=3>單元格1</TD></TR>
<TR>
<TD>單元格2</TD>
<TD>單元格3</TD>
<TD>單元格4</TD></TR></TBODY></TABLE>
2：只橫跨其中兩列單元格
單元格1 單元格2
單元格3 單元格4 單元格5
代 碼 如 下:
<TABLE borderColor=green width="60%" bgColor=#fff000 border=2>
<TBODY>
<TR>
<TD bgColor=red colSpan=2>單元格1</TD>
<TD>單元格2</TD></TR>
<TR>
<TD>單元格3</TD>
<TD>單元格4</TD>
<TD>單元格5</TD></TR></TBODY></TABLE>
3 縱向跨越三行單元格
單元格1 單元格2 單元格3
單元格4 單元格5
單元格6 單元格7
代 碼 如 下:
<TABLE borderColor=green width="60%" bgColor=#fff000 border=2>
<TBODY>
<TR>
<TD bgColor=red rowSpan=3>單元格1</TD>
<TD>單元格2</TD>
<TD>單元格3</TD></TR>
<TR>
<TD>單元格4</TD>
<TD>單元格5</TD></TR>
<TR>
<TD>單元格6</TD>
<TD>單元格7</TD></TR></TBODY></TABLE>
4 縱向跨越兩行單元格
單元格1 單元格2 單元格3
單元格4 單元格5
單元格6 單元格7 單元格8
代 碼 如 下:
<TABLE borderColor=green width="60%" bgColor=#fff000 border=2>
<TBODY>
<TR>
<TD bgColor=red rowSpan=2>單元格1</TD>
<TD>單元格2</TD>
<TD>單元格3</TD></TR>
<TR>
<TD>單元格4</TD>
<TD>單元格5</TD></TR>
<TR>
<TD>單元格6</TD>
<TD>單元格7</TD>
<TD>單元格8</TD></TR></TBODY></TABLE>
5 橫跨兩列單元格、縱跨兩行單元格
單元格1 單元格2 單元格3
單元格4 單元格5 單元格6 單元格7
單元格8 單元格9 單元格10
代 碼 如 下:
<TABLE borderColor=green width="80%" bgColor=#fff000 border=2>
<TBODY>
<TR>
<TD>單元格1</TD>
<TD>單元格2</TD>
<TD bgColor=red colSpan=2>單元格3</TD></TR>
<TR>
<TD bgColor=blue rowSpan=2>單元格4</TD>
<TD>單元格5</TD>
<TD>單元格6</TD>
<TD>單元格7</TD></TR>
<TR>
<TD>單元格8</TD>
<TD>單元格9</TD>
<TD>單元格10</TD></TR></TBODY></TABLE>
