html css实现 好看的 搜索 及 搜索表格 代码

以下是一个简单的搜索表格的HTML和CSS代码：

HTML代码：

<div class="search-box">
  <form>
    <input type="text" placeholder="搜索...">
    <button type="submit">搜索</button>
  </form>
</div>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
      <td>北京市东城区</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
      <td>上海市浦东新区</td>
    </tr>
    <tr>
      <td>003</td>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
      <td>广东省深圳市</td>
    </tr>
  </tbody>
</table>

CSS代码：

.search-box {
  margin-bottom: 20px;
}

.search-box form {
  display: flex;
  align-items: center;
}

.search-box input[type="text"] {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  margin-right: 10px;
}

.search-box button[type="submit"] {
  padding: 10px 20px;
  background-color: #1abc9c;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-box button[type="submit"]:hover {
  background-color: #16a085;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

th {
  background-color: #1abc9c;
  color: #fff;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

这是一个简单的搜索表格，你可以根据自己的需求进行修改和美化。