ابزار تعاملی طراحی جدول CSS

فاصله سلول‌ها، نوع حاشیه، رنگ سربرگ و ردیف‌های راه‌راه رو تغییر بده. هم‌زمان نتیجه رو در پیش‌نمایش می‌بینی و می‌تونی کد CSS رو برای پروژه‌ات کپی کنی.

  

    
محصول
تعداد
    
شامپو
۲
  

آموزش جدول در CSS؛ طراحی جدول زیبا و واکنش‌گرا

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

جدول زیر یک نمونه داده واقعی‌نماست. در ادامه می‌بینی چطور ظاهر چنین جدولی رو با CSS تغییر بدی.

تنظیم حاشیه جدول با border

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

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

خاصیت border-collapse و فاصله بین سلول‌ها

با border-collapse مشخص می‌کنی حاشیه سلول‌های کنار هم یکی بشه (collapse) یا هر سلول حاشیه جدا داشته باشه (separate). مقدار پیش‌فرض separate هست. در همین حالت می‌تونی فاصله سلول‌ها رو با border-spacing تنظیم کنی؛ ولی در حالت collapse این فاصله اثری نداره.

.sample-table { border-collapse: collapse; }
/* یا */
.sample-table { border-collapse: separate; border-spacing: 8px; }

برای جزئیات بیشتر ببین: مستندات border-collapse در MDN.

عرض و ارتفاع جدول

با width عرض جدول و با height ارتفاعش رو تنظیم می‌کنی. البته ارتفاع واقعی سلول‌ها به محتوای جدول هم بستگی داره. اگر می‌خوای متن به لبه سلول نچسبه، معمولاً بهتره از padding استفاده کنی.

.sample-table { width: 100%; }
.sample-table th { height: 50px; }

ترازبندی افقی متن با text-align

با text-align متن سلول رو راست‌چین، چپ‌چین یا وسط‌چین می‌کنی. اگر جدول در سایت فارسی و انگلیسی استفاده می‌شه، مقدار start انتخاب خوبیه چون جهت متن رو در نظر می‌گیره.

.sample-table th,
.sample-table td { text-align: start; }

ترازبندی عمودی با vertical-align

با vertical-align می‌تونی محتوای سلول رو بالا، وسط یا پایین قرار بدی. وقتی ارتفاع ردیف بیشتر از متن داخلشه، تفاوت این حالت‌ها رو بهتر می‌بینی.

.sample-table td { height: 50px; vertical-align: bottom; }

فاصله داخلی سلول‌ها با padding

با padding به متن داخل سلول فضا می‌دی تا به حاشیه نچسبه. کد زیر ۱۲ پیکسل بالا و پایین و ۱۶ پیکسل در دو طرف فاصله می‌سازه.

.sample-table th,
.sample-table td { padding: 12px 16px; }

تنظیم رنگ جدول

برای رنگ سربرگ از background-color و برای رنگ نوشته‌ها از color استفاده کن. فقط حواست باشه متن روی پس‌زمینه راحت خونده بشه؛ مثل نمونه زیر که نوشته سفید روی زمینه تیره قرار گرفته.

.sample-table thead { background-color: #1e3a8a; color: white; }

ردیف‌های راه‌راه و تغییر رنگ هنگام hover

وقتی جدول ردیف‌های زیادی داره، می‌تونی با :nth-child(even) رنگ ردیف‌های زوج رو متفاوت کنی. با :hover هم ردیفی که ماوس روش قرار گرفته مشخص‌تر می‌شه.

.sample-table tbody tr:nth-child(even) { background: #f1f5f9; }
.sample-table tbody tr:hover { background: #dbeafe; }

این تغییر رنگ‌ها ظاهر جدول رو بهتر می‌کنن، اما جای عنوان درست ستون‌ها رو نمی‌گیرن. راهنمای nth-child در MDN را نیز ببینید.

جدول واکنش‌گرا در موبایل

وقتی ستون‌های جدول زیاد باشن، توی موبایل همه‌چیز فشرده و ناخوانا می‌شه. راه ساده اینه که جدول رو داخل یک ظرف با overflow-x: auto بذاری تا کاربر بتونه افقی اسکرول کنه.

  ...

.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll table { min-width: 560px; width: 100%; }
.table-scroll:focus-visible { outline: 2px solid #2563eb; }

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

خطاهای رایج و نکات مهم

• استایل دادن به تمام جدول‌های سایت: به‌جای انتخابگر عمومی table از یک کلاس مخصوص همون جدول استفاده کن.
• انتظار از border-spacing در حالت collapse: برای دیدن فاصله بین سلول‌ها، حالت separate رو انتخاب کن.
• جدول پهن در موبایل: ظرف اسکرول افقی بذار؛ جدول اطلاعات رو فقط به خاطر ظاهرش به چند div تبدیل نکن.
• متن طولانی: عرض ستون‌ها رو بررسی کن. table-layout می‌تونه کمک کنه، اما برای متن‌های خیلی بلند باید سرریز محتوا رو هم مدیریت کنی.
• دسترس‌پذیری: از caption، th و scope در جای درست استفاده کن.