جلسه ۳۳ – استایل های پیشرفته جداول در CSS

منظور از استایل های پیشرفته جداول CSS چیست؟ چگونه می‌توانیم از استایل های پیشرفته جداول CSS استفاده کنیم. بخش پیشرفته جداول در CSS چیست ؟ خاصیت های پیشرفته جداول CSS را چگونه می‌توانیم استفاده کنیم؟ در این مقاله، استایل دهی به جداول رو به شکل پیشرفته تری بررسی می‌کنیم و یاد می‌گیریم.

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

همچنین اگر به طور کلی با جداول آشنایی ندارید، مقاله جدول در HTML چیست را مطالعه کنید.

چطور حاشیه های “فقط عمودی” یا “فقط افقی” در جداول داشته باشیم؟

برای پاسخ به این سوال، به خاصیت خاصی احتیاج نداریم و تنها کار لازم، اینه که یکم با خواص مربوط به حاشیه یا border بازی کنیم. مثلا به مثال زیر توجه کنین:

کد CSS:

table{
   border-collapse: collapse;
}

th , td{
   border-bottom: 1px solid #ddd;
   padding:20px;
   text-align: center;
   font-family: sans-serif;
   font-size: 0.8em;
}

نتیجه:

همونطور که مشاهده می‌کنیم، اینجا به جای استفاده مستقیم از خاصیت border برای عنصر table، از خاصیت border-bottom برای ۲ عنصر th و  td استفاده کردیم.

نکته: یادتون نره که حتما از خاصیت border-collapse استفاده کنین! وگرنه چنین نتیجه ای عایدتون می‌شه:

همونطور که می‌بینیم، بین خطوط زیر هر عنصر، ناپیوستگی هایی به وجود اومده.

ناگفته نمونه که ما قابلیت استفاده از borderهای دیگه رو هم داریم. به کد زیر توجه کنین:

کد CSS:

table{
   border-collapse: collapse;
}

th , td{
   border-right: 1px solid #ddd;
   padding:20px;
   text-align: center;
   font-family: sans-serif;
   font-size: 0.8em;
}

نتیجه:

یا حتی می‌تونیم به صورت ترکیبی و هنرمندانه تر از این حاشیه ها استفاده کنیم. برای مثال، به کدی که بالاتر گفتیم، یه border-bottom هم اضافه کنیم و border-collapse رو از تگ table حذف کنیم. نتیجه به صورت زیر می‌شه:

استفاده از خاصیت hover در جداول

حالا چطوری می‌تونیم با استفاده از دستوری مثل hover، جداول جذاب تری بسازیم؟ به جدول زیر توجه کنین:

حالا بیاید کد مربوط به این مثال رو، به فرم زیر تغییر بدیم:

کد CSS:

table{
   border-collapse: collapse;
}

th , td{
   border-bottom: 1px solid #ddd;
   padding:20px;
   text-align: center;
   font-family: sans-serif;
   font-size: 0.8em;
}

tr:hover{
   background-color: #f5f5f5;
}

همونطور که می‌بینیم،‌قسمت آخر کد، یعنی انتخابگر tr به کد قبلی ما اضافه شده.

در مقاله حالت های مختلف برای لینک ها در CSS میزفا، یاد گرفتیم که hover، باعث تغییر کردن ویژگی های مربوط به انتخابگر ما می‌شه، پس در اینجا، با توجه به دستورات نوشته شده و با بردن نشان گر روی سطر سوم جدول، داریم:

اگه جایی از مثال ها رو متوجه نشدین، حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین، پاسخگو خواهم بود 🙂

استایل دادن به سطر های مختلف جدول

برای مطالعه این قسمت، نیازمند دانش مختصری از دستور ()nth-child هستیم.

توسط این دستور می‌تونیم انتخابگر های خاصی رو از تمامی انتخابگر هایی که در دسترس داریم، انتخاب کنیم.

دستور مذکور رو می‌تونین تو مقاله شبه کلاس ها در میزفا به صورت کامل مطالعه کنین.

به مثال زیر توجه کنین:

کد CSS:

table{
   border-collapse: collapse;
}

th , td{
   border-bottom: 1px solid #ddd;
   padding:20px;
   text-align: center;
   font-family: sans-serif;
   font-size: 0.8em;
}

tr:nth-child(2){
   background-color: #f5f5f5;
}

نتیجه:

همونطور که میبینیم، به کد های CSS ما، این دستور با نحوه نوشتار و سینتکس متفاوتی اضافه شده.

مفهوم اصلی این دستور به شکل زیره:

“در تگ های tr، دومین تگ رو پیدا کن و تغییرات رو بهش اعمال کن”

حالا میخوایم کاری کنیم که تگ دوم و چهارم، دچار تغییر رنگ مورد نظر شن، پس کدی که اضافه کردیم رو به فرم زیر تغییر می‌دیم:

tr:nth-child(2n){
   background-color: #f5f5f5;
}
/* --- یا --- */
tr:nth-child(even){
   background-color: #f5f5f5;
}

نتیجه:

یه مثال باحال!

حالا بیاید توسط یه جدول تقریبا جمع و جور، یه جمع بندی مناسب از بحثمون داشته باشیم.

به کد زیر توجه کنین:

کد HTML:

<table>
   <tr>
      <th>NAME <small>(Desc)</small></th>
      <th>WINS</th>
      <th>DRAWS</th>
      <th>LOSSES</th>
      <th>TOTAL</th>
   </tr>
   <tr>
       <td>Jack</td>
       <td>1</td>
       <td>1</td>
       <td>2</td>
       <td>3</td>
   </tr>
   <tr>
      <td>Harry</td>
      <td>0</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
   </tr>
   <tr>
      <td>Tom</td>
      <td>2</td>
      <td>0</td>
      <td>1</td>
   <td>5</td>
   </tr>
</table>

کد CSS:

table{
   width: 60vw;
   border-collapse: collapse;
}

th , td{
   padding:15px;
   text-align: center;
   font-family: sans-serif;
}

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

tr:nth-child(1){
   background-color: black;
   color:white;
}

نتیجه:

پایان ترم

سوال:

در تصویر زیر، مثالی رو می‌بینیم که یکم پیش با هم بررسی کردیم، اما با کمی تفاوت.

چطور می‌تونیم سلول پنجم خط اول رو به رنگ indianred در بیاریم؟

نکته: از اختصاص دادن کلاس و آیدی پرهیز کنین و با کمک روش های این مقاله، این مسئله رو حل کنین.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این مقاله، سه بخش رو با هم بررسی کردیم و یاد گرفتیم.

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

در بخش دوم، با کاربرد hover در جداول آشنا شدیم و نقش اون رو در جذاب تر کردن جداولمون متوجه شدیم.

و در بخش نهایی، با دستور nth-child به صورت خلاصه‌ آشنا شدیم و فهمیدیم چطور می‌تونیم تنها بخش های خاصی از جدولمون رو استایل بدیم.

در انتهای مقاله، با یک مثال کلی، تا جای ممکن، مباحث موجود در این مقاله و مقاله قبل رو جمع بندی کردیم.

امیدوارم که این مطلب هم براتون مفید بوده باشه 🙂

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

مدیر محتوا: علی اسمعیلی