جلسه ۳۲ – استایل دهی به جداول در CSS

زیبا سازی جدول ها در CSS

استایل دهی به جداول
استایل دهی به جداول

چگونه به تگ Table استایل بدیم؟ جدول چی هست ؟ منظور از استایل دهی به جداول چیست؟ چگونه جدول ها را در وب سایت زیبا کنیم؟ در این مقاله، یاد می‌گیریم که استایل دهی به جداول، بحث جدید و عجیبی نیست و تنها با تسلط و شناخت کافی به کد های HTML در جداول، می‌تونیم به راحتی با CSS جداولمون رو خوشتیپ کنیم!

قبل از هرچیزی مقاله مربوط به جداول در HTML را یک بررسی کوچکی بکنید و دوباره برای ادامه به این صفحه برگردید.

پس یادگیری دستورات مورد نظر رو شروع می‌کنیم.

border در جداول

جداول اصولا از یه عنصر خیلی بهره می‌برن، و اون هم حاشیه یا border هست.

border نقش بسیار مهمی رو در طراحی جداول بازی می‌کنه.

در اینجا قوانین مربوط به border تغییری نمی‌کنن و همون قوانین هستن. برای مثال می‌تونیم با دستور کوتاه شده یا shorthand property زیر، یک حاشیه یک پیکسلی، از نوع solid و با رنگ قرمز به جدولمون اضافه کنیم.

table{
   border: 1px solid red;
}

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

کد HTML:

<table>
   <tr>
      <th>First Name</th>
      <th>Last Name</th>
   </tr>
   <tr>
      <td> Vladimir </td>
      <td>Putin </td>
   </tr>
   <tr>
      <td>Donald </td>
      <td>Trump </td>
   </tr>
</table>

کد CSS:

table{
   border: 1px solid red;
}

نتیجه:

border کلی دور عنصر table

همونطور که می‌بینیم، حاشیه فقط دور کل جدول کشیده شده و دور بخش های داخلی اون حاشیه‌ای وجود نداره.

بنابراین کد CSS رو به فرم زیر تغییر می‌دیم:

کد CSS:

table , th , td{
   border: 1px solid red;
}

نتیجه:

border دور عناصر فرزند table

کمو بیش به جدول ایده آلمون نزدیک شدیم، اما هنوز اون چیزی نیست که می‌خوایم.

پس باید از دستور جدیدی استفاده کنیم:

خاصیت border-collapse

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

این خاصیت، دو مقدار رو می‌تونه قبول کنه:

  • collapse
  • seperate

حالا بیاین تو یه مثال، کد CSS جدول مثال قبل رو، با کمک این خاصیت یخورده تغییر بدیم:

کد CSS:

table{
   border-collapse: collapse;
}

table , th , td{
   border: 1px solid red;
}

نتیجه:

استفاده از دستور border-collapse: collapse

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

اما مقدار seperate چی کار می‌کنه؟

کاملا برعکس collapse عمل می‌کنه و به همون حالتی جدول رو برمی‌گردونه که بود. برای مثال:

حالت پیش فرض خاصیت border-collapse

 

ارتفاع و عرض جداول

ما می‌تونیم به هرکدوم از سطر ها و ستون های جدول، ارتفاع و عرض مربوط به خودشون رو اختصاص بدیم. به مثال زیر توجه کنین:

کد HTML:

<table>
   <tr>
      <th> First Name </th>
      <th> Last Name </th>
      <th> Country </th>
   </tr>
   <tr>
      <td> Ali </td>
      <td> Azimi </td>
      <td> Iran </td>
   </tr>
   <tr>
      <td> Francis </td>
      <td> Coldman </td>
      <td> USA </td>
   </tr>
   <tr>
      <td> Edward </td>
      <td> Johnson </td>
      <td> England </td>
   </tr>
   <tr>
      <td> Kamal </td>
      <td> Haasan </td>
      <td> India </td>
</tr>
</table>

کد CSS:

table, td, th {
border: 3px solid green;
}

table {
border-collapse: collapse;
width: 100%;
font-family: sans-serif;
}

th {
height: 70px;
}

نتیجه:

فضای بزرگ تر برای عنصر th در جدولهمونطور که می‌بینیم، ارتفاع سطر اول جدول به ۷۰ پیکسل افزایش پیدا کرده.

