آموزش حرفه‌ای استایل‌دهی به جدول‌ها در CSS

مقدمه: چرا جدول CSS مهم است؟

جدول HTML خام = بدون حاشیه + فشرده ❌
جدول CSS = زیبا + قابل خواندن + Responsive ✅

هدف: حاشیه، فاصله، چیدمان کنترل‌شده، RTL مناسب.

۱. اضافه کردن حاشیه (border)

بهترین روش: border روی table, th, td

table, th, td {
  border: 1px solid #333;
}

مشکل: حاشیه‌های دوتایی بین سلول‌ها (فاصله + جداگانه).

۲. border-collapse (یکی کردن حاشیه‌ها) ✅ حیاتی

حل: حاشیه‌ها چسبیده به هم.

table {
  border-collapse: collapse;  /* یکی می‌کند */
}
table, th, td {
  border: 1px solid #333;
}

توجه: اگر <!DOCTYPE> در سند HTML مشخص نشده باشد، ویژگیborder-collapse در CSS نتایج غیر منتظره ای ایجاد خواهد کرد.

۳. padding (فضای داخلی سلول)

خوانایی ↑ - محتوا از حاشیه دور.

th, td {
  padding: 12px 16px;  /* بالا-راست پایین چپ */
}

۴. border-spacing (فاصله بین حاشیه‌ها)

فقط با border-collapse: separate.

table {
  border-collapse: separate;
  border-spacing: 8px 4px;  /* افقی عمودی */
}

کاربرد: طراحی خاص (نه رایج).

۵. table-layout (کنترل عرض ستون)

به طور پیش فرض یک جدول تا زمانی گسترش می یابد و بزرگ می شود که داده ها را در خود جای دهد. تا جایی که فضا وجود داشته باشد، جدول با داده ها پر و جدول بزرگ می شود. گرچه، گاهی اوقات برای مدیریت طرح بندی لازم است تا عرض جدول را به صورت ثابت تنظیم کنید.

مشکل: جدول صبر می‌کند تا محتوای طولانی لود شود ❌

table {
  width: 100%;
  table-layout: fixed;  /* ستون‌ها ثابت */
}
th:nth-child(1) { width: 30%; }
th:nth-child(2) { width: 70%; }

مزیت fixed:

• نمایش ردیف‌به‌ردیف (سریع)
• عرض ستون کنترل‌شده

۶. empty-cells (سلول خالی)

فقط border-collapse: separate.

table {
  border-collapse: separate;
  empty-cells: hide;
}

۷. caption-side (موقعیت عنوان)

عنوان جدول بالا/پایین.

caption {
  caption-side: bottom;  /* یا top */
}

برچسب‌ها: CSS, table, border-collapse, responsive table, table