قسمت ۱۲ – ساخت جدول در HTML

جدول در html با تگ <table> ساخته می‌شود و داده‌های دوبعدی (سطر و ستون) را نمایش می‌دهد؛ هر سطر با <tr>، هر سلول داده با <td> و هر سلول عنوان با <th> تعریف می‌شود. جدول فقط برای داده‌های جدولی است، مثل جدول قیمت، برنامه زمانی یا مقایسه مشخصات، و نه برای چیدمان صفحه.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

در این قسمت یاد می‌گیرید تگ table را با بخش‌بندی thead، tbody و tfoot بسازید، با caption عنوان جدول بگذارید، سلول‌ها را با colspan و rowspan ادغام کنید، با اتریبیوت scope جدول را برای صفحه‌خوان قابل فهم کنید و جدول را در موبایل بدون شکستن صفحه نمایش دهید. پیش از این، در قسمت ۱۱: لیست‌ها در HTML داده‌های یک‌بعدی را با لیست نمایش دادیم.

جدول در html چیست و چه زمانی باید از آن استفاده کرد؟

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

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

تگ table چطور ساخته می‌شود؟ (ساده‌ترین جدول)

ساده‌ترین جدول از یک <table> تشکیل می‌شود که داخلش چند <tr> (سطر) قرار دارد و هر سطر شامل چند <th> (سلول عنوان) یا <td> (سلول داده) است. تعداد سلول‌های هر سطر باید با بقیه سطرها هماهنگ باشد.

<table>
  <tr>
    <th>نوشیدنی</th>
    <th>قیمت (تومان)</th>
  </tr>
  <tr>
    <td>اسپرسو</td>
    <td>۸۵٬۰۰۰</td>
  </tr>
  <tr>
    <td>لاته</td>
    <td>۱۱۰٬۰۰۰</td>
  </tr>
</table>

در صفحه‌ای با dir="rtl"، اولین سلول هر سطر سمت راست قرار می‌گیرد و ستون‌ها از راست به چپ چیده می‌شوند؛ نیازی به تنظیم اضافه نیست. مرورگر به‌طور پیش‌فرض متن th را پررنگ و وسط‌چین نمایش می‌دهد. این جدول کار می‌کند، اما هنوز کامل نیست؛ در بخش بعد ساختار حرفه‌ای آن را می‌سازیم.

thead، tbody و tfoot چه کاری انجام می‌دهند؟

thead سطرهای عنوان جدول، tbody سطرهای داده اصلی و tfoot سطرهای جمع‌بندی یا توضیح پایانی را گروه‌بندی می‌کنند. این بخش‌بندی معنای جدول را برای مرورگر و صفحه‌خوان روشن‌تر می‌کند، استایل‌دهی را ساده می‌کند و هنگام چاپ جدول‌های طولانی، مرورگر می‌تواند thead را در بالای هر صفحه تکرار کند.

<table>
  <caption>منوی نوشیدنی‌های گرم کافه</caption>
  <thead>
    <tr>
      <th scope="col">نوشیدنی</th>
      <th scope="col">حجم</th>
      <th scope="col">قیمت (تومان)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">اسپرسو</th>
      <td>۳۰ میلی‌لیتر</td>
      <td>۸۵٬۰۰۰</td>
    </tr>
    <tr>
      <th scope="row">کاپوچینو</th>
      <td>۲۰۰ میلی‌لیتر</td>
      <td>۱۰۵٬۰۰۰</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">قیمت‌ها شامل مالیات بر ارزش افزوده است.</td>
    </tr>
  </tfoot>
</table>

caption در جدول چرا مهم است؟

تگ caption عنوان قابل‌مشاهده جدول است و باید اولین فرزند table باشد. صفحه‌خوان caption را هنگام رسیدن به جدول اعلام می‌کند تا کاربر قبل از ورود به سلول‌ها بداند جدول درباره چیست. طبق مستندات MDN درباره table، caption راه توصیه‌شده برای توصیف جدول است. اگر می‌خواهید caption زیر جدول نمایش داده شود، از CSS caption-side: bottom استفاده کنید، نه از جابه‌جایی تگ.

