جلسه چهاردهم: آموزش کامل جدول (table) در HTML

به دوره حرفه‌ای آموزش HTML در آوای وب خوش اومدی! اینجا قراره تگ قدرتمند <table> رو با مثال‌های واقعی و توضیحات کاملاً کاربردی یاد بگیری و جدول‌هایی دقیق، حرفه‌ای و شیک برای صفحات وب طراحی کنی. تگ <table> ابزار قدرتمند HTMLـه که داده‌ها رو تو ردیف‌ها و ستون‌ها منظم می‌کنه و تجربه کاربری رو به اوج می‌رسونه. با این آموزش جامع از آوای وب پر از مثال‌های عملی همه‌چیز درباره تگ <table>، تگ‌های مرتبط، و فوت‌و‌فن‌های حرفه‌ای رو یاد می‌گیری! بزن بریم!

📊 تگ table چیه و چرا باید یادش بگیری؟

تگ <table> تو HTML برای ساخت جدول‌های منظم استفاده می‌شه؛ یعنی یه ساختار شبکه‌ای از ردیف‌ها و ستون‌ها که بهت کمک می‌کنه اطلاعات رو خیلی تمیز و قابل فهم نشون بدی.

مثال‌هایی از کاربردش؟
🔹 نمایش فهرست قیمت محصولات
🔹 طراحی برنامه‌ زمان‌بندی کلاس‌ها یا جلسات
🔹 نشون دادن آمار و گزارش‌های مالی
🔹 جدول مقایسه ویژگی‌های محصول

اما چرا باید بلد باشی؟

چون جدول‌ها فقط یه ابزار نمایشی نیستن! اگر حرفه‌ای ازشون استفاده کنی:

• درک اطلاعات برای کاربرها خیلی راحت‌تر می‌شه
• نظم بصری بالاتری به صفحه می‌دی
• و مهم‌تر از همه: اگه اصولی طراحی بشه، می‌تونه تأثیر مثبتی روی سئو سایتت بذاره!

یاد گرفتن تگ <table> یعنی ورود به دنیای حرفه‌ای ساختاردهی داده‌ها توی صفحات وب. پس اینجا قراره با هم ریز‌به‌ریزش رو یاد بگیریم.

🧱 ساختار تگ table : ساده اما حرفه‌ای

تگ <table> یه پایه سادست که با تگ‌های داخلش زنده می‌شه: که همیشه باید به صورت باز و بسته استفاده بشه، یعنی با <table> شروع و با </table> بسته می‌شه.

مثال ساده:

<table>

</table>

مثال کاربردی:

<table>
    <tr>
        <th>نام</th>
        <th>سن</th>
        <th>شغل</th>
    </tr>
    <tr>
        <td>شهرام</td>
        <td>40</td>
        <td>مهندس</td>
    </tr>
    <tr>
        <td>آزیتا</td>
        <td>34</td>
        <td>معلم</td>
    </tr>
</table>

📌 نتیجه: کد بالا به این صورت نمایش داده می‌شه:

توضیح: تگ <table> جدول رو شروع می‌کنه، تگ <tr> ردیف‌ها رو می‌سازه، تگ <th> سرستون‌ها رو مشخص می‌کنه (bold و وسط‌چین)، و تگ <td> داده‌ها رو نگه می‌داره. به همین راحتی یه جدول خوانا داری!

🧩 تگ tr

تگ <tr> یعنی “table row” و به معنی ردیف جدول هست. هر وقت می‌خوایم یه ردیف جدید تو جدول بسازیم، از <tr> استفاده می‌کنیم. داخل این ردیف، سلول‌ها قرار می‌گیرن که با تگ‌های <td> (سلول‌های عادی) یا <th> (سلول‌های عنوان) پر می‌شن.

🧩 تگ th

تگ <th> یعنی “table header” و برای سلول‌های عنوان جدول استفاده می‌شه. این سلول‌ها معمولاً داخل ردیف اول یا ردیف‌های سرستون‌ها قرار می‌گیرن و معمولاً به صورت متن پررنگ و وسط‌چین نمایش داده می‌شن.

سلول‌های <th> به ربات‌های موتور جستجو و ابزارهای کمکی (مثل اسکرین ریدر) کمک می‌کنن بفهمن این سلول‌ها عنوان ستون یا ردیف هستن و اطلاعات جدول رو بهتر درک کنن.

🧩 تگ td

تگ <td> یعنی “table data” و برای سلول‌های عادی جدول استفاده می‌شه. هر داده‌ای که می‌خوای تو جدول نمایش بدی، داخل این سلول‌ها قرار می‌گیره. <td> داخل ردیف‌ها (<tr>) قرار می‌گیره و می‌تونه متن، عدد، عکس یا حتی عناصر دیگه HTML باشه.

📦 تگ‌های ساختاردهنده جدول: tfoot ،tbody ،thead و caption

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

در ادامه توضیح بیشتری ارائه می‌دم:

🧩 تگ caption

این تگ برای اضافه کردن عنوان یا توضیح کوتاه بالای جدول استفاده می‌شه. عنوان باعث می‌شه کاربر و موتورهای جستجو سریع‌تر بفهمن جدول درباره چیه و کمک می‌کنه محتوا بهتر شناخته بشه.

