html：表中的空白太多

我正在尝试编写一个将显示窗体错误的jsp，但是我似乎无法正确格式化它。我试图在其中一个单元格中添加一个表格，这使得它看起来更好一些，但它看起来还不够干净。这是我的代码。html：表中的空白太多

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
 
\t pageEncoding="ISO-8859-1"%> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
<title>New user account</title> 
 
</head> 
 
<body> 
 

 
\t <h1 align="center">Sign Up</h1> 
 
\t <h3 align="center">Please fill in the following form to create 
 
\t \t your account.</h3> 
 
\t <form action="SignupCheck" method="post"> 
 
\t \t <table border="1" align=center width="500"> 
 
\t \t \t <tr> 
 
\t \t \t \t <td width="250"><p align="center">Full Legal Name:</p></td> 
 
\t \t \t \t <td align="center"><input type="text" name="name"></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td width="250"><p align="center">Username:</p> 
 
\t \t \t \t <td align="center"><input type="text" name="username"></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td width="250"><p align="center">Password:</p></td> 
 
\t \t \t \t <td align="center"><input type="password" name="password"></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td width="250"><p align="center">Confirm Password:</p></td> 
 
\t \t \t \t <td align="center"><input type="password" 
 
\t \t \t \t \t name="confirmPassword"></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td width="250"><p align="center">Starting Balance:</p></td> 
 
\t \t \t \t <td> 
 
\t \t \t \t \t <table align="center"> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td align="center"><input type="text" name="balance"></td> 
 

 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td align="center"><p align="center" 
 
\t \t \t \t \t \t \t \t \t style="color: red; font-size: 18px">Please enter your 
 
\t \t \t \t \t \t \t \t \t password</p></td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td width="250" align="right"><input type="reset" value="Reset"></td> 
 
\t \t \t \t <td align="left"><input type="submit" value="Submit"></td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t </form> 
 
</body> 
 
</html>

正如你看到我放在一个样本误差和文本框过高和错误消息占用太多空间...

来源

2015-08-03 Special K

最终你会发现HTML代码的工作原理很可能并且很可能会看起来很可怕。 – insidesin

看看CSS，它会给你负载控制HTML元素的格式，并允许你有一个更小，更干净的HTML。 – GillesC

添加如下CSS：

td { 
    padding: 5px 5px 5px 5px 
} 
p { 
    text-align:right; 
} 
table { 
    border: solid lightgray; 
    border-radius: 10px; 
}

Here is the JSFiddle demo

另请注意，我修改了HTML代码，删除了添加的子表。请查看完整代码的JSFiddle。

来源

2015-08-03 10:47:45

html：表中的空白太多

回答

相关问题