جدول‌ها در HTML؛ ساختار و نمایش داده‌های جدولی

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

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

<table>
  <tr>
    <td>علی</td>
    <td>۲۵</td>
  </tr>
  <tr>
    <td>سارا</td>
    <td>۳۰</td>
  </tr>
</table>

تعداد <td> در هر <tr> باید یکسان باشد تا ستون‌ها درست زیر هم قرار بگیرند.

<th> (Table Header) برای سرستون یا سرسطر استفاده می‌شود؛ یعنی خانه‌ای که توضیح می‌دهد بقیه خانه‌های همان ستون یا سطر چه هستند. <td> برای داده‌های معمولی است:

<table>
  <tr>
    <th>نام</th>
    <th>سن</th>
  </tr>
  <tr>
    <td>علی</td>
    <td>۲۵</td>
  </tr>
</table>

مرورگر به‌طور پیش‌فرض <th> را ضخیم و وسط‌چین نشان می‌دهد، اما فرق اصلی آن با <td> معنایی است، نه فقط ظاهری — <th> به صفحه‌خوان می‌گوید «این خانه، سرستون یا سرسطر است».

در جدول‌های بزرگ‌تر، می‌توانید سطرها را به سه بخش معنایی تقسیم کنید: <thead> برای سرستون‌ها، <tbody> برای بدنه اصلی داده‌ها، و <tfoot> برای جمع‌بندی یا جمع کل:

<table>
  <thead>
    <tr><th>محصول</th><th>قیمت</th></tr>
  </thead>
  <tbody>
    <tr><td>کتاب</td><td>۱۵۰,۰۰۰</td></tr>
  </tbody>
  <tfoot>
    <tr><td>جمع کل</td><td>۱۵۰,۰۰۰</td></tr>
  </tfoot>
</table>

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

<caption> عنوان جدول را مشخص می‌کند و باید بلافاصله بعد از تگ باز <table> بیاید:

<table>
  <caption>سفارش‌های اخیر</caption>
  <tr><th>کد سفارش</th><th>وضعیت</th></tr>
</table>

caption برای صفحه‌خوان‌ها اهمیت زیادی دارد؛ کاربر پیش از ورود به داخل جدول می‌فهمد این جدول درباره چیست.

attribute scope روی <th> مشخص می‌کند آن سرستون برای یک ستون است یا یک سطر:

<th scope="col">نام</th>
<th scope="row">سطر اول</th>

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

ترکیب همه چیزهایی که تا اینجا دیدیم:

<table>
  <caption>سفارش‌های امروز</caption>
  <thead>
    <tr>
      <th scope="col">کد سفارش</th>
      <th scope="col">مشتری</th>
      <th scope="col">مبلغ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>۱۰۰۱</td>
      <td>مریم رضایی</td>
      <td>۳۲۰,۰۰۰</td>
    </tr>
    <tr>
      <td>۱۰۰۲</td>
      <td>حسین کریمی</td>
      <td>۱۸۰,۰۰۰</td>
    </tr>
  </tbody>
</table>

از جدول برای داده‌های واقعاً جدولی استفاده کنید — چیزی که اگر آن را در یک صفحه‌گسترده باز کنید، منطقی به نظر برسد. برای چیدمان کلی صفحه (مثل قرار دادن هدر، منو و محتوا در کنار هم)، هرگز از جدول استفاده نکنید؛ این کار زمانی رایج بود اما امروز کار CSS (مثل Flexbox یا Grid) است. جدول‌های چیدمانی برای صفحه‌خوان‌ها گیج‌کننده‌اند، چون سعی می‌کنند آن‌ها را به‌اشتباه به‌عنوان داده جدولی واقعی توصیف کنند.

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

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

تعداد نامساوی td در سطرهای مختلف. این باعث می‌شود ستون‌ها درست زیر هم قرار نگیرند.

فراموش کردن caption در جدول‌های مهم. بدون caption، کاربر صفحه‌خوان باید داخل جدول برود تا بفهمد موضوع آن چیست.