html表格检索布局代码样例
时间: 2024-05-05 14:17:35 浏览: 10
我可以帮您提供一些HTML表格检索布局代码的样例,以下是其中一个样例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Table Search Layout</title>
<style>
table {
border-collapse: collapse;
width: 100%;
font-size: 16px;
text-align: left;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
tr:nth-child(even){
background-color: #f2f2f2;
}
input[type=text]{
padding: 6px;
border: none;
border-radius: 4px;
margin-right: 10px;
}
button[type=submit]{
background-color: #4CAF50;
color: white;
padding: 6px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.search-form{
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
}
</style>
</head>
<body>
<div class="search-form">
<form action="#">
<input type="text" placeholder="Search...">
<button type="submit">Submit</button>
</form>
</div>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john.doe@example.com</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>jane.doe@example.com</td>
</tr>
<tr>
<td>Bob</td>
<td>Smith</td>
<td>bob.smith@example.com</td>
</tr>
<tr>
<td>Alice</td>
<td>Johnson</td>
<td>alice.johnson@example.com</td>
</tr>
</tbody>
</table>
</body>
</html>
```
希望这可以帮助到您。