Building a Membership Login Interface with HTML Tables and CSS
Interface Overview
This login interface is constructed using HTML table elements and form tags to create a structured layout for user authentication.
Implementation Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membership Login</title>
<style>
.login-container {
margin: 50px auto;
padding: 0;
}
.login-header {
font-size: 20px;
color: #4d5aa1;
}
.submit-button {
width: 90px;
height: 40px;
}
.link {
color: rgb(56, 152, 56);
}
.link:visited {
color: #9195ab;
}
.link:hover {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<form action="#" method="post" name="loginForm">
<table width="400" height="300">
<tr>
<th colspan="2" class="login-header">Member Login</th>
</tr>
<tr>
<td>Username</td>
<td><input type="text" name="username" placeholder="Email/ID/Phone"></td>
</tr>
<tr>
<td><label for="passwordField">Password</label></td>
<td><input id="passwordField" type="password" name="password" placeholder="Password"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="remember" checked>Remember me for 2 weeks</td>
</tr>
<tr>
<td></td>
<td class="button-section">
<input type="image" src="submit-button.png" class="submit-button">
<a href="#" class="link" target="_blank">Forgot Password?</a>
</td>
</tr>
<tr>
<td>Other Login Methods</td>
<td>
<a href="#" class="link" target="_blank">QQ Login</a>
<a href="#" class="link" target="_blank">Weibo Login</a>
<a href="#" class="link" target="_blank">Baidu Account</a>
</td>
</tr>
<tr>
<td></td>
<td><a href="#" class="link" target="_blank">Not a member? Register now</a></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Code Explanation
-
The structure begins with a
divcontainer that wraps the entire content, followed by aformelement for handling user input, and atableto oragnize the layout. -
The table is organized with rows (
tr) and cells (td), using this basic pattern:
<table>
<tr>
<td>Cell content</td>
</tr>
</table>
Elements such as input fields, labels, and links are placed within the appropriate table cells.
-
Form elements include text inputs for username and password, a checkbox for session persistence, and an image button for submission.
-
CSS styling is applied to center the layout with
margin: 50px auto, and to style links with hover effects. The table structure inherently handles alignment of elements, eliminating the need for additional positioning code.
