ساختار پایه جدول (table، tr، td، th)

table: وقتی داده‌هات واقعاً شکل جدولی دارن

تا اینجای دوره با متن، لینک و تصویر آشنا شدیم. حالا می‌رسیم به یکی از قدیمی‌ترین و در عین حال هنوز پرکاربردترین ساختارهای HTML: جدول. تو این درس با چهار تگ پایه‌ای جدول یعنی table، tr، td و th آشنا می‌شیم و می‌بینیم چطور یه جدول ساده و درست بسازیم.

تگ table: ظرف اصلی جدول

<table>
  <!-- محتوای جدول اینجا میاد -->
</table>

تگ table ظرف اصلی هر جدوله؛ درست مثل ul برای لیست‌ها، هر چیزی که مربوط به جدول باشه باید داخل همین تگ قرار بگیره.

تگ tr: هر سطر جدول

تگ tr مخفف Table Row هست و هر سطر افقی جدول رو مشخص می‌کنه:

<table>
  <tr>
    <!-- سلول‌های این سطر -->
  </tr>
  <tr>
    <!-- سلول‌های سطر دوم -->
  </tr>
</table>

تگ td: سلول داده‌ی معمولی

تگ td مخفف Table Data هست و هر سلول معمولی جدول رو نشون می‌ده که داده‌ی واقعی داخلشه:

<table>
  <tr>
    <td>علی محمدی</td>
    <td>۲۸</td>
    <td>تهران</td>
  </tr>
</table>

تگ th: سلول سربرگ

تگ th مخفف Table Header هست و برای سلول‌های سربرگ (عنوان ستون یا سطر) استفاده می‌شه، نه برای داده‌ی معمولی:

<table>
  <tr>
    <th>نام</th>
    <th>سن</th>
    <th>شهر</th>
  </tr>
  <tr>
    <td>علی محمدی</td>
    <td>۲۸</td>
    <td>تهران</td>
  </tr>
</table>

مرورگر به‌صورت پیش‌فرض، محتوای th رو پررنگ (Bold) و وسط‌چین نمایش می‌ده تا از td های معمولی متمایز باشه. اما نکته‌ی مهم‌تر اینه که th فقط یه تفاوت ظاهری نیست؛ th یه معنای ساختاری داره: «این سلول، عنوان و توضیح‌دهنده‌ی بقیه‌ی سلول‌های این سطر یا ستونه».

یه جدول کامل و ساده

<table>
  <tr>
    <th>محصول</th>
    <th>قیمت</th>
    <th>موجودی</th>
  </tr>
  <tr>
    <td>کفش ورزشی</td>
    <td>۵۰۰,۰۰۰ تومان</td>
    <td>موجود</td>
  </tr>
  <tr>
    <td>کوله پشتی</td>
    <td>۳۵۰,۰۰۰ تومان</td>
    <td>ناموجود</td>
  </tr>
</table>

بیا این کد رو بررسی کنیم: اولین tr شامل سه تا th هست که نقش عنوان ستون‌ها رو دارن (محصول، قیمت، موجودی). دو تر بعدی هرکدوم یه ردیف اطلاعات واقعی هستن که با td نوشته شدن. خروجی این کد، یه جدول سه‌ستونی و سه‌سطری هست که سطر اول (عنوان‌ها) پررنگ‌تر از بقیه دیده می‌شه.

ویژگی scope برای th: مشخص‌کردن نوع سربرگ

<table>
  <tr>
    <th scope="col">محصول</th>
    <th scope="col">قیمت</th>
  </tr>
  <tr>
    <th scope="row">کفش ورزشی</th>
    <td>۵۰۰,۰۰۰ تومان</td>
  </tr>
</table>

ویژگی scope مشخص می‌کنه یه سربرگ، عنوانِ یه ستونه (col) یا عنوانِ یه سطره (row). این ویژگی مخصوصاً برای صفحه‌خوان‌ها خیلی مهمه؛ چون کمک می‌کنه وقتی کاربر نابینا داره سلول به سلول جدول رو می‌شنوه، دقیقاً بفهمه هر عدد یا مقدار، مربوط به کدوم ستون و کدوم سطره.

جدولی که هم سربرگ ستون داره، هم سربرگ سطر

<table>
  <tr>
    <th scope="col"></th>
    <th scope="col">فروردین</th>
    <th scope="col">اردیبهشت</th>
  </tr>
  <tr>
    <th scope="row">فروش</th>
    <td>۱۲۰</td>
    <td>۱۵۰</td>
  </tr>
  <tr>
    <th scope="row">بازگشتی</th>
    <td>۵</td>
    <td>۸</td>
  </tr>
</table>

تو این مثال، هم سطر اول (فروردین، اردیبهشت) عنوان ستون‌ها هستن، هم ستون اول هر سطر (فروش، بازگشتی) عنوان سطرهاست. این ساختار برای جدول‌های دوبعدی که هم داده‌های افقی، هم داده‌های عمودی معنا دارن، خیلی رایجه.

محدودیت مهم: چه چیزی مستقیم داخل table یا tr مجازه؟

طبق استاندارد HTML5، فرزند مستقیم table باید tr باشه (یا تگ‌های گروه‌بندی که تو درس بعد می‌بینیم)، و فرزند مستقیم tr هم باید td یا th باشه. یعنی نمی‌شه مستقیم یه متن یا تصویر رو بین table و tr گذاشت:

<!-- اشتباه -->
<table>
  <p>این اشتباه است</p>
  <tr>
    <td>داده</td>
  </tr>
</table>

چند اشتباه رایج

• استفاده از th برای داده‌های معمولی، فقط به‌خاطر ظاهر پررنگ‌تر، بدون اینکه اون سلول واقعاً نقش سربرگ داشته باشه.
• استفاده از td برای عنوان ستون‌ها، به‌جای th، که باعث می‌شه صفحه‌خوان معنای سربرگ بودن اون سلول‌ها رو متوجه نشه.
• فراموش‌کردن ویژگی scope روی th در جدول‌های پیچیده که هم سربرگ سطر دارن، هم سربرگ ستون.
• استفاده از table برای چیدمان کلی صفحه (مثل قرار دادن منو و محتوا کنار هم با جدول)، که یه روش کاملاً قدیمی و غیرمعنایی محسوب می‌شه؛ table فقط باید برای داده‌های واقعاً جدولی استفاده بشه.

بهترین روش‌ها

• همیشه از th برای عنوان ستون‌ها یا سطرها استفاده کن، نه td.
• تو جدول‌های پیچیده، ویژگی scope رو حتماً روی th ها مشخص کن.
• table رو فقط برای داده‌های واقعاً جدولی (مثل جداول قیمت، برنامه‌ی زمانی، مقایسه‌ی محصولات) استفاده کن، نه برای چیدمان کلی صفحه.

نکته‌ی سئو

جدول‌های ساختاریافته و درست (با th و scope مشخص) به گوگل کمک می‌کنند داده‌های جدولی را بهتر تحلیل کنند؛ گاهی گوگل حتی می‌تواند محتوای یک جدول را مستقیماً در نتایج جستجو (مثل قطعه‌ی برجسته) نمایش دهد.

نکته‌ی دسترسی‌پذیری

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

جمع‌بندی

جدول در HTML5 از تگ table به‌عنوان ظرف اصلی، tr برای هر سطر، td برای سلول‌های داده‌ی معمولی، و th برای سلول‌های سربرگ تشکیل می‌شود. ویژگی scope روی th مشخص می‌کند سربرگ مربوط به ستون است یا سطر، و این ساختار هم برای دسترسی‌پذیری و هم برای سئو اهمیت زیادی دارد.