مثال:

<table>
  <caption>فهرست قیمت محصولات</caption>
  ...
</table>

🧩 تگ thead

تگ <thead> شامل بخش سرستون‌های جدول می‌شه. معمولاً داخلش یک یا چند <tr> قرار می‌گیره که داخل‌شون <th> برای عنوان ستون‌ها وجود داره.

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

مثال:

<table>
  <thead>
    <tr>
      <th>نام</th>
      <th>قیمت</th>
      <th>موجودی</th>
    </tr>
  </thead>
  ...
</table>

🧩 تگ <tbody>

این تگ بخش بدنه اصلی جدول رو تشکیل می‌ده؛ یعنی داده‌های اصلی که زیر سرستون‌ها میاد. استفاده از <tbody> باعث می‌شه جدول ساختارمندتر بشه و بشه روی بخش‌های مختلف جداگونه استایل یا اسکریپت اعمال کرد.

مثال:

<table>
  <thead> ... </thead>
  <tbody>
    <tr>
      <td>محصول ۱</td>
      <td>۵۰ هزار تومان</td>
      <td>موجود</td>
    </tr>
    <tr>
      <td>محصول ۲</td>
      <td>۷۰ هزار تومان</td>
      <td>ناموجود</td>
    </tr>
  </tbody>
</table>

🧩 تگ <tfoot>

تگ <tfoot> معمولاً برای نمایش جمع‌بندی، خلاصه یا اطلاعات پایانی جدول استفاده می‌شه؛ مثل جمع کل، میانگین یا توضیحاتی درباره جدول. این بخش معمولاً در پایین جدول قرار می‌گیره.

مثال:

<table>
  <thead> ... </thead>
 <tbody> ... </tbody>
  <tfoot>
    <tr>
      <td colspan="2">جمع کل</td>
      <td>۱۲۰ هزار تومان</td>
    </tr>
  </tfoot>
</table>

💡 چرا استفاده از این تگ‌ها مهمه؟

• ساختار بهتر: جدول مرتب و قابل فهم‌تر می‌شه.
• دسترسی بهتر: ابزارهای کمکی مثل اسکرین ریدرها می‌تونن بهتر تشخیص بدن بخش‌های مختلف جدول چیه.
• سئو بهتر: موتورهای جستجو می‌تونن داده‌ها رو بهتر تحلیل کنن و رتبه سایت بهتر بشه.
• استایل‌دهی راحت‌تر: می‌تونی به راحتی با CSS به بخش‌های مختلف جدول رنگ، فونت یا افکت بدی.
• کدنویسی بهتر: اسکریپت‌نویسی با جاوااسکریپت ساده‌تر می‌شه چون هر بخش جدول جداست.

حالا که با تگ‌های مهم داخل <table> آشنا شدی، بزار یه مثال حرفه‌ای‌تر بزنیم که هم ساختار خوبی داشته باشه، هم توش از همه تگ‌ها درست استفاده شده باشه.

مثال:

<table>
  <caption>فهرست کتاب‌های پرفروش</caption>
  <thead>
    <tr>
      <th>ردیف</th>
      <th>عنوان کتاب</th>
      <th>نویسنده</th>
      <th>قیمت</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>پدر پولدار، پدر فقیر</td>
      <td>رابرت کیوساکی</td>
      <td>۲۰ دلار</td>
    </tr>
    <tr>
      <td>2</td>
      <td>هنر بدست آوردن ثروت</td>
      <td>ناپلئون هیل</td>
      <td>۱۵ دلار</td>
    </tr>
  </tbody>
<tfoot>
    <tr>
      <td>جمع کل: 100 دلار</td>
    </tr>
  </tfoot>
</table>

📌 نتیجه کد بالا به این صورت نمایش داده می‌شه :

📦 اتریبیوت‌ها: ابزار حرفه‌ای برای جدول‌های خفن

اتریبیوت‌ها کمک می‌کنن جدول‌های ساده‌ات تبدیل بشن به جدول‌هایی حرفه‌ای و کاربردی‌تر.

✏️ اتریبیوت colspan

این اتریبیوت بهت اجازه می‌ده که یک سلول جدول، چند ستون کنار هم رو اشغال کنه. مثلا وقتی می‌خوای یه عنوان یا متن طولانی‌تر روی چند ستون باشه، colspan می‌تونه خیلی به کارت بیاد.

<table>
  <tr>
    <td colspan="2">دو سلول</td>
    <td>یک سلول</td>
  </tr>
  <tr>
    <td>یک سلول</td>
    <td>یک سلول</td>
    <td>یک سلول</td>
  </tr>
</table>

📌 نتیجه کد بالا به این صورت نمایش داده می‌شه :

✏️ اتریبیوت rowspan

rowspan دقیقاً مثل colspan کار می‌کنه، با این تفاوت که به جای ستون‌ها، چند ردیف پشت سر هم رو به یک سلول اختصاص می‌ده. یعنی می‌تونی یه سلول رو طوری درست کنی که در چند ردیف عمودی امتداد داشته باشه.

