استایل جداول

استایل‌دهی به جداول HTML در CSS: حاشیه، رنگ، فاصله، hover و طراحی مدرن

استایل جدول در CSS

جداول HTML برای نمایش داده‌های ساختاریافته استفاده می‌شوند. با CSS می‌توان جداولی زیبا و حرفه‌ای ساخت.

ساختار جدول HTML

<table>
        <thead>
            <tr>
                <th>نام</th>
                <th>نمره</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>علی</td>
                <td>۱۸</td>
            </tr>
        </tbody>
    </table>

۱. حاشیه جدول (border)

/* حاشیه کل جدول */
    table, th, td {
        border: 1px solid #ddd;
        border-collapse: collapse;
    }

۲. border-collapse (ادغام حاشیه‌ها)

مقدارتوضیح
collapseحاشیه‌ها ادغام می‌شوند ⭐
separateحاشیه‌ها جدا هستند (پیش‌فرض)

۳. فاصله داخلی سلول‌ها

th, td {
        padding: 12px 15px;
        text-align: right;
    }

۴. استایل هدر جدول

th {
        background-color: #3498db;
        color: white;
        font-weight: bold;
        text-align: center;
    }

۵. رstripe (نوارهای متناوب)

/* رنگ متناوب برای ردیف‌ها */
    tbody tr:nth-child(even) {
        background-color: #f8f9fa;
    }
    
    tbody tr:nth-child(odd) {
        background-color: white;
    }

۶. افکت Hover روی ردیف‌ها

tbody tr:hover {
        background-color: #e8f4fc;
        transition: background-color 0.3s;
    }

۷. عرض و ترازبندی

table {
        width: 100%;
        border-collapse: collapse;
    }
    
    th, td {
        text-align: right;
        padding: 12px;
    }
    
    /* ستون اول چپ‌چین */
    th:first-child, td:first-child {
        text-align: left;
    }

جدول مدرن کامل

.modern-table {
        width: 100%;
        border-collapse: collapse;
        font-family: Tahoma, sans-serif;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .modern-table thead {
        background: linear-gradient(135deg, #2c3e50, #3498db);
        color: white;
    }
    
    .modern-table th {
        padding: 15px;
        text-align: right;
        font-weight: bold;
    }
    
    .modern-table td {
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
    }
    
    .modern-table tbody tr:hover {
        background: #f5f5f5;
    }
    
    .modern-table tbody tr:last-child td {
        border-bottom: none;
    }

جدول ریسپانسیو

/* روی موبایل، جدول اسکرول افقی می‌شود */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط