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"表示"否"
表格是网页内应用较多的东东，但一般我们只是用它来定位网页中的模块和排版文字。其实表格用好了还可以做出很多漂亮的效果，如图一，承载文字的表格有一种看似立体的感觉。下面就来介绍一下这种立体表格的制作方法。
图一
表格有立体的感觉的全是因为在表格的右边和下边有浅黑色的阴影。所以我们只要实现了阴影就可以实现这种效果。现在我们就开始具体讲述制作过程。在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文档的规范性使得浏览者在阅读上方便了许多，但倘若要从里面提取些资料，实在是麻烦的可以。回忆起当初做毕业设计时规定的英文翻译，痛苦的要命，竟然傻到用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）按扭，选择自己需要的版式，根据提示完成转换。