فصل ۸: سازماندهی داده‌ها با جدول‌ها

فصل ۸: سازماندهی داده‌ها با جدول‌ها – نمایش منظم اطلاعات! 📊

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

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

ساختار اصلی یک جدول: 🏗️

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

<table>: این تگ اصلی‌ترین بخش جدول هست و کل جدول رو در بر می‌گیره.
<tr> (Table Row): هر کدوم از این تگ‌ها یک سطر (ردیف) در جدول رو مشخص می‌کنن.
<td> (Table Data): این تگ محتوای اصلی هر سلول (ستون) در یک سطر رو نگه می‌داره.

مثال ساده از یک جدول:


<table>
  <tr> <!-- سطر اول -->
    <td>نام</td>
    <td>نام خانوادگی</td>
  </tr>
  <tr> <!-- سطر دوم -->
    <td>علی</td>
    <td>رضایی</td>
  </tr>
  <tr> <!-- سطر سوم -->
    <td>مریم</td>
    <td>محمدی</td>
  </tr>
</table>

نکته: این جدول ساده، عنوان نداره و مرورگرها ممکنه به طور پیش‌فرض هیچ خطوطی براش نشون ندن. معمولاً برای خوانایی بهتر، از CSS برای اضافه کردن حاشیه‌ها و استایل استفاده می‌کنیم.

اضافه کردن عنوان جدول و سرستون‌ها: 👑

برای اینکه جدول ما حرفه‌ای‌تر به نظر برسه، می‌تونیم عناوین و سرستون‌ها رو مشخص کنیم:

<caption>: این تگ عنوان اصلی جدول رو مشخص می‌کنه و باید بلافاصله بعد از تگ <table> بیاد.
<th> (Table Header): این تگ برای سرستون‌ها یا سربرگ سطرها استفاده می‌شه. مرورگرها معمولاً متن داخل <th> رو پررنگ (Bold) و وسط‌چین نمایش می‌دن.


<table>
  <caption>لیست دانشجویان</caption> <!-- عنوان جدول -->
  <tr> <!-- سطر سرستون‌ها -->
    <th>شماره دانشجویی</th>
    <th>نام</th>
    <th>معدل</th>
  </tr>
  <tr> <!-- سطر اول داده‌ها -->
    <td>101</td>
    <td>علی</td>
    <td>18.50</td>
  </tr>
  <tr> <!-- سطر دوم داده‌ها -->
    <td>102</td>
    <td>مریم</td>
    <td>19.25</td>
  </tr>
</table>

گروه‌بندی بخش‌های جدول: 📦

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

<thead> (Table Head): برای گروه‌بندی سطر(های) سربرگ جدول.
<tbody> (Table Body): برای گروه‌بندی سطر(های) محتوای اصلی جدول.
<tfoot> (Table Foot): برای گروه‌بندی سطر(های) پاورقی جدول (مثلاً جمع کل یا میانگین).

این تگ‌ها به مرورگر کمک می‌کنن تا جدول رو بهتر تفسیر کنه و همچنین در زمان استایل‌دهی با CSS خیلی مفید هستن.


<table>
  <caption>گزارش فروش ماهانه</caption>
  <thead>
    <tr>
      <th>محصول</th>
      <th>تعداد فروخته شده</th>
      <th>قیمت واحد</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>کتاب</td>
      <td>50</td>
      <td>30000</td>
    </tr>
    <tr>
      <td>دفتر</td>
      <td>120</td>
      <td>15000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">مجموع کل فروش:</td> <!-- colspan یعنی این سلول عرض ۲ ستون رو بگیره -->
      <td>2,250,000</td>
    </tr>
  </tfoot>
</table>

ادغام سلول‌ها: colspan و rowspan 🔗

گاهی لازم می‌شه یک سلول، عرض چند ستون رو بگیره (colspan) یا ارتفاع چند سطر رو بگیره (rowspan).

colspan=”عدد”: تعداد ستون‌هایی که سلول باید اشغال کنه.
rowspan=”عدد”: تعداد سطرهایی که سلول باید اشغال کنه.

در مثال بالا، colspan=”2″ رو برای سلول “مجموع کل فروش” دیدیم.

جدول‌ها ابزاری عالی برای نمایش داده‌های ساختاریافته هستن. با ترکیب تگ‌های جدولی HTML و استایل‌های CSS، می‌تونید جداول زیبا، خوانا و کاربردی بسازید که درک اطلاعات رو برای کاربرانتون خیلی راحت‌تر می‌کنه.

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