当前位置：首页 > CSS

css制作三行三列表格

2026-02-27 02:46:01CSS

使用HTML和CSS创建三行三列表格

通过HTML的<table>元素结合CSS样式可以快速实现基础表格结构。以下是完整代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 300px;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr>
            <td>内容4</td>
            <td>内容5</td>
            <td>内容6</td>
        </tr>
    </table>
</body>
</html>

关键样式说明

border-collapse: collapse 合并单元格边框线，使表格更紧凑

padding: 8px 设置单元格内边距，增加内容与边框的间距

text-align: center 使内容在单元格内水平居中显示

background-color: #f2f2f2 为表头单元格添加浅灰色背景

响应式表格实现

如需使表格适应不同屏幕尺寸，可添加以下媒体查询：

@media (max-width: 600px) {
    table {
        width: 100%;
    }
}

美化表格的附加样式

增加悬停效果和斑马纹样式：

tr:nth-child(even) {
    background-color: #f9f9f9;
}
tr:hover {
    background-color: #e6e6e6;
}

使用CSS Grid布局替代方案

现代CSS布局方案也可实现表格效果：

css制作三行三列表格

<div class="grid-table">
    <div class="header">标题1</div>
    <div class="header">标题2</div>
    <div class="header">标题3</div>

    <div class="cell">内容1</div>
    <div class="cell">内容2</div>
    <div class="cell">内容3</div>

    <div class="cell">内容4</div>
    <div class="cell">内容5</div>
    <div class="cell">内容6</div>
</div>

<style>
.grid-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
}
.header, .cell {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}
.header {
    background-color: #f2f2f2;
    font-weight: bold;
}
</style>