<table id="priceTable">
    <tr>
        <th>产品名称</th>
        <th>价格</th>
        <th>优惠活动</th>
    </tr>
    <tr>
        <td>产品 A</td>
        <td>199 元</td>
        <td>满 100 减 20</td>
    </tr>
    <tr>
        <td>产品 B</td>
        <td>299 元</td>
        <td>买一送一</td>
    </tr>
</table>

接着，CSS 登场为表格赋予视觉魅力。我们可以通过 CSS 选择器来设置表格的样式，如字体、颜色、背景色、边框等。例如，设置表格的边框为 1 像素的实线，表格宽度为 100%，表头文字加粗：

#priceTable {
    width: 100%;
    border-collapse: collapse;
}
#priceTable th, #priceTable td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}
#priceTable th {
    background-color: #f8f8f8;
    font-weight: bold;
}

而 jQuery 则能为价格表格添加交互性。比如，当用户鼠标悬停在某一行时，改变该行的背景色，增加视觉反馈。代码如下：

$(document).ready(function() {
    $('#priceTable tr').hover(
        function() {
            $(this).css('background-color', '#e0e0e0');
        },
        function() {
            $(this).css('background-color', '');
        }
    );
});

通过 HTML 搭建框架、CSS 美化外观、jQuery 增强交互，我们成功打造出了精美的价格表格。这样的表格不仅能够清晰展示价格信息，其美观的样式和交互效果还能吸引用户深入了解产品或服务，在网页设计中发挥重要作用，也有助于提升网站的整体 SEO 效果，让用户更容易找到并停留。

TAGS: CSS HTML jQuery 价格表格