制作价格表格可以使用 CSS 的表格布局和样式来完成。 首先需要使用 HTML 的 table 标签来创建一个表格，然后使用 CSS 来添加样式。
在 HTML 中创建一个包含表格的 div，再在 div 中创建一个 table 元素和表头（thead）和表身（tbody）元素，定义好表格的行和列。
<div class="price-table">
<table>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
<tr>
<td>内容7</td>
<td>内容8</td>
<td>内容9</td>
</tr>
</tbody>
</table>
</div>使用 CSS 样式来控制表格的样式，如：边框、颜色、字体、背景等。
.price-table {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #333;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th {
background: #f2f2f2;
text-align: left;
padding: 10px;
}
td {
border: 1px solid #ccc;
padding: 10px;
}可以通过添加不同的类名来为表格添加不同的样式，如：价格标签、优惠标签、特色标签等。
.price-label {
font-size: 24px;
font-weight: bold;
color: #f00;
}
.discount-label {
font-size: 12px;
font-weight: bold;
color: #fff;
background: #f00;
padding: 5px;
border-radius: 5px;
}
.feature-label {
font-size: 12px;
color: #666;
}然后在 HTML 表格中添加对应的类名即可。
<tr>
<td><span class="price-label">$199</span></td>
<td><span class="discount-label">20% off</span></td>
<td><span class="feature-label">Feature 1, Feature 2, Feature 3</span></td>
</tr>通过以上步骤，就可以使用 CSS 制作价格表格，并添加不同的样式和标签来突出重点。
