css表中表单页html
时间: 2023-07-28 13:10:37 浏览: 49
以下是一个包含表格和表单的 HTML 页面代码,使用 CSS 美化了页面:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表中表格和表单</title>
<style>
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
th, td {
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
cursor: pointer;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr td:nth-child(n+5) {
display: none;
}
tr.expanded td:nth-child(n+5) {
display: table-cell;
}
form {
background-color: #f9f9f9;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
width: 50%;
margin: 0 auto;
}
form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
form input[type="text"], form input[type="email"], form select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 3px;
margin-bottom: 20px;
box-sizing: border-box;
}
form input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
<script>
function toggleRow(row) {
row.classList.toggle("expanded");
}
</script>
</head>
<body>
<table>
<tr>
<th onclick="toggleRow(this.parentNode.nextElementSibling)">姓名</th>
<th>年龄</th>
<th>城市</th>
<th>国家</th>
<th>电话</th>
<th>邮箱</th>
</tr>
<tr>
<td onclick="toggleRow(this.parentNode)" style="cursor: pointer;">小明</td>
<td>20</td>
<td>北京</td>
<td>中国</td>
<td>1234567890</td>
<td>xiaoming@example.com</td>
</tr>
<tr class="collapsed">
<td></td>
<td></td>
<td></td>
<td></td>
<td>0987654321</td>
<td>xiaoming@gmail.com</td>
</tr>
<tr>
<td onclick="toggleRow(this.parentNode)" style="cursor: pointer;">John</td>
<td>30</td>
<td>New York</td>
<td>美国</td>
<td>555-1234</td>
<td>john@example.com</td>
</tr>
<tr class="collapsed">
<td></td>
<td></td>
<td></td>
<td></td>
<td>555-5678</td>
<td>john@gmail.com</td>
</tr>
<tr>
<td onclick="toggleRow(this.parentNode)" style="cursor: pointer;">Maria</td>
<td>25</td>
<td>巴黎</td>
<td>法国</td>
<td>01-23-45-67-89</td>
<td>maria@example.com</td>
</tr>
<tr class="collapsed">
<td></td>
<td></td>
<td></td>
<td></td>
<td>06-78-90-12-34</td>
<td>maria@gmail.com</td>
</tr>
</table>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="age">年龄:</label>
<input type="text" id="age" name="age" required>
<label for="city">城市:</label>
<input type="text" id="city" name="city" required>
<label for="country">国家:</label>
<select id="country" name="country" required>
<option value="">请选择国家</option>
<option value="China">中国</option>
<option value="USA">美国</option>
<option value="France">法国</option>
</select>
<label for="phone">电话:</label>
<input type="text" id="phone" name="phone" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="提交">
</form>
</body>
</html>
```
在这个页面中,我们使用了一个表格来展示人员信息,同时还添加了一个表单来输入新的人员信息。表格和表单都使用了 CSS 进行美化,使得页面看起来更加美观和易于使用。
需要注意的是,这个页面只是一个示例,实际应用中可能需要更复杂的逻辑和样式。