[英]html: Too much white space in table
I am trying to write a jsp that will show the errors for a form, however I can't seem to format it properly. 我正在尝试编写一个将显示表单错误的jsp,但是我似乎无法正确设置其格式。 I tried to add a table in one of the cells, which made it look a bit better, but it still doesn't look clean.
我试图在其中一个单元格中添加一张表,这使它看起来更好一些,但看起来仍然不干净。 This is my code.
这是我的代码。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 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> <h1 align="center">Sign Up</h1> <h3 align="center">Please fill in the following form to create your account.</h3> <form action="SignupCheck" method="post"> <table border="1" align=center width="500"> <tr> <td width="250"><p align="center">Full Legal Name:</p></td> <td align="center"><input type="text" name="name"></td> </tr> <tr> <td width="250"><p align="center">Username:</p> <td align="center"><input type="text" name="username"></td> </tr> <tr> <td width="250"><p align="center">Password:</p></td> <td align="center"><input type="password" name="password"></td> </tr> <tr> <td width="250"><p align="center">Confirm Password:</p></td> <td align="center"><input type="password" name="confirmPassword"></td> </tr> <tr> <td width="250"><p align="center">Starting Balance:</p></td> <td> <table align="center"> <tr> <td align="center"><input type="text" name="balance"></td> </tr> <tr> <td align="center"><p align="center" style="color: red; font-size: 18px">Please enter your password</p></td> </tr> </table> </td> </tr> <tr> <td width="250" align="right"><input type="reset" value="Reset"></td> <td align="left"><input type="submit" value="Submit"></td> </tr> </table> </form> </body> </html>
As you see I placed a sample error and the Textbox is too high and the error message takes up too much space... 如您所见,我放置了一个示例错误,并且文本框太高,错误消息占用了太多空间...
Add the following as CSS: 将以下内容添加为CSS:
td {
padding: 5px 5px 5px 5px
}
p {
text-align:right;
}
table {
border: solid lightgray;
border-radius: 10px;
}
Here is the JSFiddle demo 这是JSFiddle演示
Also note that I modified the HTML code, removing the sub-table you added. 还要注意,我修改了HTML代码,删除了添加的子表。 Please have a look at the JSFiddle for the full code.
请查看JSFiddle的完整代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.