onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'"
如何利用表格實現畫中畫，也就是頁中頁效果？
網頁的排版大多使用表格，利用一個表單元可以嵌入一個網頁，你知道嗎？這樣做有很多好處，比如你把經常更新的區域劃分一個表格單元，然后在這個表格單元中嵌入你想要更新的內容，今后更新主頁只需上傳這個被嵌套的頁面就可以了，沒有必要對首頁進行更新，是不是很方便。我寫個最簡單的例子代碼：
<html>
<head>
<title>范例</title>
<body>
<table border="1" width="100%">
<tr>
<td>
<IFRAME src="example.htm" width="300" heitht="100"></IFRAME>
</td>
</tr>
</table>
</body>
</html>
插入被嵌入頁的關鍵代碼是：<IFRAME src="example.htm" width="300" heitht="100"></IFRAME>。example.htm是被嵌入的頁面，標簽<IFRAME>還有一些可用的參數設置如下：
marginwidth:網頁中內容在表格右側的預留寬度；例如：marginwidth="20"，單位是pix，下同。
marginheight:網頁中內容在表格頂部預留的高度；
hspace:網頁右上角的的橫坐標；
vspace:網頁右上角的縱坐標；
frameborder:是否顯示邊緣；填"1"表示"是"，填"0"表示"否"
scrolling:是否出現滾動條；填"1"表示"是"，填"0"表示"否"
表格是網頁內應用較多的東東，但一般我們只是用它來定位網頁中的模塊和排版文字。其實表格用好了還可以做出很多漂亮的效果，如圖一，承載文字的表格有一種看似立體的感覺。下面就來介紹一下這種立體表格的制作方法。
圖一
表格有立體的感覺的全是因為在表格的右邊和下邊有淺黑色的陰影。所以我們只要實現了陰影就可以實現這種效果?，F在我們就開始具體講述制作過程。在Frontpage2000中新建一個表格，選擇菜單“表格”-“屬性”-“表格”，在窗口內將表格的寬度設置為150象素；高度設置為200象素；邊框粗細設置為0；將單元格邊距設置為0，而單元格間距為1，如圖二所示。
圖二
完成以上設置后將表格的背景色設置為黑色，但表格內的單元格的背景色設置為白色，完成以后就回出現如圖三所示的單象素黑色邊框效果。
圖三
接下來的工作就是要為右邊和下邊的黑色邊框制作陰影，我們使用CSS樣式的功能來實現。在圖二所示的選項窗口內點擊“樣式”按鈕繼續選擇“格式”-“邊框”。在邊框與陰影選項框內，分別將樣式選擇為“實線”；顏色選擇為“灰色”；并在預覽選項內將下邊和右邊的邊框應用按鈕選中，如圖四所示。
圖四
點擊“預覽”，你要的立體表格效果就出來了。(注明：我們在制作出來的最終效果可能和圖一所示略有出入，這是因為我們首先制作出了如圖三的單象素黑色邊框，這樣做的效果會更明顯，更有立體感。)
在這里我們還給出在Dreamweaver內定義的樣式代碼，因為Frontpage和Dreamweaver的代碼機制有差別，相對之下Dreamweaver對樣式代碼寫得更規范更合理。表格代碼如下：
| <TABLE width="150" height="200" cellpadding="0" cellspacing="1" bgcolor="#000000" style="border-right-width：2px;border-bottom-width ：2px;border-right-style : solid;border-bottom-style : solid;border-right-color : #a7a7a7;border-bottom-color : #a7a7a7;"> |
其中style以后的為樣式代碼“border-right-width”和“border-bottom-width”以后的2px代表陰影邊框的寬度為2象素，border-right-color和border-bottom-color以后的#a7a7a7代表陰影線框的顏色代碼，你也可以使用其他的顏色代碼替換(具體請參照HTML顏色表)。試著自己改變一下，根據你的需要制作效果。
一、創建基本的表格
一個表由＜table＞開始， ＜/table＞結束，表的內容由 ＜tr＞,＜th＞和＜td＞定義。＜tr＞說明表的一個行，表有多少行就有多少個＜tr＞；＜th＞說明表的列數和相應欄目的名 稱，有多少個欄就有多少個＜th＞；＜td＞則填充由＜tr＞和 ＜th＞組成的表格。
表格重要的基本標記不多，但每個標記都有很多的屬性，考慮到一下子把這些屬性都列出來，可能讓初學者感到無從下手，所以我們還是從表格的外觀(即瀏覽器中顯示的表格的樣式)來了解最基本的屬性。
在講解之前，我們先來看看表格的基本構造。 下圖是一個3行3列的表格。
這里面有兩個概念要弄明白：表格與單元格。他們的關系是整體與局部的關系，如同砌墻的磚和砌好的墻一樣。在上面3行3列的表格中一共有9個單元格。由于我們后面將提到的表格屬性和單元格屬性有很多是相同的，所以一定要分清楚。前面已經說過表格的最基本標記為＜table＞、＜tr＞、＜td＞，可以先樹立這樣一個概念：描述整個表格的屬性標記放在＜table＞里，描述單元格的屬性標記放在＜tr＞、＜td＞里。 有這樣一個概念后，我們學習起來就可能簡單些。
1、表格、單元格的大小,表格邊框的寬度、顏色,單元格邊框的顏色
表格以及單元格的大小是用“width=#”和“height=#”屬性說明，“width=#”表示寬，“height=#”表示高，，#是以象素或者百分比為單位的數字。表格邊框的寬度是用“border=#”屬性說明，，#為寬度值，單位是象素，表格邊框的顏色是用“bordercolor="#"屬性說明，#是16進制的6位數，格式為rrggbb，分別表示紅、 綠、蘭三色的分量。或者是16種已定義好的顏色名稱，參見文本顏色，單元格邊框的顏色屬性與表格的相同，但只適用于IE。下面是一個寬為300,高為80,邊框寬為4,邊框顏色為“FF0000”的一行兩列表格，其中第一個單元格的寬為200,高為80，第二個單元格的邊框顏色為“0000FF”。
代碼如下：
＜table border="4" width="300" height="80" bordercolor="#FF0000"＞
＜tr＞
＜td width="200" height="80"＞ ＜/td＞
＜td bordercolor="#0000FF"＞ ＜/td＞
＜/tr＞
＜/table＞
2、表格的水平擺放位置
表格的水平擺放位置是用align="#" 屬性說明的，#為left(左對齊), right(右對齊), center(居中)。分別見下例，注意這三個表格與邊界的位置關系：
第三個表格的代碼如下：
＜table width="80" border="1" align="right" height="30"＞
＜tr＞
＜td＞右對齊＜/td＞
＜/tr＞
＜/table＞
3、單元格里內容的位置屬性
水平對齊方式，用align="#"屬性說明，#為left(左對齊), right(右對齊), center(居中)；垂直對齊方式，用valign="#"屬性說明，#為top(上對齊), bottom(下對齊), middle(居中)。分別見下例，注意單元格里的內容與邊框的的位置關系：
水平對齊方式：
代碼如下：
＜table width="450" border="1"＞
＜tr＞
＜td width="150"＞
＜div align="left"＞內容左對齊＜/div＞
＜/td＞
＜td width="150"＞
＜div align="center"＞內容居中＜/div＞
＜/td＞
＜td＞
＜div align="right"＞內容右對齊＜/div＞
＜/td＞
＜/tr＞
＜/table＞
垂直對齊方式
代碼如下：
＜table width="150" border="1"＞
＜tr＞
＜td height="40" width="146" valign="top"＞內容上對齊＜/td＞
＜/tr＞
＜tr＞
＜td height="40" width="146" valign="middle"＞內容居中＜/td＞
＜/tr＞
＜tr＞
＜td height="40" width="146" valign="bottom"＞內容下對齊＜/td＞
＜/tr＞
＜/table＞
4、表格的背景色、背景圖片，單元格的背景色、背景圖片
背景色屬性：bgcolor="#" ，背景圖片屬性：background="#"。
見下例：
代碼如下：
＜table width="450" border="1" bgcolor="#539996" bordercolor="#FFFFFF" height="90"＞
＜tr＞
＜td＞ ＜/td＞
＜td background="Back01.gif"＞ ＜/td＞
＜/tr＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜tr＞
＜td bgcolor="#FF0000"＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
說明：在上例中，整個表格的背景色是 bgcolor="#539996" ，第一行第二列的單元格背景圖片是 background="Back01.gif" ，第三行第二列的單元格背景色是 bgcolor="#FF0000" ,根據顯示結果可以看出：設置表格的背景色后再設置單元格的背景色或背景圖片，將優先顯示單元格的屬性。
5、表格屬性cellspacing、cellpadding
5、表格屬性cellspacing、cellpadding
cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數值是數字，表示單元格間隙所占的像素點數。
我們來看下面的兩個表格：
上面第一個表格的單元格之間沒有空白距離，而第二個的單元格之間有很大的空白距離，我們來比較一下他們的源代碼：
第一個表格的代碼：
＜table width="200" cellspacing="0" border="1" bordercolor="#000000"＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
第二個表格的代碼：
＜table width="200" cellspacing="8" border="1" bordercolor="#000000"＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
比較代碼，上邊兩個表格中只有
cellspacing 的設置不同，一個為“0”，一個為“8”，顯示的結果就是第一個表格的每個單元格之間的距離為0(在本例中由于我們為了顯示的方便，將表格邊框設為“1”，所以單元格的真實距離是“2”，若將表格邊框設為“0”，則單元格 的距離就是0了，第二個單元格同理)，第二個表格的每個單元格之間的距離為8。
cellpadding屬性用來指定
單元格內容與單元格邊界之間的空白距離的大小。此屬性的參數值也是數字，表示單元格內容與上下邊界之間空白距離的高度所占像素點數以及單元格內容與左右邊界之間空白距離的寬度所占的像素點數。我們先來看看這個例子:
我們來看下面兩個表格：
第一個表格單元格的內容與單元格邊界之間沒有空白距離，而第二個表格單元格的內容與單元格邊界之間有空白距離，我們來比較一下他們的源代碼：
第一個表格的代碼：
＜table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="０"＞
＜tr＞
＜td width="120"＞網頁陶吧＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
第二個表格的代碼：
＜table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="15"＞
＜tr＞
＜td width="120"＞網頁陶吧＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
兩個表格只有紅色部分代碼不同。第一個表格中"網頁陶吧"這幾個字離它所在的單元格為0,那是因為設置了cellpadding="0"的原因.第一個表格中的"網頁陶吧"這幾個字離它所在的單元格比較遠，那是因為cellpadding="15",也就是說"網頁陶吧"離它所在的單元格的邊界的距離為20像素。簡單的說,cellpadding的值等于多少,那表格內的單元格從自身邊界開始向內保留多少空白,單元格里的元素永遠都不會進入那些空白里。
我們在以后的篇幅中會大量用到這兩個屬性，所以請大家不要弄混亂了, 為了形象的理解，請參考下圖：
（一）表格基本語句格式
<TABLE>...</TABLE> —— 表格指令
<TR>...</TR> —— 表格行
<TD>...</TD> —— 表格欄
<TBODY>...</TBODY> —— 表格主體部分
<CAPTION>...</CAPTION> —— 表格標題
<TH>...</TH> —— 表格欄標題（粗體字）
這五個表格基本語句是構成一個表格的骨架，其中<Table>、<TR>、<TD>是最重要的標記，學會這三個語句就已經能畫出一個完整的表格了。請看下面這個簡單的例子。
語句：
<TABLE border>
<CAPTION>收支表</CAPTION>
<TBODY>
<TR> <TH>公司</TH> <TH>收入</TH> <TH>支出</TH> </TR>
<TR> <TD>A</TD> <TD>￥100000</TD> <TD>￥60000</TD> </TR>
</TBODY> </TABLE>
效果：
收支表
| 公司 |
收入 |
支出 |
| A |
￥100000 |
￥60000 |
（二）表格相關屬性
1、<TABLE>語句常用屬性
示范語句：
<table width="50%" rules="ALL" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="background.gif" bgcolor="#0000FF" bordercolor="#FF00FF" hspace="10" vspace="10">
具體說明：
- width="50%"，表格寬度，接受絕對值（如 300）及相對值（如 80%）。
- rules="ALL"，表格內網格，可選值為： all，none，cols，rows，groups。
- border="1"，表格邊框寬度，如果去掉這個屬性，就生成無邊框表格。
- cellspacing="2"，表格內格線寬度，數值越大，格線越粗。
- cellpadding="2"，文字與格線間距，數值越大，間距越大。
- align="CENTER"，表格的擺放位置（水平），可選值為： left, right, center。
- valign="TOP"，表格內圖文的擺放位置（垂直），可選值為： top, middle, bottom。
- background="background.gif"，表格內背景圖案，不要與 bgcolor 同用。
- bgcolor="#0000FF"，表格背景色，不要與 background 同用。
- bordercolor="#FF00FF"，表格邊框顏色。
-
hspace="10"，表格邊框與環繞文字間水平距離，數值越大，間距越大。
-
vspace="10"，表格邊框與環繞文字間垂直距離，數值越大，間距越大。
-
其他表格屬性，因為有些不是很常用，或者有些對瀏覽器類型有要求，并未列出。
2、<TR>語句常用屬性
示范語句：
<tr align="RIGHT" valign="MIDDLE" background="background.gif" bgcolor="#0000FF" bordercolor="#FF00FF">
具體說明：
3、<TD>語句常用屬性
示范語句：
<td width="50%" height="300" colspan="2" rowspan="3" align="LEFT" valign="BOTTOM" background="background.gif" bgcolor="#FF00FF" bordercolor="#808080">
具體說明：
- width="50%"，單元格寬度，接受絕對值（如 300）及相對值（如 50%）。
- height="300"，單元格高度，接受絕對值（如 300）及相對值（如 50%）。
- colspan="2"，單元格向右合并欄數，只需寫在合并起始單元格中。
- rowspan="3"，單元格向下合并欄數，只需寫在合并起始單元格中。
- align="LEFT"，單元格內文字的擺放位置（水平），可選值為： left, right, center。
- valign="BOTTOM"，單元格內圖文的擺放位置（垂直），可選值為： top, middle, bottom。
- background="background.gif"，單元格內背景圖案，不要與 bgcolor 同用。
- bgcolor="#0000FF"，單元格內背景色，不要與 background 同用。
- bordercolor="#FF00FF"，單元格內邊框顏色。
- 其他單元格屬性，因為有些不是很常用，或者有些對瀏覽器類型有要求，并未列出。
（三）表格簡單的例子
1、去掉<Table>中的 Border 參數即可得到無邊框表格。
語句：
<TABLE>
<CAPTION>收支表</CAPTION>
<TBODY>
<TR> <TH>公司</TH> <TH>收入</TH> <TH>支出</TH> </TR>
<TR> <TD>A</TD> <TD>￥100000</TD> <TD>￥60000</TD> </TR>
</TBODY> </TABLE>
效果：
收支表
| 公司 |
收入 |
支出 |
| A |
￥100000 |
￥60000 |
2、通過 Border、BorderColor，改變表格邊框的大小與顏色。
語句：
<TABLE border=9 bordercolor=green>
<TBODY>
<TR> <TH>公司</TH> <TH>收入</TH> <TH>支出</TH> </TR>
<TR> <TD>A</TD> <TD>￥100000</TD> <TD>￥60000</TD> </TR>
</TBODY> </TABLE>
效果：
| 公司 |
收入 |
支出 |
| A |
￥100000 |
￥60000 |
3、通過 Cellspacing 還可以調節單元格間距離。
語句：
<TABLE border=9 cellspacing=6>
<TBODY>
<TR> <TH>公司</TH> <TH>收入</TH> <TH>支出</TH> </TR>
<TR> <TD>A</TD> <TD>￥100000</TD> <TD>￥60000</TD> </TR>
</TBODY> </TABLE>
效果：
| 公司 |
收入 |
支出 |
| A |
￥100000 |
￥60000 |
4、ColSpan 與 RowSpan 的使用。
語句：
<TABLE border=2 bordercolor=black>
<TBODY>
<TR> <TH>公司</TH> <TH colspan=2>收支</TH> <TH rowspan=2>盈利 !</TH> </TH>
<TR> <TD>A</TD> <TD>￥100000</TD> <TD>￥60000</TD> </TR>
</TBODY> </TABLE>
效果：
| 公司 |
收支 |
盈利 ! |
| A |
￥100000 |
￥60000 |
import java.io.*;
import java.util.*;
public class MyServlet extends HttpServlet{
private String target="/hello.jsp";
public void init (ServletConfig config)throws ServletException
{super.init(config);}
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServleException ,IOException
{ doPost(request,response); }
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServleException ,IOException{
String username =request.getParameter("username");
String password =request.getParameter("password");
request.setAttribute("USER",username);
request.setAttribute("PASSWORD",password);
ServletContext context=getServletContext();
System.out.println("Redirecting to"+target);
RequestDispatcher myservlet=context.getRequestDispatcher(target);
myservlet.forward(request,response);
}
public void destroy(){};
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>melody的小屋</title>
<style type="text/css">
<!--
.STYLE1 {
font-size: x-large;
font-weight: bold;
font-family: "宋體";
}
-->
</style>
</head>
<body>
<center>
<p>
<h1>歡迎來到melody的小屋</h1>
<p><a href="login.html">點擊進入</a></p>
</body>
</html>
<%@ page language="java" import="java.lang.*,java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>myapp</title>
</head>
<body>
<br>
<form id="loginForm" name="loginForm" method="post" action="myservlet">
<div align="center">
<table width="100%" >
<tr>
<td width="50%"> <div align="right">用戶名</div></td>
<td width="50%"><div align="left"><input name="username" type="text" id="username" /></div></td>
</tr>
<tr>
<td width="50%">
<div align="right">密 碼</div></td>
<td width="50%"><div align="left"><input name="password" type="password" id="password" /></div> </td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<input name="Submit" type="submit" id="Submit" value="確定" />
</div> </td>
</tr>
</table>
</form>
<p> </p>
<p> </p>
</body>
</html>
問題1：第一行代碼的作用 出現情況，在網頁上顯示出來了，經檢查發現，<%@ %>后面的%忘記寫了
問題2：為啥先添了個表單，然后里面插入個表格，在每次輸入之前 都有一個div設置
問題3：用戶名 密碼 不能對齊，在設計面板上 我想在密碼中間打個空格，可是打不動，后來是在代碼欄里，加了好多
應該說，PDF文檔的規范性使得瀏覽者在閱讀上方便了許多，但倘若要從里面提取些資料，實在是麻煩的可以?；貞浧甬敵踝霎厴I設計時規定的英文翻譯，痛苦的要命，竟然傻到用Print Screen截取畫面到畫圖板，再回粘到word中，夠白了：（最近連做幾份商務標書，從Honeywell本部獲取的業績資料全部是英文版的PDF，為了不再被折磨，花費了一個晚上的時間研究PDF和Word文件的轉換，找到下面2種方法，出于無產階級所謂的同甘共苦之心，共享下：）
1、實現工具：Office 2003中自帶的Microsoft Office Document Imaging
應用情景：目前國外很多軟件的支持信息都使用PDF方式進行發布，如果沒有Adobe Reader，無法查看其內容，如果沒有相關的編輯軟件又無法編輯PDF文件。轉換為DOC格式則可以實現編輯功能。盡管有些軟件也可以完成PDF轉換為DOC的工作，但很多都不支持中文，我們利用Office 2003中的Microsoft Office Document Imaging組件來實現這一要求最為方便。
使用方法：
第一步：首先使用Adobe Reader打開待轉換的PDF文件，接下來選擇“文件→打印”菜單，在打開的“打印”設置窗口中將“打印機”欄中的“名稱”設置為“Microsoft Office Document Image Writer”，確認后將該PDF文件輸出為MDI格式的虛擬打印文件。
編輯提示：如果你在“名稱”設置的下拉列表中沒有找到“Microsoft Office Document Image Writer”項，那證明你在安裝Office 2003的時候沒有安裝該組件，請使用Office 2003安裝光盤中的“添加/刪除組件”更新安裝該組件。
第二步：運行Microsoft Office Document Imaging，并利用它來打開剛才保存的MDI文件，選擇“工具→將文本發送到Word”菜單，并在彈出的窗口中勾選“在輸出時保持圖片版式不變”，確認后系統提示“必須在執行此操作前重新運行OCR。這可能需要一些時間”，不管它，確認即可。
編輯提示：目前，包括此工具在內的所有軟件對PDF轉DOC的識別率都不是特別完美，而且轉換后會丟失原來的排版格式，所以大家在轉換后還需要手工對其進行后期排版和校對工作。
2、實現工具：Solid Converter PDF
應用情景：利用Office 2003中的Microsoft Office Document Imaging組件來實現PDF轉Word文檔在一定程度上的確可以實現PDF文檔到Word文檔的轉換，但是對于很多“不規則”的PDF文檔來說，利用上面的方法轉換出來的Word文檔中常常是亂碼一片。為了恢復PDF的原貌，推薦的這種軟件可以很好地實現版式的完全保留，無需調整，而且可以調整成需要的樣板形式。
使用方法：
1、下載安裝文件Solid Converter PDF,點擊安裝。
編輯提示：安裝前有個下載安裝插件的過程，因此需要保證網絡連接通暢。
2、運行軟件，按工具欄要求選擇需要轉換的PDF文檔，點擊右下的“轉換”（Convert）按扭，選擇自己需要的版式，根據提示完成轉換。