جلسه 10 آموزش HTML: ساخت جدول و کار با تگ table

سلام دوستِ عزیزم! خوشحالم که به جلسهٔ دهم آموزش HTML رایا وردپرس رسیدی! 🎉 امروز میخوایم یکی از جذابترین و کاربردیترین بخشهای HTML رو باهم یاد بگیریم: ساخت جدول! جدول ها مثل یه دنیای کوچیک هستن، که اطلاعات رو منظم و خوشگل نمایش میدن. مثلاً برای نمایش لیست قیمت ها، برنامهٔ هفتگی، مقایسهٔ محصولات و خیلی چیزهای دیگه کاربرد دارن.

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

یادت باشه، جدول فقط برای متن نیستن! میتونی توشون عکس، لینک، دکمه و هرچیزی که بخوای بذاری. حتی میتونی با CSS بهشون ظاهری مدرن و جذاب بدی! پس دست به کار شو و باهام همراه باش تا یه جدول حرفه ای بسازی.

تو این جلسه، قدم به قدم جلو میریم. اول ساختار سادهٔ جدول رو یاد میگیری، بعد سراغ ویژگی های پیشرفته تر مثل ادغام سلول ها میریم. نگران نباش، همه چیز رو با مثال های واضح برات توضیح میدم. فقط کافیه تمرکز کنی و کدها رو همراه من بنویسی!

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

خب دیگه وقتشه بریم ببینیم جدول ها چطوری کار میکنن! 🚀

📌 ساختار اولیهٔ جدول در HTML

هر جدول سه بخش اصلی داره:

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

🎯 مثال ساده:
فرض کن میخوایم یه جدول 2×2 (دو سطر و دو ستون) بسازیم:

<table>
  <tr>
    <td>سلول ۱</td>
    <td>سلول ۲</td>
  </tr>
  <tr>
    <td>سلول ۳</td>
    <td>سلول ۴</td>
  </tr>
</table>

نتیجه:

🔥 اضافه کردن سرتیترهای جدول با تگ <th>

نکته: اگه می‌خوای عنوان ستون‌ها رو در جدولت مشخص کنی، باید از تگ <th> استفاده کنی تا متن داخلش بولد و وسط‌چین نمایش داده بشه. همچنین، برای اینکه خطوط جدول مشخص باشن، کافیه قبل از بسته شدن تگ <table>، از border="1" استفاده کنی. ✅

مثال:

<table border="1">
  <tr>
    <th>عنوان ۱</th>
    <th>عنوان ۲</th>
  </tr>
  <tr>
    <td>سلول ۱</td>
    <td>سلول ۲</td>
  </tr>
  <tr>
    <td>سلول ۳</td>
    <td>سلول ۴</td>
  </tr>
</table>

در کد بالا، علاوه بر اینکه از تگ <th> برای نمایش عنوان هر ستون استفاده شده، از border="1" هم بهره بردم تا حاشیه‌های جدول مشخص بشه و خطوط بین سلول‌ها به‌درستی برای کاربر نمایش داده بشن. ✅

ساختار حرفه ای تر جدول با <thead>, <tbody>, <tfoot> 🌟

حالا که با جدول‌های ساده و ساختار اصلی تگ <table> آشنا شدی، وقتشه قدم بعدی رو برداری! بیا ساختاردهی حرفه‌ای‌تر رو امتحان کنیم تا جدول‌های بزرگت هم خواناتر و هم سازمان‌ یافته‌تر بشن. اینجاست که سه تگ جادویی <thead> (هدر جدول)، <tbody> (بدنه جدول) و <tfoot> (فوتر جدول) وارد بازی می‌شن! 🚀

• <thead>: شامل سطرهای هدره که معمولاً عنوان ستون‌ها رو توشون قرار می‌دی.
• <tbody>: بخش اصلی جدول که داده‌ها داخل سلول‌ها نمایش داده می‌شه.
• <tfoot>: بخش پایانی جدول که می‌تونی اطلاعات خلاصه یا جمع‌بندی رو در اون قرار بدی.

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

مثال:

<table border="1">
  <thead>
    <tr>
      <th>عنوان ۱</th>
      <th>عنوان ۲</th>
      <th>عنوان ۳</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>داده ۱</td>
      <td>داده ۲</td>
      <td>داده ۳</td>
    </tr>
    <tr>
      <td>داده ۴</td>
      <td>داده ۵</td>
      <td>داده ۶</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">جمع‌بندی جدول</td>
    </tr>
  </tfoot>
