جدول ها

اگر در محتوای ما اطلاعاتی باشند که نیاز است آنها را بصورت جدولی نمایش دهیم می توانیم از عنصر <table> در HTML استفاده کنیم.

سینتکس

استفاده از جدول ها در HTML ساختار خاص خود را دارد:

• جدول را با <table> باز کنید.
• برای ایجاد هر ردیف از <tr> استفاده کنید.
• در یک ردیف برای ایجاد سلول عادی از <td> و برای سلول عنوان <th> را قرار می دهید.

سلسله مراتب گفته شده و وجود هر سه عنصر در ایجاد یک جدول الزامی است.

<table>
  <tr>
    <td>پرنده مورد علاقه</td>
    <td>غاز</td>
  </tr>
  <tr>
    <td>رنگ مورد علاقه</td>
    <td>کله غازی</td>
  </tr>
  <tr>
    <td>شغل مورد علاقه</td>
    <td>پرورش غاز</td>
  </tr>  
</table>

خروجی:

thead، tfoot و tbody

همانطور که یک صفحه وب می تواند Header و Footer داشته باشد عنصر جدول نیز می تواند شامل این موارد باشد. و همانطور که همه عناصر معنای خاصی را بوجود می آورند وجود این قسمت ها برای یک جدول به دلایل معنایی می باشد.

<thead>، <tfoot> و <tbody> فرزندان مستقیم عنصر <table> خواهند بود. همچنین فرزند مستقیم آنها می تواند یک <tr> (ردیف) یا چندتا باشد.

<table>
  <thead>
    <tr>
      <th>نام</th>
      <th>نقش</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>نام</th>
      <th>نقش</th>
    </tr>
  </tfoot>  
  <tbody>
    <tr>
      <td>احسان</td>
      <td>مدیر صحنه</td>
    </tr>
    <tr>
      <td>احمد</td>
      <td>تنظیم صدا</td>
    </tr>
    <tr>
      <td>سعید</td>
      <td>کارگردان</td>
    </tr>
    <tr>
      <td>مجتبی</td>
      <td>تدارکات</td>
    </tr>
  </tbody>
</table>

خروجی:

دلیل اینکه <tfoot> را قبل از <tbody> قرار می دهیم این است که جدول می تواند تعداد بسیار زیادی ردیف داشته باشد و چون مرورگر می خواهد سریعتر قادر به ترسیم فوتر جدول باشد در نتیجه آن را قبل از <tbody> قرار می دهیم اما همچنان در زمان نمایش آخر جدول نمایش داده می شود.

colspan و rowspan

گاهی نیاز داریم که چند ستون یا چند ردیف را ادغام کنیم. برای این کار می توانیم به ترتیب از colspan و rowspan استفاده کنیم. این دو ویژگی به سلول ها در جدول تعلق می گیرند.

ادغام ستون ها:

<table>
  <tr>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>    
  </tr>
</table>

ادغام ردیف ها:

<table>
  <tr>
    <td></td>
    <td rowspan="2"></td>
  </tr>
  <tr>
    <td></td>    
  </tr>
</table>