جلسه ۳۲ – استایل دهی به جداول در 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;
}

نتیجه:

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

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

کد CSS:

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

نتیجه:

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

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

خاصیت border-collapse

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

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

• collapse
• seperate

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

کد CSS:

table{
   border-collapse: collapse;
}

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

نتیجه:

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

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

کاملا برعکس 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;
}

نتیجه:

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

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

کد CSS:

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

نتیجه:

نکته: سلول های هر جدول، باید فضای کافی برای محتوای خودشون داشته باشن تا دو خاصیت vertical-align و text-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 رو به تگ های <th> و <td> اضافه کنیم:

th , td{
   padding: 20px;
}

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

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

پایان ترم

سوال:

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

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

نتیجه گیری

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

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

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

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

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

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