第一步：准备 HTML 结构
我们将使用一个 <table> 作为整个登录框的容器，内部使用 <tr>（表格行）和 <td>（表格单元格）来布局各个元素，如标题、输入框和按钮。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">表格登录界面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<table class="login-table">
<tr>
<td colspan="2">
<h2>用户登录</h2>
</td>
</tr>
<tr>
<td>
<label for="username">用户名:</label>
</td>
<td>
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
</td>
</tr>
<tr>
<td>
<label for="password">密码:</label>
</td>
<td>
<input type="password" id="password" name="password" placeholder="请输入密码" required>
</td>
</tr>
<tr>
<td colspan="2" class="button-cell">
<button type="submit">登录</button>
</td>
</tr>
</table>
</div>
</body>
</html>
代码解释：
<div class="login-container">: 这是一个外层容器，用于将整个登录框居中。<table class="login-table">: 这是核心的表格元素，我们给它一个类名login-table以便后续用 CSS 样式化。<tr>: 表格行，我们为标题、用户名、密码和按钮分别创建了行。<td colspan="2">: 表格单元格。colspan="2"表示这个单元格横跨两列，用于放置标题和按钮，让它们跨越整个表格宽度。<label>: 为输入框提供标签，这对可访问性很重要。<input>: 输入框。type="text": 文本输入框。type="password": 密码输入框，输入的内容会显示为点或星号。id和name: 标识输入框，id用于label的for属性，name在表单提交时使用。placeholder: 输入框为空时显示的提示文字。required: HTML5 属性，表示该字段为必填项。
<button type="submit">: 提交按钮，当点击它时，会触发表单的提交事件（如果表单被包裹在<form>标签中）。
第二步：添加 CSS 样式
让我们为这个简单的 HTML 结构添加 CSS，让它看起来像一个现代化的登录界面。
创建一个名为 style.css 的文件，并将以下代码放入其中：
/* body 样式：让整个页面背景色为灰色，并使用 flexbox 让内容居中 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* 登录框容器 */
.login-container {
width: 100%;
max-width: 400px; /* 限制最大宽度 */
}
/* 表格样式 */
.login-table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden; /* 让圆角生效 */
}
/* 表格单元格样式 */
.login-table td {
padding: 15px;
border-bottom: 1px solid #e0e0e0;
}
/* 最后一行单元格去掉下边框 */
.login-table tr:last-child td {
border-bottom: none;
}
/* 标签样式 */
.login-table label {
display: block; /* 让标签独占一行 */
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
/* 输入框样式 */
.login-table input[type="text"],
.login-table input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* 确保padding不会增加宽度 */
font-size: 16px;
}
/* 输入框获得焦点时的样式 */
.login-table input[type="text"]:focus,
.login-table input[type="password"]:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
/* 按钮所在单元格的样式，用于居中按钮 */
.button-cell {
text-align: center;
padding-top: 10px;
padding-bottom: 20px;
}
/* 按钮样式 */
.login-table button {
padding: 12px 20px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 鼠标悬停在按钮上时的样式 */
.login-table button:hover {
background-color: #0056b3;
}
CSS 样式解释：
（图片来源网络，侵删）
body: 我们使用了 Flexbox 布局 (display: flex,justify-content: center,align-items: center) 来让.login-container在页面中完美居中。.login-table:border-collapse: collapse: 这是表格布局的关键，它会合并相邻单元格的边框，使其看起来更整洁。box-shadow和border-radius: 添加了阴影和圆角，使表格看起来像一个独立的卡片。
.login-table td: 为单元格添加了内边距和底边框，使内容之间有间距。input: 设置了宽度为100%，并使用box-sizing: border-box确保padding和border不会导致元素超出容器宽度。button: 设计了醒目的蓝色背景，并添加了hover效果，提升了用户体验。
第三步：整合与功能增强
将 index.html 和 style.css 放在同一个文件夹下，用浏览器打开 index.html，你就能看到一个漂亮的登录界面了。
添加表单功能（可选但推荐）
为了让登录功能真正可用,你需要将表格包裹在 <form> 标签中，并指定一个提交地址（action）和方法（method）。
修改 index.html 的 <table> 部分：
（图片来源网络，侵删）
<form action="/login-handler" method="post">
<table class="login-table">
<!-- ... 表格内容保持不变 ... -->
<tr>
<td colspan="2">
<h2>用户登录</h2>
</td>
</tr>
<tr>
<td>
<label for="username">用户名:</label>
</td>
<td>
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
</td>
</tr>
<tr>
<td>
<label for="password">密码:</label>
</td>
<td>
<input type="password" id="password" name="password" placeholder="请输入密码" required>
</td>
</tr>
<tr>
<td colspan="2" class="button-cell">
<button type="submit">登录</button>
</td>
</tr>
</table>
</form>
关于表格布局的优缺点
- 优点:
- 简单直观: 对于简单的二维布局，表格的代码结构非常清晰。
- 兼容性好: 所有浏览器都完美支持。
- 缺点:
- 语义化差:
<table>的本意是展示“表格数据”，用它来布局页面结构是不符合 HTML 语义的。 - 灵活性差: 在处理复杂或不规则布局时，表格会变得非常笨重和难以维护。
- 可访问性问题: 如果表格结构复杂，屏幕阅读器可能会难以正确解析。
- 语义化差:
现代替代方案
更推荐使用 Flexbox 或 Grid 来实现登录界面，它们提供了更强大、更灵活且语义化的布局方式。
用 Flexbox 实现的登录界面 HTML 结构会更简洁：
<div class="login-form">
<h2>用户登录</h2>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" placeholder="请输入密码">
</div>
<button type="submit">登录</button>
</div>
你已经学会了如何使用表格创建一个完整的登录界面,包括 HTML 结构、CSS 美化以及基本的功能设置，虽然这不是当前最前沿的技术，但这个过程很好地展示了网页布局的基本原理，在实际开发中，建议你逐步转向使用 Flexbox 或 Grid，它们会让你在构建更复杂的网页时更加得心应手。
