جدول‌های CSS

معرفی جدول‌های CSS

در دنیای وب، جدول‌ها یکی از مهم‌ترین ابزارها برای نمایش داده‌ها به صورت ساختار یافته هستند. از زمان ظهور CSS، طراحی و استایل‌دهی به جدول‌ها بسیار ساده‌تر و زیباتر شده‌اند. استفاده از ویژگی‌های CSS به ما امکان می‌دهد تا جدول‌های خود را به شکلی منظم، قابل فهم، و جذاب نمایش دهیم. برای مثال می‌توانیم رنگ‌بندی، فاصله سلول‌ها، اندازه فونت و بسیاری از ویژگی‌های دیگر را با استفاده از CSS مدیریت کنیم.

یکی از مهم‌ترین دلایلی که CSS در طراحی جدول‌ها مفید است، جدا کردن ساختار HTML از استایل‌دهی و ارائه ظاهری زیبا و منحصر به فرد برای اطلاعات جداول است. این جداسازی به کدنویسان اجازه می‌دهد که طراحی‌های متنوع و سفارشی را با تغییرات جزئی در CSS اعمال کنند.

جدول‌ها به طور خاص در هنگامی که نیاز به نمایش داده‌هایی مانند گزارش‌ها، جداول قیمت‌گذاری یا جداول زمانی داشته باشیم، بسیار کاربردی هستند. این ویژگی‌ها به ما کمک می‌کنند تا اطلاعات زیادی را به صورت متراکم و قابل فهم در اختیار کاربران قرار دهیم.

برای شروع با جدول‌های CSS، ابتدا باید ساختار پایه‌ی HTML جدول خود را ایجاد کنیم و سپس با استفاده از CSS، به آن استایل دهیم. در زیر یک نمونه‌ی ساده از افکت‌های CSS بر روی یک جدول آورده شده است.

    <table>
    <tr>
        <th>نام</th>
        <th>سن</th>
        <th>کشور</th>
    </tr>
    <tr>
        <td>علی</td>
        <td>۳۰</td>
        <td>ایران</td>
    </tr>
    <tr>
        <td>سارا</td>
        <td>۲۵</td>
        <td>فرانسه</td>
    </tr>
    </table>

در کد فوق، یک جدول ساده با سه ستون و دو ردیف ساخته‌ایم. حال می‌توانیم CSS را به شکل زیر اضافه کنیم:

    <style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    </style>

کد CSS که برای جدول تعریف کرده‌ایم:
table - عرض کل جدول را مشخص می‌کند و تعیین می‌کند که مرزهای جدول بدون فاصله‌ای از هم قرار گیرند.
th, td - سبک‌دهی سلول‌های تیتر و داده‌ای جدول را مشخص می‌کند. در این مثال ما حاشیه، فاصله داخلی و ترازبندی متن را تعریف کردیم.
th - با تعریف یک رنگ پس‌زمینه متمایز برای سلول‌های تیتر، آن‌ها را برجسته‌تر کرده‌ایم تا خوانایی بالایی داشته باشند.