Use a table to adjust the format of the form controls to make them look better

Use a table to adjust the format of the form controls to make them look better
Because I want to write a web page myself, I am also learning some things about HTML language. This reminds me of my interest in web design in college. Unfortunately, I didn’t have my own computer at that time. I often went to Internet cafes to buy floppy disks to download some pictures, and then used fontpage to make some web pages. Later, I bought a computer and was fascinated by "Legend", and I also forgot about web design....

Since I was working on Ubuntu, and there were very few WYSIWYG web design tools under Linux, I finally chose Bluefish.

I want to make a form to add devices, but it looks ugly because the prefixes are 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>
Username:<input type="text" name="username"><br/>
Password:<input type="password" name="password">
</body>
</html>



This input box is not aligned, I feel so sad, then my colleague said that I can use a table to format it, after asking for advice, 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>Username:</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>



Ahaha, I got a new skill. Thanks to Tong Jun for his strong support~~

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

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>

<<:  How to deploy kafka in docker

>>:  Docker starts MySQL configuration implementation process

Recommend

Solution to the conflict between two tabs navigation in HTML

Let's start with a description of the problem...

Linux CentOS 6.5 Uninstall, tar and install MySQL tutorial

Uninstall the system-provided MySQL 1. Check whet...

Calculation of percentage value when the css position property is absolute

When position is absolute, the percentage of its ...

Detailed explanation of mktemp, a basic Linux command

mktemp Create temporary files or directories in a...

Detailed graphic explanation of how to clear the keep-alive cache

Table of contents Opening scene Direct rendering ...

HTML table markup tutorial (6): dark border color attribute BORDERCOLORDARK

In a table, you can define the color of the lower...

Recommend several MySQL related tools

Preface: With the continuous development of Inter...

A brief introduction to MySQL database optimization techniques

A mature database architecture is not designed wi...

HTML form tag tutorial (5): text field tag

<br />This tag is used to create a multi-lin...

IE6 web page creation reference IE6 default style

This is not actually an official document of IE. I...

Navicat for MySQL scheduled database backup and data recovery details

Database modification or deletion operations may ...

How to set up the terminal to run applications after Ubuntu starts

1. Enter start in the menu bar and click startup ...

Two query methods when the MySQL query field type is json

The table structure is as follows: id varchar(32)...

Detailed explanation of the three major front-end technologies of React, Angular and Vue

Table of contents 1. React Basic Usage Notable Fe...

Example code for CSS to achieve image zooming effect and slow transition effect when the mouse moves in

transform:scale() can achieve proportional zoomin...