همینطور فونت متن داخل جدول به sans-serif تغییر پیدا کرده و رنگ و ضخامت حاشیه ی مورد استفاده در جدول، متفاوت شده.

به همین شکل، می‌تونیم ارتفاع عنصر td رو هم کم و زیاد کنیم. برای مثال، کافیه که قطعه کد زیر رو به کد های قبلیمون اضافه کنیم:

td{
   height:70px;
}

نتیجه:

فضای بزرگ تر برای تمامی عناصر فرزند در جدول

نکته: ارتفاع رو می‌تونیم به تمام سلول ها و سطر ها اختصاص بدیم، اما در مورد عرض، یه سری محدودیت ها داریم ! عرض رو تنها می‌تونیم به ۲ تگ <table> و <th> اختصاص بدیم که عرض اختصاص داده شده به تگ <table> همواره بر عرض اختصاص داده شده به تگ <th> غلبه می‌کنه!

یعنی چی؟ یعنی اگه عرض <table> برابر ۵۰۰ پیکسل و عرض <th> رو برابر ۲۰۰ پیکسل قرار بدیم، عرض ۵۰۰ پیکسلی برای عنصر th هم قرار داده می‌شه.

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

تراز کردن در سلول های جدول

ما مفاهیم مربوط به تراز کردن متن ها رو در مقاله چپ، راست و وسط چینی عناصر متنی در میزفا یاد گرفتیم.

فهمیدیم که تراز کردن با خاصیتی به نام text-align انجام می‌شه و شامل سه مقدار زیر می‌تونه باشه:

  • left
  • center
  • right

اما در اینجا، علاوه بر خاصیت text-align، خاصیت دیگه‌ای هم داریم که می‌تونه در تراز کردن های عمودی بهمون کمک کنه.

خاصیت vertical-align

نام این خاصیت، vertical-align هست و می‌تونه شامل سه مقدار زیر باشه:

  • top
  • bottom
  • middle

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

کد HTML:

<table>
   <tr>
      <th>
         Organization Name
      </th>
      <th>
         Country
      </th>
      <th>
         Rank
      </th>
   </tr>
   <tr>
      <td>
         Nasa
      </td>
      <td>
         United States
      </td>
      <td>
         1
      </td>
   </tr>
   <tr>
      <td>
         Roscosmos
      </td>
      <td>
         Russia
      </td>
      <td>
         3
      </td>
   </tr>
   <tr>
      <td>
         Jaxa
      </td>
      <td>
         Japan
      </td>
      <td>
         5
      </td>
   </tr>
</table>

کد CSS:

table , th , td{
   border: 2px solid orange;
}

table{
   border-collapse: collapse;
   font-family: monospace;
   text-align: center;
}

th , td{
   height: 30px;
}

نتیجه:استفاده از text-align در جدول

همونطور که می‌بینیم، با استفاده از خاصیت text-align، تونستیم متن رو داخل سلول ها تراز دهی کنیم و به وسط بیاریم. حالا بیاید با استفاده از خاصیت vertical-align، محتوای سلول ها رو در راستای عمودی، به پایین بیاریم. پس کافیه کد CSS مربوط به تگ <table> رو به شکل زیر تغییر بدیم:

کد CSS:

table{
   border-collapse: collapse;
   font-family: monospace;
   text-align: center;
   vertical-align: bottom;
}

نتیجه:

استفاده از vertical-align در جدول

نکته: سلول های هر جدول، باید فضای کافی برای محتوای خودشون داشته باشن تا دو خاصیت vertical-align و text-align بتونن به خوبی عمل کنن.

برای مثال، بیاید جدول زیر رو در نظر بگیریم:

جدول با ارتفاع ناکافی، خاصیت vertical-align کاربردی ندارد

ما اگه برای این جدول، text-align و vertical-align رو به کار ببریم، به خوبی کار نمی‌کنه.

دلیلش اینه که نوشته ها فضای خالی رو برای جا به جا شدن ندارن.

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

کاربرد padding در جدول

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

برای مثال، به جدول زیر و کد CSS مربوط به اون توجه کنین:

table , th , td{
   border: 2px solid black;
}

table{
   border-collapse: collapse;
   font-family: sans-serif;
   text-align: center;
}

