表格css样式模板

在网页设计中，表格（Table）是一种常见的布局元素，用于展示数据和信息。CSS（Cascading Style Sheets）提供了丰富的样式设置选项，可以极大地增强表格的视觉效果和用户体验。以下是一些表格CSS样式模板的示例，它们可以帮助你创建更加美观和实用的表格。

基础表格样式

基础表格样式通常包括设置表格的边框、背景色、字体和对齐方式等。

table {
    width: 100%;
    border-collapse: collapse; /* 合并边框 */
    margin: 20px 0;
}

th, td {
    border: 1px solid #ddd; /* 边框颜色 */
    padding: 8px;
    text-align: left; /* 文本对齐 */
}

th {
    background-color: #f2f2f2; /* 表头背景色 */
    font-weight: bold; /* 字体加粗 */
}

条纹表格样式

条纹样式的表格可以提高数据的可读性，通过交替行的颜色来区分不同的数据行。

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

table.striped tr:nth-child(even) {
    background-color: #f9f9f9;
}

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

table.striped th {
    background-color: #333;
    color: white;
}

悬停效果样式

为表格行添加悬停效果可以提升用户交互体验，当鼠标悬停在某一行时，该行会高亮显示。

table.hoverable tr:hover {
    background-color: #eaeaea;
}

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

响应式表格样式

响应式表格可以确保在不同屏幕尺寸的设备上都能良好展示。

@media screen and (max-width: 600px) {
    table.responsive, table.responsive thead, table.responsive tbody, table.responsive th, table.responsive td, table.responsive tr {
        display: block;
    }

    table.responsive th, table.responsive td {
        text-align: right;
    }

    table.responsive td::before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
    }
}

边框样式

为表格添加不同的边框样式可以使其更具特色。

table.bordered {
    border: 2px solid #333;
}

table.bordered th, table.bordered td {
    border: 1px solid #ddd;
}

圆角和阴影

圆角和阴影可以为表格添加现代感。

table.shadow {
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

table.shadow th, table.shadow td {
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

table.shadow th:first-child, table.shadow td:first-child {
    border-left: none;
}

table.shadow th:last-child, table.shadow td:last-child {
    border-right: none;
}

总结

以上提供的CSS样式模板只是一些基本示例，你可以根据实际需求进行调整和扩展。在设计表格时，重要的是要确保表格的样式与整体网页设计保持一致，同时提供良好的用户体验和数据可读性。通过合理使用CSS，你可以创建出既美观又实用的表格，增强网页的吸引力和功能性。