در حال بارگذاری...

جدول در CSS

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

جعبهٔ ابزار CSS جدول

📊 استایل جدول یک‌نگاهه

ویژگی کار روزمره
border-collapse حاشیهٔ سلول‌ها یکی شود (collapse) یا جدا بماند (separate)
border-spacing فاصله بین سلول‌ها وقتی حاشیه جداست
width پهنای جدول (اغلب 100% در مقاله یا کارت)
padding روی th/td فضای تنفس داخل سلول
text-align / vertical-align تراز افقی و عمودی محتوا در سلول

معمولاً table و th و td (و گاهی tr) را استایل می‌کنید — نه تک‌تک سلول‌ها جداگانه — تا کل جدول یکدست بماند.

حاشیه‌هایی که دوتا نشوند

اگر کمکی نکنید، حاشیهٔ سلول‌های همسایه ممکن است ضخیم یا دوبل دیده شود. border-collapse: collapse آن‌ها را در یک خط تمیز جمع می‌کند — انتخاب روزمره برای جدول داده.

حاشیهٔ جمع‌شدهٔ جدول

css
CSS Code 
table.data {
width: 100%;
border-collapse: collapse;
}

table.data th,
table.data td {
border: 1px solid #ccc;
padding: 0.5rem 0.75rem;
}

حاشیهٔ جدا و فاصله

اگر بین سلول‌ها فاصلهٔ دیدنی می‌خواهید، border-collapse: separate بگذارید و border-spacing را تنظیم کنید. وقتی collapse روشن است، spacing اعمال نمی‌شود.

سلول‌های جدا با فاصله

css
CSS Code 
table.cards {
border-collapse: separate;
border-spacing: 0.5rem;
}

table.cards td {
border: 1px solid #ddd;
padding: 0.75rem;
}

عرض، عنوان ستون و تراز

جدول تمام‌عرض در مقاله اغلب خواناتر است. عنوان‌ها را کمی برجسته کنید، متن را چپ یا وسط بچینید، و وقتی ارتفاع سلول‌ها فرق دارد از vertical-align کمک بگیرید.

تراز عنوان و سلول

css
CSS Code 
table.data th {
text-align: left;
background: #f5f5f5;
font-weight: 700;
}

table.data td {
text-align: left;
vertical-align: top;
}

ردیف راه‌راه و هاور آرام

پس‌زمینهٔ متناوب ردیف‌ها کمک می‌کند چشم روی جدول عریض گم نشود. یک :hover ملایم روی tr ردیف فعال را نشان می‌دهد بدون هیاهوی نئونی.

راه‌راه + هاور ردیف

css
CSS Code 
table.data tbody tr:nth-child(even) {
background: #fafafa;
}

table.data tbody tr:hover {
background: #eef5ff;
}

عادت آرام جدول داده

حاشیه را collapse کنید، به سلول‌ها padding واقعی بدهید، کنتراست عنوان را معقول نگه دارید، و راه‌راه یا هاور را وقتی جدول واقعاً عریض است اضافه کنید.

جدول خوانای مقاله

css
CSS Code 
article table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}

article th,
article td {
border: 1px solid #e0e0e0;
padding: 0.6rem 0.8rem;
}

خودتان امتحان کنید

  1. border-collapse: collapse و حاشیهٔ ملایم روی th/td بگذارید.
  2. داخل سلول‌ها padding راحت بدهید.
  3. عنوان‌ها را چپ‌چین کنید؛ روی سلول چندخطی vertical-align: top را امتحان کنید.
  4. ردیف‌های زوج را با tr:nth-child(even) راه‌راه کنید.
  5. پس‌زمینهٔ نرم برای tr:hover بگذارید — بعد با جدول دوم و border-spacing مقایسه کنید.

اشتباهات رایج

  • گذاشتن حاشیهٔ جدا پیش‌فرض طوری که خطوط دوبل و شلوغ شوند
  • تنظیم border-spacing وقتی border-collapse: collapse روشن است (فاصله نادیده گرفته می‌شود)
  • padding خیلی کم که دادهٔ فشرده را سخت‌خوان می‌کند
  • هاور نئونی یا راه‌راه سنگین که با محتوا می‌جنگد
  • قاطی کردن این درس با نشانگر list-style (درس قبلی)

خلاصه

  • border-collapse: collapse پیش‌فرض آرام برای جدول داده است
  • برای فاصله بین سلول‌ها از separate + border-spacing استفاده کنید
  • عرض، padding و تراز خوانایی را شکل می‌دهند
  • ردیف راه‌راه و هاور ملایم اسکن جدول عریض را آسان می‌کنند
  • ساختار در HTML بماند؛ ظاهر را با CSS جلوه بدهید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
8
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 32 از 35
Css آموزش