اتریبیوت scope برای دسترس‌پذیری

اتریبیوت scope روی th مشخص می‌کند این عنوان مربوط به ستون (col)، سطر (row) یا گروهی از ستون‌ها و سطرها (colgroup و rowgroup) است. در مثال بالا نام نوشیدنی‌ها هم th با scope="row" هستند؛ پس صفحه‌خوان در سلول «۸۵٬۰۰۰» می‌تواند بگوید «اسپرسو، قیمت: ۸۵٬۰۰۰». در جدول‌های ساده مرورگر معمولاً این رابطه را حدس می‌زند، اما نوشتن صریح scope جای حدس را می‌گیرد.

نکته: ترتیب نوشتن thead، tbody و tfoot در کد مهم است: caption، سپس colgroup (اگر دارید)، سپس thead، tbody و در آخر tfoot. مرورگر tfoot را همیشه در انتهای جدول نمایش می‌دهد.

تگ / اتریبیوت	کار	جایگاه	نکته
<table>	ظرف کل جدول	–	فقط برای داده جدولی
<caption>	عنوان جدول	اولین فرزند table	برای دسترس‌پذیری ضروری
<thead>	گروه سطرهای عنوان	بعد از caption و colgroup	در چاپ تکرار می‌شود
<tbody>	گروه سطرهای داده	بعد از thead	می‌تواند چندتا باشد
<tfoot>	گروه سطرهای پایانی	آخر جدول	جمع کل، توضیحات
<tr>	یک سطر	داخل thead، tbody یا tfoot	–
<th>	سلول عنوان	داخل tr	همراه scope
<td>	سلول داده	داخل tr	–
colspan	ادغام افقی سلول	روی th یا td	تعداد ستون‌ها
rowspan	ادغام عمودی سلول	روی th یا td	تعداد سطرها
scope	محدوده عنوان	روی th	col، row، colgroup، rowgroup
<colgroup> / <col>	گروه‌بندی ستون برای استایل	بعد از caption	خاصیت‌های CSS محدود

colspan و rowspan چطور سلول‌ها را ادغام می‌کنند؟

colspan یک سلول را در چند ستون افقی پهن می‌کند و rowspan یک سلول را در چند سطر عمودی ادامه می‌دهد. مقدار هر دو، تعداد ستون یا سطری است که سلول اشغال می‌کند.

<table>
  <caption>برنامه کلاس‌های هفتگی</caption>
  <thead>
    <tr>
      <th scope="col">روز</th>
      <th scope="col">۹ تا ۱۱</th>
      <th scope="col">۱۱ تا ۱۳</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">شنبه</th>
      <td colspan="2">کارگاه پروژه HTML (چهار ساعته)</td>
    </tr>
    <tr>
      <th scope="row">یکشنبه</th>
      <td rowspan="2">CSS پایه</td>
      <td>تمرین</td>
    </tr>
    <tr>
      <th scope="row">دوشنبه</th>
      <td>رفع اشکال</td>
    </tr>
  </tbody>
</table>

نکته کلیدی این است که وقتی سلولی با colspan=”۲″ دو ستون را می‌گیرد، آن سطر باید یک سلول کمتر داشته باشد. در rowspan هم سطرهای بعدی باید جای سلول ادغام‌شده را خالی بگذارند؛ در مثال بالا سطر «دوشنبه» فقط یک td دارد، چون ستون اول آن را rowspan سطر قبلی پر کرده است. اگر شمارش را اشتباه کنید، سلول‌ها از جدول بیرون می‌زنند یا جابه‌جا می‌شوند. در جدول‌های فارسی هم دقت کنید که «ستون اول» یعنی ستون سمت راست.

عنوان‌های چندسطحی با colgroup در scope

وقتی عنوان یک ستون، چند زیرستون را پوشش می‌دهد (مثلاً «پلن پایه» با زیرستون‌های ماهانه و سالانه)، از scope="colgroup" روی عنوان بالایی استفاده کنید:

