[分享]css两行四列的表格

在web开发中，表格是经常使用到的元素之一。在前端开发中，CSS可以很好地控制表格的样式。本文将介绍如何使用CSS来制作一个两行四列的表格。 第一行第一列 第一行第二列 第一行第三列 第一行第四列 ...

在web开发中，表格是经常使用到的元素之一。在前端开发中，CSS可以很好地控制表格的样式。本文将介绍如何使用CSS来制作一个两行四列的表格。

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
    <td>第一行第三列</td>
    <td>第一行第四列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
    <td>第二行第三列</td>
    <td>第二行第四列</td>
  </tr>
</table> 

以上是表格的HTML代码，接下来我们使用CSS来美化表格。首先我们需要为表格添加一些基本样式：

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

td, th {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
} 

以上样式中，我们设置了表格的边框合并，使表格的边框看起来更加美观。我们还为单元格设置了边框和内边距，并将文字左对齐。

tr:nth-child(odd) {
  background-color: #f9f9f9;
} 

通过以上代码，我们为表格的奇数行设置了背景颜色，使得表格的行之间有了明显的区分。

th {
  background-color: #4CAF50;
  color: white;
} 

最后，我们为表头单元格设置了背景颜色和字体颜色，使得表头单元格与普通单元格区别开来。

通过以上设置，我们就完成了一个两行四列的美观的表格。