html中表格和表单嵌套以及css基础知识
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置表格的边框样式和宽度 */
table {
border-collapse: collapse;
width: 100%;
}
/* 设置表格单元格的边框样式和内边距 */
th, td {
border: 1px solid black;
padding: 8px;
}
/* 设置表单元素的边框样式和内边距 */
input {
border: 1px solid #ddd;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>
<form action="/submit-name">
<input type="text" name="name" placeholder="请输入姓名">
</form>
</td>
<td>
<form action="/submit-age">
<input type="number" name="age" placeholder="请输入年龄">
</form>
</td>
<td>
<form action="/submit-city">
<input type="text" name="city" placeholder="请输入城市">
</form>
</td>
</tr>
</table>
</body>
</html>这个例子展示了如何在HTML中嵌套表格和表单，并通过CSS为表格和表单元素添加样式。在实际应用中，通常会使用服务器端脚本来处理表单提交的数据，但这里的action属性只是为了示例展示表单提交的行为。
评论已关闭