th{
   background-color: black;
   color:white;
   font-size: 0.8em;
}

نتیجه:

جدول بدون padding

حالا بیاید خاصیت padding رو به تگ های <th> و <td> اضافه کنیم:

th , td{
   padding: 20px;
}

نتیجه به فرم زیر تغییر می‌کنه:

جدول با padding کافی

نکته: همونطور که می‌دونیم، padding به معنای فاصله محتوا، تا حاشیه داخلی خودش هست. بنابراین خاصیت های مربوط به تراز دهی در اینجا عمل نمی‌کنن! چرا که می‌تونه باعث به هم خوردن دستورات padding بشه.

پایان ترم

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

سوال:

به نظر شما، با چه دستوراتی می‌تونیم حاشیه های جدول زیر رو طراحی کنیم؟

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

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

[/box]

نتیجه گیری

تو این مقاله اموزشcss ، با استایل دهی مبتدی و ساده به جداول توسط CSS آشنا شدیم.

متوجه شدیم که برای border بندی جدولمون می‌تونیم از دستور border-collapse کمک بگیریم، و می‌تونیم مثل تمامی عناصر دیگه، از width و height برای تغییر عرض و طول عناصر در جدولامون استفاده کنیم.

در نهایت با تراز کردن متن در جدول توسط خاصیت های vertical-align‌ و text-align آشنا شدیم و نقش padding رو در جداولمون دیدیم.

امیدوارم که از این مقاله، به قدر کافی یاد گرفته باشین 🙂

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

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

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

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

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

13 نظر

13 پاسخ

  1. سلام
    من خروجی گرفتم نتیجه میده ولی حس میکنم خلاصه تر هم میشد نوشت(اگر اینطوره ممنون میشم توضیح بدید)

    1. سلام حسین عزیز. اره درست نوشتی کامل، و همچنین اره خیلی خلاصه تر هم میشه نوشت. مثلا یکی از کارایی که میشه کرد اینه:

      table{
               border-collapse: collapse;
            }
      
            td, th{
               text-align: center;
               vertical-align: middle;
               padding: 20px;
               border-right: 1px solid #c0c0c0;
            }

      نکته اول: برای تگ های th و td لازم نیست border-collapse بنویسی، برای table کافیه.
      نکته دوم: وقتی میتونیم مستقیما، فقط بوردر راست برای تگ هامون در نظر بگیریم، چرا تمام بوردر ها رو در نظر بگیریم بعد پاکشون کنیم؟ 🙂 پس مستقیم همون بوردر راست border-right رو میزاریم.

    1. ممنون علی اکبر ولی متاسفانه پاسخ صحیح نیست. یک بار دیگه به صورت سوال دقت کن?

  2. table,th,td{
    border:3px solid black;
    }
    table{
    border-collapse: collapse;
    font-family: monospase;
    text-align:center
    }
    th,td{
    height:50px;
    padding:20px;
    }

  3. table,th,td{
    border:3px solid black;
    }
    table{
    border-collapse: collapse;
    font-family: monospase;
    text-align:center;
    }
    th,td{
    height:50px;
    padding:20px;
    }

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

  4. table,
    th,
    td {
    border: 1px solid #ccc;
    }

    table {
    border-collapse: collapse;
    border: none;
    }

    th,
    td {
    padding: 20px;
    border: none;
    border-right: 1px solid #ccc;
    font-family: ‘Lucida Sans’, ‘Lucida Sans Regular’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Geneva, Verdana, sans-serif;
    }

    1. سلام عرفان. پاسخت دو مشکل اساسی داره:
      ۱. فقط سطر اول دارای border-right میشه.
      ۲. سطر ها از هم جدا جدا هستن، یعنی انگار border ها در راستای عمودی تیکه تیکه شدن و پیوسته نیستن.

  5. table , th , td{
    border:1px solid black;
    border-bottom-style: hidden;
    border-top-style: hidden;
    border-left-style: none;
    }

    1. مرسی مهدی. اما پاسخت یه مشکلی داره، و اونم اینه که ما در حاشیه های سمت راست جدول، دو حاشیه رو هم دیگه میبینیم.
      برای اصلاح این مشکل میتونی انتخابگر table رو از پاسخت حذف کنی.

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

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

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

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

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

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