آموزش نحوه کار با جداول یا Tables در CSS

مقدمه

جداول (Tables) ابزار مهمی برای نمایش داده‌ها در صفحات وب هستند و با CSS می‌توان ظاهر آن‌ها را حرفه‌ای و جذاب کرد. با یادگیری استایل‌دهی جداول، می‌توانید نمایش داده‌ها را منظم و کاربرپسند کنید. برای یادگیری کامل CSS و طراحی حرفه‌ای جداول، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی استایل جداول

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

• border → تعیین حاشیه جدول و سلول‌ها
• border-collapse → ادغام یا جداسازی حاشیه‌ها
• padding → فاصله داخلی سلول‌ها
• text-align → ترازبندی محتوا در سلول‌ها
• background-color → رنگ پس‌زمینه جدول یا سلول‌ها

مثال عملی با کد

جدول ساده با حاشیه و فاصله داخلی:

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

تغییر رنگ ردیف‌ها:

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

ترازبندی محتوا:

td {
  text-align: left;
}

نکات مهم و توضیحات تکمیلی

• استفاده از border-collapse باعث طراحی یکپارچه جدول می‌شود.
• فاصله داخلی سلول‌ها با padding خوانایی را افزایش می‌دهد.
• می‌توان ردیف‌ها و ستون‌ها را با افکت‌های CSS متفاوت استایل‌دهی کرد.
• در طراحی Responsive باید جدول‌ها و سلول‌ها قابل انعطاف باشند.

ادامه آموزش CSS

برای یادگیری کامل تفاوت و کاربرد عناصر Block و Inline و طراحی ساختار صفحات، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.