</table>

  👌 ایجاد کپشن برای جدول با تگ <caption>

کپشن مثل یه عنوان کوچیک و توضیحی هست که بالای جدول ظاهر میشه و به کاربر میگه این جدول دربارهٔ چیه. خیلی وقت ها جدول ها بدون توضیح گنگ به نظر میان، اما با <caption> میتونی این مشکل رو حل کنی!

 کپشن چیه و چرا مهمه؟

• کپشن یه متن کوتاهه که بالای جدول میاد و موضوع جدول رو توضیح میده.
• فوایدش:
  • کاربر میفهمه جدول دربارهٔ چیه. �
  • موتورهای جستجو بهتر جدول رو درک میکنن (سئو بهتر!). 🔍
  • جدول حرفه ای تر و خواناتر میشه. 📊

🛠 چطوری از <caption> استفاده کنیم؟

تگ <caption> رو داخل تگ <table> و قبل از <thead> قرار میدی. فقط یادت باشه که هر جدول فقط میتونه یک کپشن داشته باشه!

مثال:

<table border="1">
  <caption>🍎 لیست قیمت میوه‌ها (به تومان) </caption>
  <thead>
    <tr>
      <th>میوه</th>
      <th>قیمت</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>سیب</td>
      <td>۲۰,۰۰۰</td>
    </tr>
    <tr>
      <td>موز</td>
      <td>۱۵,۰۰۰</td>
    </tr>
  </tbody>
</table>

ترکیب سلول‌ های جدول با colspan و rowspan 🏆

وقتی توی جدول می‌خوای سلول‌ها رو با هم ادغام کنی تا داده‌ها به‌صورت گروهی نمایش داده بشن، از دو ویژگی colspan و rowspan باید استفاده کنی.

colspan – برای ادغام سلول‌ های افقی جدول

وقتی می‌خوای یه سلول چندتا ستون رو پوشش بده، از صفت colspan استفاده کن. بزار با یه مثال ساده برات توضیح بدم: فرض کن می‌خوای یه سلول در ردیف اول، دو ستون رو بگیره؛ کافیه در تگ آغازین <th> قبل از بسته شدن اون، مقدار colspan="2" رو قرار بدی.

<table border="1">
  <tr>
    <th colspan="2">عنوان مشترک برای دو ستون</th>
  </tr>
  <tr>
    <td>سلول ۱</td>
    <td>سلول ۲</td>
  </tr>
</table>

rowspan – برای ادغام سلول‌ های عمودی جدول

وقتی می‌خوای یه سلول چندتا سطر رو پوشش بده، از صفت rowspan استفاده کن. بزار با یه مثال ساده برات توضیح بدم: فرض کن می‌خوای سلولی از ردیف اول، دو ردیف رو در بر بگیره؛ کافیه در تگ آغازین <th>، قبل از بسته شدن اون، مقدار rowspan="2" رو قرار بدی. 😊

<table border="1">
  <tr>
    <th>عنوان</th>
    <th rowspan="2">عنوان ادغام شده</th>
  </tr>
  <tr>
    <td>سلول در ردیف دوم</td>
  </tr>
</table>

شخصی‌ سازی حرفه‌ای جدول در HTML 📊

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

• border 🛠️: این ویژگی ضخامت و ظاهر حاشیه‌های جدول رو تعیین می‌کنه. یعنی می‌تونی جدولت رو با یک چارچوب جذاب ایجاد کنی.

<table border="2">
  <tr>
    <td>سلول ۱</td>
    <td>سلول ۲</td>
  </tr>
</table>

✅ نتیجه: جدولی با حاشیه ضخامت ۲ پیکسل نمایش داده می‌شه.

• cellpadding 📏: این ویژگی فاصله بین محتوا رو از دیواره سلول‌ها رو مشخص می‌کنه؛ یعنی محتوا کمی از لبه سلول فاصله می‌گیره.

<table border="1" cellpadding="10">
  <tr>
    <td>سلول ۱</td>
    <td>سلول ۲</td>
  </tr>
</table>

✅ نتیجه: محتوای داخل سلول‌ها از دیواره فاصله می‌گیره (به اندازه ۱۰ پیکسل).

