Using table table to adjust the format of form control to make it look better

Time:2019-12-10

Because I want to write a web by myself, I am also learning some things of HTML language, which reminds me of my interest in webpage design in college, but I didn’t have my own computer at that time, and I often went to the Internet bar to buy a floppy disk to download some pictures, and then used FontPage to make some webpages. Later, I bought a computer, which has always been a mess of “legend” fans and left webpage design behind …

Because it works under Ubuntu, and the WYSIWYG web design under Linux is really poor. Finally, I chose bluefish

If you want to make a form for adding devices, the result is ugly because the prefix size is different. As shown in the figure:

Copy code

The code is as follows:

<!DOCTYPE html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<html>
<body>
User name: < input type = “text” name = “username” > < br / >
Password: < input type = “password” name = “password” >
</body>
</html>

 

This input box is not aligned. I feel so sad. At this time, my colleague at the edge said that we can format it with a table. After consultation, the code is as follows:

Copy code

The code is as follows:

<!DOCTYPE html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<html>
<body>
<table>
<tr>
<td>User name:</td>
<td><input type=”text” name=”username”><br/></td>
</tr>
<tr>
<td>Password:</td>
<td><input type=”password” name=”password”></td>
</tr>
</table>
</body>
</html>

 

Aha, new skill get, thank you Tong Jun for your support~~

It also taught me how to use CSS to control the format of tables

Copy code

The code is as follows:

<style type=”text/css”>
table{border-top:#000 solid 1px; border-left:#000 solid 1px;}
td{ border-bottom:#000 solid 1px; border-right:#000 solid 1px;}
</style>