<table>
  <caption>مقایسه پلن‌های میزبانی</caption>
  <thead>
    <tr>
      <td></td>
      <th scope="colgroup" colspan="2">پلن پایه</th>
      <th scope="colgroup" colspan="2">پلن حرفه‌ای</th>
    </tr>
    <tr>
      <td></td>
      <th scope="col">ماهانه</th>
      <th scope="col">سالانه</th>
      <th scope="col">ماهانه</th>
      <th scope="col">سالانه</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">فضای دیسک</th>
      <td>۱۰ گیگ</td><td>۱۰ گیگ</td>
      <td>۵۰ گیگ</td><td>۵۰ گیگ</td>
    </tr>
  </tbody>
</table>

چطور جدول را در موبایل ریسپانسیو کنیم؟

ساده‌ترین و امن‌ترین روش ریسپانسیو کردن جدول این است که جدول را داخل یک ظرف با overflow-x: auto قرار دهید تا در صفحه‌های کوچک فقط خود جدول اسکرول افقی بخورد، نه کل صفحه. روش‌های دیگر (مثل تبدیل سطرها به کارت با CSS) هم وجود دارند، اما ساختار جدول را برای صفحه‌خوان تغییر می‌دهند و باید با دقت پیاده شوند.

<div class="table-wrap" role="region"
     aria-labelledby="price-caption" tabindex="0">
  <table>
    <caption id="price-caption">جدول کامل قیمت‌ها</caption>
    ...
  </table>
</div>
<style>
  .table-wrap { overflow-x: auto; }
</style>

در این مثال ظرف اسکرول‌شونده با tabindex="0" برای کاربران کیبورد قابل انتخاب می‌شود تا بتوانند با کلیدهای جهت‌نما اسکرول کنند، و role="region" همراه aria-labelledby آن را با عنوان جدول به صفحه‌خوان معرفی می‌کند. در صفحه‌های راست‌چین، اسکرول افقی از سمت راست شروع می‌شود که دقیقاً همان رفتاری است که کاربر فارسی‌زبان انتظار دارد. اهمیت تجربه موبایل را در راهنمای کامل طراحی سایت هم توضیح داده‌ایم.

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

جدول خام HTML بدون CSS خط جداکننده ندارد و خوانایی کمی دارد. چند خط CSS کافی است تا جدول مرتب و خوانا شود. در کد زیر از text-align: start استفاده کرده‌ایم که در جدول راست‌چین یعنی راست‌چین و در جدول انگلیسی یعنی چپ‌چین؛ و از inline-size به‌جای width:

