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：表中的空白太多

回答

相關問題