CSS Tables

🗂️ مروری بر جداول CSS

جداول در HTML با استفاده از این عناصر ساخته می‌شوند:

* `<table>`: ظرف اصلی جدول
* `<tr>`: ردیف‌های جدول
* `<th>`: سلول‌های سرستون (عنوان)
* `<td>`: سلول‌های داده (محتوا)

CSS به شما کمک می‌کند ظاهر جدول را مانند خطوط دور، فاصله‌ها، رنگ‌ها، فونت‌ها و چیدمان کنترل کنید.

—

🔹 خواص رایج CSS برای جداول

—

🧪 نمونه: جدول ساده با استایل

html

<table class=“styled-table”>
<thead>
<tr>
<th>نام</th>
<th>سن</th>
<th>شغل</th>
</tr>
</thead>
<tbody>
<tr>
<td>علی</td>
<td>۳۰</td>
<td>مهندس</td>
</tr>
<tr>
<td>سارا</td>
<td>۲۵</td>
<td>طراح</td>
</tr>
</tbody>
</table>

css

.styled-table {
width: 100%;
border-collapse: collapse; /* کنار هم بودن خطوط جدول */
}

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

.styled-table th {
background-color: #4CAF50;
color: white;
}

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

.styled-table tr :hover {
background-color: #ddd;
}

—

📝 خلاصه

* با `border` می‌توانید خطوط دور جدول را اضافه کنید.
* `border-collapse: collapse;` باعث می‌شود خطوط جدول به هم بچسبند و دو خط موازی نداشته باشید.
* `padding` برای دادن فاصله داخل سلول‌ها استفاده می‌شود.
* سلول‌های سرستون (`<th>`) را برای تاکید متفاوت استایل دهید.
* با انتخابگرهای `nth-child` می‌توانید ردیف‌ها را راه‌راه کنید یا افکت هاور اضافه کنید.