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
<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">
| Member Login |
|---|
| Username | <input name="username" placeholder="Email/ID/Phone" type="text"></input> |
| <label for="passwordField">Password</label> | <input id="passwordField" name="password" placeholder="Password" type="password"></input> |
| | <input checked="checked" name="remember" type="checkbox"></input>Remember me for 2 weeks |
| | <input class="submit-button" src="submit-button.png" type="image"></input> [Forgot Password?](#) |
| Other Login Methods | [QQ Login](#) [Weibo Login](#) [Baidu Account](#) |
| | [Not a member? Register now](#) |
</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 organize the layout. - The table is organized with rows (
tr) and cells (td), using this basic pattern:
| Cell content |
|---|
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.
