جداول

ساختار جدول

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

• <table> — ظرف جدول
• <tr> — سطر (Table Row)
• <th> — سلول عنوان (Table Header)
• <td> — سلول داده (Table Data)

بخش‌های جدول

برای ساختار بهتر، می‌توان جدول را به سه بخش تقسیم کرد:

• <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>

ادغام سلول‌ها (colspan و rowspan)

با colspan می‌توان چند ستون و با rowspan چند سطر را ادغام کرد:

<!-- colspan: ادغام چند ستون -->
<table border="1">
  <tr>
    <th>نام</th>
    <th colspan="2">اطلاعات</th>
  </tr>
  <tr>
    <td>علی</td>
    <td>سن: ۲۵</td>
    <td>شهر: تهران</td>
  </tr>
</table>

<!-- rowspan: ادغام چند سطر -->
<table border="1">
  <tr>
    <th>روز</th>
    <th>صبح</th>
    <th>عصر</th>
  </tr>
  <tr>
    <td>شنبه</td>
    <td>کلاس</td>
    <td rowspan="2">ورزش</td>
  </tr>
  <tr>
    <td>چهارشنبه</td>
    <td>کلاس</td>
  </tr>
</table>

عنوان جدول (caption)

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

<table>
  <caption>لیست دانش‌آموزان</caption>
  <thead>
    <tr>
      <th>نام</th>
      <th>نمره</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>علی</td>
      <td>۱۸</td>
    </tr>
  </tbody>
</table>

ستون‌های جدول (colgroup و col)

برای استایل‌دهی به ستون‌ها از <colgroup> و <col> استفاده می‌شود:

<table>
  <colgroup>
    <col span="2" style="background-color: lightblue;">
    <col style="background-color: lightyellow;">
  </colgroup>
  <thead>
    <tr>
      <th>نام</th>
      <th>سن</th>
      <th>شهر</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>علی</td>
      <td>۲۵</td>
      <td>تهران</td>
    </tr>
  </tbody>
</table>

ابعاد جدول

می‌توان عرض و ارتفاع جدول را با CSS یا ویژگی‌های قدیمی تعیین کرد:

<table style="width: 100%; border-collapse: collapse;">
  <tr>
    <td style="height: 50px;">سلول بلند</td>
  </tr>
</table>

Padding و Spacing

برای فاصله بین محتوا و حاشیه سلول‌ها:

table {
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  border: 1px solid #ddd;
}

دسترس‌پذیری جداول

برای دسترس‌پذیری، از scope و headers استفاده کنید:

<table>
  <thead>
    <tr>
      <th scope="col">نام</th>
      <th scope="col">سن</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">علی</th>
      <td headers="age">۲۵</td>
    </tr>
  </tbody>
</table>

استایل‌دهی جداول

برای زیباسازی جداول:

• Zebra Striping: رنگ‌های متناوب برای سطرها
• Hover Effect: تغییر رنگ هنگام هاور ماوس
• Border Radius: گوشه‌های گرد

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

table {
  border-radius: 8px;
  overflow: hidden;
}

نکات مهم

• همیشه از <thead>، <tbody> و <tfoot> استفاده کنید
• caption باید بلافاصله بعد از <table> باشد
• برای دسترس‌پذیری، از scope استفاده کنید
• از border-collapse: collapse برای حذف فاصله بین سلول‌ها استفاده کنید
• جداول را فقط برای داده‌های جدولی استفاده کنید، نه برای چیدمان