آموزش جامع جداول در HTML

🎯 اهداف یادگیری

• آشنایی با ساختار پایه جداول در HTML
• یادگیری تگ‌های اصلی و کاربردی جداول
• توانایی ایجاد جدول‌های پیچیده با ادغام سطرها و ستون‌ها
• استایل‌دهی و طراحی جداول جذاب

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

جداول در HTML با تگ <table> ایجاد می‌شوند و از چند تگ اصلی تشکیل شده‌اند:

<table>
  <tr>
    <th>عنوان ستون ۱</th>
    <th>عنوان ستون ۲</th>
  </tr>
  <tr>
    <td>داده ۱</td>
    <td>داده ۲</td>
  </tr>
</table>

تگ‌های اصلی جدول:

• <table>: پوشش اصلی جدول
• <tr>: تعریف سطر جدول (Table Row)
• <th>: سلول عنوان (Table Header) - به صورت پیش‌فرض پررنگ و居中
• <td>: سلول داده (Table Data)

📌 ویژگی‌های پیشرفته جداول

برای ایجاد جداول حرفه‌ای می‌توانید از این ویژگی‌ها استفاده کنید:

<table border="1" cellspacing="0" cellpadding="5" width="100%">
  <caption>عنوان جدول</caption>
  <thead>
    <tr>
      <th colspan="2">سربرگ اصلی</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">داده ادغام شده</td>
      <td>داده ۱</td>
    </tr>
    <tr>
      <td>داده ۲</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">پاورقی جدول</td>
    </tr>
  </tfoot>
</table>

ویژگی‌های مهم:

• colspan: ادغام افقی سلول‌ها (چند ستون)
• rowspan: ادغام عمودی سلول‌ها (چند سطر)
• thead, tbody, tfoot: بخش‌بندی معنایی جدول
• caption: عنوان توصیفی برای جدول
• border, cellspacing, cellpadding: کنترل ظاهر جدول

📌 استایل‌دهی جداول با CSS

برای زیباتر کردن جداول می‌توانید از CSS استفاده کنید:

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: right;
}
th {
  background-color: #f2f2f2;
  color: #333;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr:hover {
  background-color: #f1f1f1;
}

تکنیک‌های استایل‌دهی:

• رنگ‌آمیزی سطرها: استفاده از :nth-child(even/odd)
• هاور کردن: تغییر رنگ سطرها با hover
• حاشیه‌ها: استفاده از border-collapse برای حاشیه‌های یکدست
• تراز متن: کنترل تراز متن در سلول‌ها
• پهنای جدول: تنظیم عرض جدول و سلول‌ها

📌 تمرین عملی

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

<table>
  <tr>
    <th>نام محصول</th>
    <th>قیمت</th>
    <th>موجودی</th>
  </tr>
  <tr>
    <td>لپ‌تاپ</td>
    <td>15,000,000 تومان</td>
    <td>10 عدد</td>
  </tr>
</table>

راهنمای تمرین:

1. اضافه کردن عنوان به جدول با تگ <caption>
2. ادغام سلول قیمت و موجودی برای محصولات مشابه
3. اضافه کردن بخش thead و tbody
4. استایل‌دهی با CSS برای زیباتر شدن جدول
5. اضافه کردن ویژگی hover برای سطرها

📌 تمرین عملی

حالا نوبت شماست! یک جدول با اطلاعات زیر بسازید:

• عنوان‌ها: محصول، قیمت، موجودی
• داده‌ها:
  • محصول ۱: لپ‌تاپ، قیمت: ۱۵۰۰۰۰۰۰، موجودی: ۲۰
  • محصول ۲: موبایل، قیمت: ۵۰۰۰۰۰۰، موجودی: ۱۰
  • محصول ۳: تبلت، قیمت: ۷۰۰۰۰۰۰، موجودی: ۵