<table>
  <tr>
    <td rowspan="2">دو ستون</td>
    <td>یک ستون</td>
  </tr>
  <tr>
    <td>یک ستون</td>
  </tr>
</table>

📌 نتیجه کد بالا به این صورت نمایش داده می‌شه :

✏️ اتریبیوت scope

این ویژگی به تگ <th> اضافه می‌شه، به مرورگر اطلاع می‌ده که یک سلول هدر (سرصفحه) برای یک ستون، سطر، یا گروهی از ستون‌ها یا سطرها باشه. بیشتر کاربرد این اتریبیوت برای مرورگر و موتورهای جستجو هست و هیچ تغییری در ظاهر جدول نداره.

این ویژگی دارای چهار مقدار است:

مثال:

<table>
  <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>
</table>

🧩 تگ colgroup

تگ <colgroup> توی HTML بهت این امکان رو می‌ده که چند تا ستون رو با هم گروه‌بندی کنی و استایل خاصی بهشون بدی. این تگ بعد از <caption> و قبل از <thead>، <tfoot>، یا <tbody> قرار می‌گیره.

داخلش می‌تونی از تگ <col> استفاده کنی تا روی هر ستون جداگونه استایل بزاری یا از ویژگی span برای چندتا ستون همزمان استفاده کنی.

🧩 تگ col

تگ <col> همون ابزار اصلی برای انتخاب ستون‌هاست. باهاش می‌تونی استایل دلخواهت رو مستقیم به ستون‌ها اعمال کنی.

✏️ اتریبیوت span

ویژگی span هم بهت اجازه می‌ده بگی که این تگ روی چند ستون پشت سر هم اعمال بشه.

مثال :

<table>
  <colgroup>
    <col span="2" style="background-color: lightgray;">
    <col style="background-color: lightblue;">
  </colgroup>
  <thead>
    <tr>
      <th>عنوان 1</th>
      <th>عنوان 2</th>
      <th>عنوان 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>مثال 1.1</td>
      <td>مثال 1.2</td>
      <td>مثال 1.3</td>
    </tr>
    <tr>
      <td>مثال 2.1</td>
      <td>مثال 2.2</td>
      <td>مثال 2.3</td>
    </tr>
  </tbody>
</table>

📌 نتیجه کد بالا به این صورت نمایش داده می‌شه:

در این مثال:

با استفاده از اتریبیوت span و مقدار 2 دو ستون اول را انتخاب کرده و با استفاده از کد های css رنگ پس‌زمینه خاکستری روشن را به دو ستون اول اعمال می‌کنه. تگ <col> دوم رنگ پس‌زمینه آبی روشن را به ستون سوم اعمال می‌کنه.

📊 پروژه عملی: ساخت جدول قیمت محصولات

بیا اینو بساز:

<table>
  <caption>قیمت محصولات</caption>
  <thead>
    <tr>
      <th scope="col">محصول</th>
      <th scope="col">قیمت</th>
      <th scope="col">توضیح</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>کتاب</td>
      <td>50,000 تومان</td>
      <td>جدید</td>
    </tr>
    <tr>
      <td>دفتر</td>
      <td>20,000 تومان</td>
      <td>100 برگ</td>
    </tr>
  </tbody>
</table>

ذخیره کن، تو مرورگر بازش کن اگه منظم و خوانا بود، حرفه‌ای کار کردی! در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

🏁 جمع‌بندی: جدول‌هات رو حرفه‌ای بساز و بدرخش!

حالا دیگه تگ <table> و کل تگ‌ها و ویژگی‌های مربوط به جدول‌سازی رو مثل آب خوردن بلدی!
با همین مهارت می‌تونی داده‌ها رو مرتب نشون بدی، تجربه کاربری رو بالا ببری و حتی روی سئو تاثیر مثبت بذاری.

🔹 از ساختار ساده و اصولی جدول گرفته تا استفاده از <thead>, <tfoot>, <tbody>, <colgroup>, و حتی استایل‌دادن به ستون‌ها همه رو یاد گرفتی!
🔹 حالا وقتشه خلاقیتت رو نشون بدی:
یه جدول واقعی تو سایت یا پروژه‌ت بساز و باهاش بدرخش!

💡 یادت نره:
هر جدول خوب یعنی یه قدم حرفه‌ای‌تر شدن تو دنیای طراحی وب!
تو این مسیر، ما کنارتیم! سوال داشتی، مشکلی داشتی، همینجا بپرس!

💬 ایده‌هات رو فریاد بزن!

نظرت درباره تگ <table> چیه؟
چیزی هست که دوست داشتی تو این آموزش ببینی و نبود؟ یا یه سوالی تو ذهنت مونده و دنبال جوابشی؟

🗣️ همین پایین برامون کامنت بذار!
تیم پشتیبانی آوای وب همیشه آماده‌ست با جون و دل جواب بده و کمکت کنه 💪
یادت نره! هر سوالت ممکنه سوال خیلی‌های دیگه هم باشه، پس با صدای بلند بپرس!

شهرام نجفی

همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.