آموزش طراحی و استایل‌دهی جدول‌ها در CSS: راهنمای ساده و کاربردی

جدول‌ها در HTML برای نمایش اطلاعات ساختاریافته به کار می‌روند و از تگ‌های خاصی مانند < table >، < tr >، < th > و < td > تشکیل می‌شوند. با استفاده از CSS می‌توان به این جدول‌ها استایل و طراحی جذابی بخشید که خوانایی و زیبایی آن‌ها را افزایش دهد. در این مقاله به شما نشان می‌دهیم که چگونه با استفاده از CSS، جدول‌هایی زیبا و حرفه‌ای طراحی کنید.

ساختار اولیه جدول در HTML

قبل از شروع استایل‌دهی، بهتر است ساختار اصلی یک جدول را بررسی کنیم. جدول‌ها از چندین تگ اصلی تشکیل می‌شوند:

• < table >: عنصر اصلی جدول.

• < tr >: یک ردیف در جدول.

• < th >: یک سلول سر ستون یا عنوان.

• < td >: یک سلول داده.

ساختار یک جدول ساده در HTML:

< table >
  < thead >
    < tr >
      < th > نام < / th >
      < th > سن < / th >
      < th > شغل < / th >
    < / tr >
  < / thead >
  < tbody >
    < tr >
      < td > علی < / td >
      < td > 30 < / td >
      < td > مهندس < / td >
    < / tr >
    < tr >
      < td > محمد < / td >
      < td > 25 < / td >
      < td > طراح < / td >
    < / tr >
    < tr >
      < td > سارا < / td >
      < td > 27 < / td >
      < td > نویسنده < / td >
    < / tr >
  < / tbody >
< / table >

در اینجا:

• < thead > و < tbody > برای جداسازی بخش عنوان و بخش داده‌های جدول استفاده شده‌اند.

حذف استایل‌های پیش‌فرض جدول

ابتدا بهتر است استایل‌های پیش‌فرض جدول را حذف کنیم تا بتوانیم با آزادی بیشتر به استایل‌دهی بپردازیم.

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
}

در اینجا:

• border-collapse: collapse مرزهای بین سلول‌ها را به هم می‌چسباند و از فاصله بین آن‌ها جلوگیری می‌کند.

• width: 100% جدول را به عرض کامل عنصر والد گسترش می‌دهد.

• padding فاصله داخلی سلول‌ها را تنظیم می‌کند تا متن درون سلول‌ها کمی فاصله داشته باشد.

افزودن مرز به سلول‌ها

برای افزودن مرز به سلول‌های جدول، می‌توانید از ویژگی border در th و td استفاده کنید.

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

در اینجا، مرزی با ضخامت 1 پیکسل و رنگ خاکستری روشن برای سلول‌ها ایجاد شده است.

تغییر رنگ پس‌زمینه سطرها

تغییر رنگ سطرهای جدول به صورت متناوب باعث خوانایی بهتر جدول می‌شود. با استفاده از شبه‌کلاس (even) می‌توانید به سطرهای زوج رنگ خاصی اختصاص دهید.

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

در اینجا، سطرهای زوج در بخش داده‌ها (tbody) به رنگ خاکستری روشن درمی‌آیند.

استایل‌دهی به سر ستون‌ها

برای متمایز کردن سر ستون‌ها از سایر سلول‌ها، می‌توانید رنگ پس‌زمینه و اندازه فونت را تغییر دهید.

th {
  background-color: #3498db;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

در اینجا:

• background-color رنگ پس‌زمینه سر ستون‌ها را به آبی تغییر می‌دهد.

• color: white رنگ متن را سفید می‌کند تا خوانایی بهتری داشته باشد.

استایل‌دهی به حاشیه جدول

برای بهبود ظاهر جدول، می‌توانید از ویژگی border-radius برای گوشه‌های گرد و box-shadow برای افزودن سایه استفاده کنید.

table {
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

در اینجا:

• border-radius: 8px گوشه‌های جدول را گرد می‌کند.

• box-shadow سایه‌ای ملایم در اطراف جدول ایجاد می‌کند.

تراز متن و استایل‌دهی فونت‌ها

با استفاده از text-align و font-family می‌توانید استایل متن در سلول‌های جدول را تنظیم کنید.

th, td {
  text-align: center;
  font-family: Arial, sans-serif;
}

در اینجا، متن در تمامی سلول‌ها در وسط تراز شده و از فونت ساده‌ای استفاده می‌کند.

افکت Hover برای ردیف‌های جدول

افکت hover می‌تواند جدول را تعاملی‌تر و جذاب‌تر کند. به کمک این افکت، هنگامی که کاربر موس را روی ردیفی از جدول قرار می‌دهد، رنگ پس‌زمینه تغییر می‌کند.

tbody tr:hover {
  background-color: #d9ebf5;
}

در اینجا، هنگام قرار گرفتن موس روی هر ردیف در بخش داده‌ها، رنگ پس‌زمینه آن ردیف به آبی ملایم تغییر می‌کند.

تراز کردن داده‌های عددی

معمولاً در جدول‌ها، داده‌های عددی باید به سمت راست تراز شوند تا نظم بیشتری داشته باشند.

td.number {
  text-align: right;
}

در اینجا، td.number داده‌های عددی را به سمت راست تراز می‌کند. کافی است به سلول‌های عددی کلاس number اضافه کنید.

استفاده از طراحی واکنش‌گرا برای جدول‌ها

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

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  th {
    text-align: left;
  }

  td {
    padding-left: 50%;
    text-align: left;
    position: relative;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    padding-left: 15px;
    font-weight: bold;
    color: #3498db;
  }
}

در اینجا:

• display: block تمامی عناصر جدول را به حالت بلوکی درآورده که باعث می‌شود در صفحه‌های کوچک به صورت عمودی نمایش داده شوند.

• td::before به هر سلول متنی اضافه می‌کند که نشان‌دهنده نوع داده (مانند "نام" یا "سن") است. برای استفاده از این روش، باید برای هر td، ویژگی data-label تعریف کنید.

مثال نهایی کد CSS کامل برای طراحی جدول

در این بخش کد نهایی را که تمامی استایل‌ها و افکت‌ها را شامل می‌شود، ارائه می‌کنیم:

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

th, td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
  font-family: Arial, sans-serif;
}

th {
  background-color: #3498db;
  color: white;
  font-weight: bold;
}

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

tbody tr:hover {
  background-color: #d9ebf5;
}

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  td {
    padding-left: 50%;
    text-align: left;
    position: relative;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    padding-left: 15px;
    font-weight: bold;
    color: #3498db;
  }
}

نتیجه‌گیری

استایل‌دهی جدول‌ها در CSS به شما امکان می‌دهد ظاهر و تجربه کاربری جدول‌ها را بهبود بخشید و اطلاعات را به صورت منظم و جذاب ارائه کنید. با استفاده از ویژگی‌های CSS مانند border-collapse، padding، hover و تکنیک‌های واکنش‌گرا می‌توانید جدول‌هایی زیبا و کاربرپسند طراحی کنید. با تمرین و استفاده از این نکات، می‌توانید در طراحی وب به مهارت‌های بهتری دست یابید و وب‌سایت‌های جذاب‌تری بسازید.