CSS HTML: 如何使用不同的CSS样式制作两个表格

在本文中，我们将介绍如何使用不同的CSS样式制作两个不同的表格。

阅读更多：CSS 教程

表格1：基础表格

首先，我们将创建一个基础的表格。代码如下：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

接下来，我们为这个表格添加一些基本的CSS样式。代码如下：

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

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

th {
  background-color: #f2f2f2;
}

这些CSS样式将使表格具有完整的边框、斑马线的背景色以及居中对齐的文本。

表格2：自定义样式表格

接下来，我们将创建一个具有自定义样式的表格。代码如下：

<table class="custom-table">
  <tr>
    <th>产品</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>手机</td>
    <td>2000元</td>
  </tr>
  <tr>
    <td>电脑</td>
    <td>5000元</td>
  </tr>
</table>

在这里，我们为表格添加了一个class属性，并命名为”custom-table”。这个class将用于添加自定义的CSS样式。

然后，我们需要编写相应的CSS代码以实现我们想要的样式。代码如下：

.custom-table {
  width: 100%;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

.custom-table th, .custom-table td {
  padding: 10px;
  border: 1px solid #ddd;
}

.custom-table th {
  background-color: #f2f2f2;
}

这些CSS样式将为我们的表格提供一个灰色背景、完整边框以及额外的内边距。