جدول ها در HTML؛ تگ table، tr، th و td | درس 11

درس 11 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

در این درس با جدول ها در HTML آشنا می شویم. جدول زمانی مناسب است که اطلاعات رابطه سطری و ستونی داشته باشند؛ مثل لیست قیمت، برنامه زمانی، گزارش فروش یا مشخصات فنی. برای ساخت جدول از table و داخل آن از ردیف ها و سلول ها استفاده می کنیم.

برای مرور ساختار تگ ها ابتدا درس 5 و برای داده های فهرستی درس 10 را ببینید.

ساخت اولین جدول

<table>
  <tr>
    <th>نام</th>
    <th>سن</th>
  </tr>
  <tr>
    <td>سارا</td>
    <td>28</td>
  </tr>
</table>

tr یک ردیف، th سلول عنوان و td سلول داده است. انتخاب تگ درست از نظر معنایی مهم است؛ مشابه چیزی که در درس 7 یاد گرفتیم.

caption، thead، tbody و tfoot

<table>
  <caption>فروش ماهانه</caption>
  <thead>
    <tr>
      <th scope="col">محصول</th>
      <th scope="col">تعداد</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>دامنه</td>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">جمع</th>
      <td>3</td>
    </tr>
  </tfoot>
</table>

ساختار اصلی سند را در درس 4 مرور کرده ایم و عنوان های صفحه را نیز در درس 6 بررسی کردیم.

colspan و rowspan

colspan یک سلول را در چند ستون و rowspan آن را در چند ردیف گسترش می دهد.

<table>
  <tr>
    <th colspan="2">اطلاعات تماس</th>
  </tr>
  <tr>
    <th rowspan="2">شنبه</th>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
  </tr>
</table>

لینک و تصویر داخل جدول

می توانید داخل td لینک یا تصویر قرار دهید. برای لینک ها درس 8 و برای تصاویر درس 9 را مرور کنید.

اشتباه های رایج

• استفاده از table برای چیدمان کل صفحه
• استفاده از td به جای th برای عنوان ها
• تعداد نامنظم سلول ها در ردیف ها
• استفاده بی دلیل از colspan و rowspan
• کنترل ظاهر جدول با HTML قدیمی به جای CSS

تمرین

یک جدول برای سه محصول بسازید که شامل نام محصول، تعداد و قیمت باشد. از caption، thead، tbody و tfoot استفاده کنید.

<table>
  <caption>سبد خرید تمرینی</caption>
  <thead>
    <tr>
      <th>محصول</th>
      <th>تعداد</th>
      <th>قیمت</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>محصول اول</td><td>2</td><td>20</td></tr>
    <tr><td>محصول دوم</td><td>1</td><td>15</td></tr>
    <tr><td>محصول سوم</td><td>3</td><td>30</td></tr>
  </tbody>
  <tfoot>
    <tr><th>جمع</th><td>6</td><td>65</td></tr>
  </tfoot>
</table>

درس قبلی: درس 10

درس بعد: فرم ها در HTML | درس 12