table {
  border-collapse: collapse;
  inline-size: 100%;
}
th, td {
  border: 1px solid #d0d7de;
  padding: 0.5rem 0.75rem;
  text-align: start;
}
thead th { background: #f3f4f6; }
tbody tr:nth-child(even) { background: #fafafa; }
caption { caption-side: bottom; padding-block: 0.5rem; }

اگر بخواهید یک یا چند ستون را برجسته کنید، <colgroup> و <col> راه کوتاه‌تری از کلاس دادن به همه سلول‌هاست؛ البته col فقط چند خاصیت CSS مثل background و width را می‌پذیرد:

<table>
  <colgroup>
    <col>
    <col span="2" class="highlight">
  </colgroup>
  <thead>
    <tr><th scope="col">ویژگی</th><th scope="col">پلن الف</th><th scope="col">پلن ب</th></tr>
  </thead>
  ...
</table>

از تجربه تیم siloow: جدول‌ها در پنل‌های مدیریتی

در وب‌اپلیکیشن انبارداری و فروش و پنل‌های مدیریت تیم و پروژه که تیم siloow ساخته است، جدول‌ها قلب رابط کاربری هستند: لیست کالاها، سفارش‌ها، موجودی شعبه‌ها و گزارش‌ها. بزرگ‌ترین چالش ما نمایش جدول‌های ۸ تا ۱۰ ستونی در تبلت و موبایل انباردارها بود. اول سعی کردیم سطرها را در موبایل به کارت تبدیل کنیم، اما مقایسه بین سطرها سخت شد و کاربران شکایت کردند. راه‌حل نهایی ترکیبی بود: ستون‌های کم‌اهمیت در موبایل پنهان می‌شوند، ستون اول (نام کالا) هنگام اسکرول افقی ثابت می‌ماند و بقیه جدول داخل ظرف اسکرول‌شونده قرار می‌گیرد. درس اصلی این بود که برای داده واقعی جدولی، جدول واقعی با thead و scope همیشه بهتر از شبیه‌سازی با div است.

اشتباهات رایج در ساخت جدول در html

• استفاده از جدول برای چیدمان صفحه به‌جای CSS Grid و Flexbox.
• استفاده از td پررنگ به‌جای th برای عنوان‌ها.
• جا انداختن caption و نبود هیچ توضیحی برای جدول.
• شمارش اشتباه سلول‌ها بعد از colspan یا rowspan.
• جدول‌های عریض بدون ظرف اسکرول که کل صفحه موبایل را افقی اسکرول می‌کنند.
• استفاده از اتریبیوت‌های منسوخ مثل border، cellpadding، bgcolor و align به‌جای CSS.
• قرار دادن جدول تو در تو برای ساختن سلول‌های پیچیده.

چه زمانی از جدول استفاده نکنیم؟

اگر داده شما فقط یک بعد دارد (مثلاً فهرست ویژگی‌ها)، لیست مناسب‌تر است. اگر داده «ویژگی: مقدار» است و فقط دو ستون دارد، <dl> که در قسمت ۱۱ دیدید ساده‌تر است. اگر هدف ساختن چیدمان کارت‌ها یا ستون‌های صفحه است، CSS Grid ابزار درست است. جدول را برای داده‌ای نگه دارید که خواننده واقعاً باید آن را در سطر و ستون مقایسه کند.

نوع داده	ساختار مناسب	مثال
فهرست یک‌بعدی بدون ترتیب	<ul>	امکانات یک محصول
مراحل یا رتبه‌بندی	<ol>	مراحل ثبت سفارش
جفت ویژگی و مقدار	<dl>	مشخصات یک گوشی
داده چندستونی قابل مقایسه	<table>	مقایسه سه پلن میزبانی
چیدمان کارت‌ها و ستون‌های صفحه	CSS Grid یا Flexbox	گرید محصولات فروشگاه

تمرین این قسمت

1. یک جدول منوی کافه با caption، thead، tbody و tfoot بسازید که سه ستون (نام، حجم، قیمت) داشته باشد.
2. در همان جدول، نام نوشیدنی‌ها را th با scope=”row” کنید.
3. یک جدول برنامه هفتگی بسازید که یک کلاس با rowspan دو ساعت و یک کارگاه با colspan دو ستون را بگیرد.
4. یک جدول مقایسه پلن با عنوان‌های دوسطحی (colgroup) بسازید.
5. جدول را داخل ظرف اسکرول‌شونده بگذارید و در حالت موبایل DevTools بررسی کنید.

جمع‌بندی و خلاصه

• جدول در html فقط برای داده‌های سطر و ستونی است، نه چیدمان صفحه.
• تگ table با thead، tbody و tfoot بخش‌بندی می‌شود و caption عنوان آن است.
• th برای عنوان و td برای داده است؛ scope رابطه عنوان و داده را مشخص می‌کند.
• colspan و rowspan سلول‌ها را ادغام می‌کنند و باید تعداد سلول‌ها را با دقت حساب کرد.
• برای موبایل جدول را داخل ظرفی با overflow-x: auto قرار دهید.

همه قسمت‌ها را در دوره رایگان کدپرس ببینید. اگر پروژه‌ای با پنل مدیریتی و جدول‌های داده دارید، خدمات طراحی و توسعه وب siloow را ببینید و برای آشنایی با تفاوت سایت و پنل‌های کاربردی، مقاله تفاوت سایت و وب اپلیکیشن را بخوانید. در قسمت بعد، «قسمت ۱۳ – فرم در HTML؛ تگ form و label»، ساخت فرم را شروع می‌کنیم.

منابع

• MDN: The Table element
• MDN: HTML table accessibility
• W3C WAI: Tables Tutorial
• WHATWG HTML Living Standard: Tabular data

سوالات متداول درباره جدول در html