css中制作表格_css制作表单

CSS中可以使用表格来展示数据，通过设置表格的样式，可以使表格更加美观和易于阅读。在CSS中制作表格的关键是使用表格相关的属性和选择器来设置表格的样式。

我们可以使用`border-collapse`属性来设置表格的边框合并方式。该属性有两个值可选，分别是`collapse`和`separate`。当值为`collapse`时，相邻单元格的边框会合并为一个单一的边框，这样可以使表格看起来更加整齐。示例代码如下：

table {
  border-collapse: collapse;
}

接下来，我们可以使用`border`属性来设置表格的边框样式和宽度。该属性可以接受一个值或四个值，分别表示边框的样式和宽度。示例代码如下：

table {
  border: 1px solid #000;
}

在表格中，我们可以使用`th`元素来定义表头单元格，使用`td`元素来定义数据单元格。我们可以使用`background-color`属性来设置表头和数据单元格的背景颜色，使用`color`属性来设置文字颜色。示例代码如下：

th {
  background-color: #ccc;
  color: #000;
}
td {
  background-color: #fff;
  color: #000;
}

除了基本的样式设置，我们还可以使用CSS选择器来选择特定的单元格，并对其进行样式设置。例如，我们可以使用`nth-child`选择器来选择表格中的奇数行或偶数行，并设置不同的背景颜色。示例代码如下：

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

在制作表单时，我们可以使用表格来布局表单的各个元素。例如，我们可以将表单的标签放在`th`元素中，将表单的输入框放在`td`元素中。示例代码如下：

<table>
  <tr>
    <th>姓名</th>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <th>年龄</th>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <th>性别</th>
    <td>
      <input type="radio" name="gender" value="male" />男
      <input type="radio" name="gender" value="female" />女
    </td>
  </tr>
</table>

通过设置表格的样式，我们可以使表单更加美观和易于阅读。例如，我们可以使用`padding`属性来设置单元格的内边距，使用`text-align`属性来设置单元格中文字的对齐方式。示例代码如下：

th, td {
  padding: 10px;
  text-align: center;
}

除了基本的样式设置，我们还可以使用CSS伪类选择器来选择表单元素的不同状态，并进行样式设置。例如，我们可以使用`:hover`伪类选择器来设置鼠标悬停在单元格上时的样式。示例代码如下：

td:hover {
  background-color: #f9f9f9;
}

总结来说，通过使用CSS中的表格属性和选择器，我们可以制作出美观、易于阅读的表格和表单。在设置表格样式时，可以使用`border-collapse`属性来设置边框合并方式，使用`border`属性来设置边框样式和宽度，使用`background-color`和`color`属性来设置背景颜色和文字颜色。在制作表单时，可以使用表格来布局表单的各个元素，并使用CSS样式来美化表单。还可以使用CSS选择器和伪类选择器来选择特定的单元格和表单元素，并进行样式设置。