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

کمی پیشرفته تر با جداول 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 افقی

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

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

جدول با border افقی - بدون استفاده از 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 عمودی

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

جدول با border عمودی و افقی نا کامل

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

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

جدول با 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;
}

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

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

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

جدول با border افقی - حالت 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;
}

نتیجه:

جدول با border افقی - حالت hoverهمونطور که میبینیم، به کد های CSS ما، این دستور با نحوه نوشتار و سینتکس متفاوتی اضافه شده.

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

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

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

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

نتیجه:

مثال کلی تر از hover در جداول

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

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

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

کد 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;
}

نتیجه:

مثال نهایی جداول

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

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

کوییز مقاله ۳۳

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

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

[/box]

نتیجه گیری

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

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

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

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

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

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

10 نظر

10 پاسخ

  1. سلام ببخشید من تو جدولم نوشتم ردیف فرد همشون وقتی hover شدن یه رنگی بگیره .ولی وقتی بهth backgroundدادم دیگه رو اون hoverنمیشه چرا؟؟؟ازنظر قدرت سلکتورم باید hoverاولویت داره

    1. سلام محسن
      نمیشه ب این پاسخ داد که باید کدها رو دید.

    1. متين كدا و توضيحاتت حس ميكنم كامل نيومده. اگه كامل نيومده مجدد بفرستي ممنون ميشم.

      1. tr:nth-child(2) td:nth-child(5) {
        background-color: indianred;
        }
        دیدم نمیفرسته فقط همون خط تغییرات سی اس اس رو فرستادم

  2. من گشتم ولی نفمیدم چجور میشه فقط بک گراند سلول رو به تنهای رنگ داد بهش میشه توضیح بدین چجوری میشه؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=