简体   繁体   English

html:表格中的空白过多

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM