css表格表单制作

2026-01-08 19:09:12CSS

CSS表格制作

使用CSS创建表格主要涉及<table>标签及其子元素的样式控制。以下是一个基础示例：

<table class="styled-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
    </tr>
  </tbody>
</table>

.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: sans-serif;
}

.styled-table th,
.styled-table td {
  padding: 12px 15px;
  border: 1px solid #dddddd;
}

.styled-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.styled-table tbody tr:hover {
  background-color: #f5f5f5;
}

CSS表单制作

表单样式设计通常涉及<form>元素及其输入控件的样式定制：

<form class="styled-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Submit</button>
</form>

.styled-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 5px;
}

.styled-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.styled-form input[type="text"],
.styled-form input[type="email"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.styled-form button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.styled-form button:hover {
  background-color: #45a049;
}

响应式表格设计

针对移动设备的表格响应式处理：

@media screen and (max-width: 600px) {
  .responsive-table {
    border: 0;
  }

  .responsive-table thead {
    display: none;
  }

  .responsive-table tr {
    margin-bottom: 10px;
    display: block;
    border-bottom: 2px solid #ddd;
  }

  .responsive-table td {
    display: block;
    text-align: right;
    border-bottom: 1px dotted #ccc;
  }

  .responsive-table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

表单验证样式

使用CSS伪类为表单添加验证反馈：

.styled-form input:valid {
  border-color: #4CAF50;
}

.styled-form input:invalid {
  border-color: #f44336;
}

.styled-form input:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}

高级表格样式技巧

实现斑马纹和悬停效果的组合：

css表格表单制作

.striped-table tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

.striped-table tbody tr:hover {
  background-color: #e6e6e6;
  transition: background-color 0.3s ease;
}

这些代码示例展示了如何使用CSS创建美观且功能完善的表格和表单，包括响应式设计、验证样式和交互效果。根据实际需求可以调整颜色、间距和动画效果等参数。