• cellspacing 🚧: این گزینه فاصله بین خود سلول‌ها رو تنظیم می‌کنه، تا سلول‌ها از هم کمی فاصله داشته باشن.

<table border="1" cellspacing="10">
  <tr>
    <td>سلول ۱</td>
    <td>سلول ۲</td>
  </tr>
</table>

• width 📐: با این ویژگی می‌تونی عرض کل جدول رو مشخص کنی.

<table border="1" width="50%">
  <tr>
    <td>سلول ۱</td>
    <td>سلول ۲</td>
  </tr>
</table>

• align 🧭: این ویژگی بهت اجازه می‌ده که جدول رو در صفحه به چپ، راست یا مرکز تراز کنی.
  🔹 left ➝ تراز چپ
  🔹 right ➝ تراز راست
  🔹 center ➝ تراز وسط

<table border="1" align="center">
  <tr>
    <td>سلول ۱</td>
    <td>سلول ۲</td>
  </tr>
</table>

📊 تگ <colgroup> چیه و کِی به درد مون می‌خوره؟

این یکی از تگ‌های کلیدی‌ای هست که می‌تونی داخل تگ <table> استفاده کنی. تصور کن یه جدولی داری با چند ستون، و می‌خوای تنظیمات خاصی (مثل رنگ، اندازه یا استایل) فقط روی بعضی از ستون‌ها اعمال کنی. حالا اگه بخوای برای هر سلول به صورت جداگانه این استایل‌ها رو بنویسی، هم کدت شلوغ می‌شه و هم کار سخت و زمان‌بری میشه. اینجا هست که تگ <colgroup> به کمک میاد! 🚀 با استفاده از این تگ، می‌تونی گروهی از ستون‌ها رو انتخاب کنی و به راحتی استایل‌های مورد نظرت رو روی همه‌شون اعمال کنی. اینطوری کدت تمیزتر و مدیریت‌ش راحت‌تر می‌شه!

🛠️ چطوری از <colgroup> برای استایل دهی به جدولمون استفاده کنیم؟

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

<table border="1">
  <colgroup>
    <col span="1" style="background-color: lightgray;">
    <col span="1" style="background-color: lightblue;">
  </colgroup>
  <tr>
    <th>نام</th>
    <th>شغل</th>
  </tr>
  <tr>
    <td>علی</td>
    <td>برنامه‌نویس</td>
  </tr>
  <tr>
    <td>زهرا</td>
    <td>طراح</td>
  </tr>
</table>

✅ نتیجه: ستون اول پس‌زمینه خاکستری داره، ستون دوم آبی کم‌ رنگ شده، بدون اینکه لازم باشه هر سلول رو جداگانه استایل بدی! 😎

🔢 استفاده از span برای اعمال یک استایل ثابت به چند ستون

اگه بخوای چند تا ستون رو همزمان با یک استایل خاص تغییر بدی، می‌تونی از ویژگی span استفاده کنی. به این صورت که می‌تونی مشخص کنی چند ستون باید تحت تأثیر قرار بگیرن و یک استایل مشترک دریافت کنن. اینطوری کارت سریع‌تر و ساده‌تر می‌شه!

مثلا من میخام رنگ ستون اول و دوم زرد باشه کدم به صورت زیر میشه:

<table border="1">
<colgroup>
  <col span="2" style="background-color: yellow;">
</colgroup>
  <tr>
    <th>نام</th>
    <th>شغل</th>
  </tr>
  <tr>
    <td>علی</td>
    <td>برنامه‌نویس</td>
  </tr>
  <tr>
    <td>زهرا</td>
    <td>طراح</td>
  </tr>
</table>

✅ نتیجه: این کد باعث می‌شه دو ستون اول جدول زرد بشن!

جمع بندی

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

خب عزیزم، الان تو یه استاد جدول سازی هستی! 🏆 یاد گرفتی چطوری با <table>، <tr>، <td> و <th> جدول بسازی، سلول ها رو ادغام کنی و حتی بهش استایل بدی. فراموش نکن که تمرین کنی و جدول های مختلف رو تست کنی.

اگر سوالی داری یا چیزی برات مبهمه، تو کامنتها بپرس.😍 تا جلسه بعدی، خوش بگذره بهت و همینطور به یادگیری ادامه بده!❤️