جدول در HTML – المان های <table>, <tr>, <td> و <th>

جدول ها به شما اجازه می‌دهند داده هایی را در قالب چند سطر و ستون سازماندهی کنید. برای ایجاد جدول در HTML از المان <table> استفاده می‌شود. هر ردیف جدول با کمک یک المان <tr> و سلول ها یا خانه های جدول نیز توسط المان های <td> در اچ‌تی‌ام‌ال مشخص می‌شوند.

به عبارت بهتر هر جدول در HTML با یک تگ <table> شروع و با یک تگ </table> به پایان می‌رسد. مابین این دو تگ، المان های <tr> قرار می‌گیرند که ردیف های جدول را مشخص می‌کنند. هر ردیف نیز سلول های جدول را در قالب المان های <td> دربرمی‌گیرد.

در مثال زیر ساختار کلی برای ایجاد یک جدول ساده در HTML با دو ردیف و سه ستون (دو ردیف که هرکدام شامل سه سلول هستند) را مشاهده می‌کنید:

<table style="width:100%">
  <tr>
    <td>امیر</td>
    <td>مجرد</td>
    <td>24</td>
  </tr>
  <tr>
    <td>رضا</td>
    <td>متأهل</td>
    <td>29</td>
  </tr>
</table>

در مثال فوق برای اینکه پهنای جدول تمام فضای موجود را دربربگیرد از ویژگی style=”width:100%” در تگ شروع <table> استفاده کردیم. (با نحوه درج استایل به صورت اینلاین در مباحث CSS آشنا می‌شوید). نتیجه این قطعه کد معمولا مشابه با نمونه زیر توسط مرورگر نمایش داده می‌شود:

نتیجه درج یک جدول ساده در HTML

جدول ها در صفحات وب می‌توانند شامل تعداد دلخواهی از ردیف ها باشند. فراموش نکنید در حالت ساده تمام ردیف‌های یک جدول دارای تعداد ثابتی سلول هستند (البته این موضوع الزامی نیست و ممکن است در یک صفحه وب ردیفی از جدول تعداد بیشتر یا کمتری سلول داشته باشد. با این حالت در قسمت های آتی این مجموعه آموزشی بیشتر آشنا می‌شوید).

برای رسم خطوط مرزی (به صورت تک خط) پیرامون جدول و سلول های آن می‌توانید از خاصیت‌های border و border-collapse برای المان های table, td و th در CSS (مشابه با مثال زیر) استفاده کنید:

See the Pen
HTML Tables
by techdic (@techdic)
on CodePen.

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

گاهی اوقات ممکن است ترجیح دهید برای جدول خود هدر (Header) یا سرتیتر درنظر بگیرید. متن هدرها در جدول معمولا با استایل ضخیم (یا Bold) در مرکز سلول قرار می‌گیرد و شامل عنوان‌هایی برای محتویات جدول می‌شود. به علاوه هدرها اغلب در ردیف اول یا ستون اول جدول (یا هر دو) نمایان می‌شوند.

برای تبدیل یک سلول به هدر کافیست از تگ <th> به جای <td> استفاده کنید. نمونه این حالت و نتیجه آن را می‌توانید در ادامه مشاهده کنید:

<table style="width:100%">
  <tr>
    <th>نام</th>
    <th>وضعیت تأهل</th>
    <th>سن</th>
  </tr>
  <tr>
    <td>امیر</td>
    <td>مجرد</td>
    <td>24</td>
  </tr>
  <tr>
    <td>رضا</td>
    <td>متأهل</td>
    <td>29</td>
  </tr>
</table>

نتیجه درج یک جدول با خطوط مرزی و هدر در HTML

چند نکته در مورد جدول ها در HTML

tr در تگ <tr> مخفف عبارت table row (به معنی ردیف جدول) می‌باشد. همچنین td و th در تگ های <td> و <th> مخفف عبارت های table data (به معنی داده جدول) و table header (به معنی سرتیتر جدول) هستند.

المان <table> المان دربرگیرنده برای محتویات جدول است. شما می‌توانید علاوه بر متن، المان های دیگری مانند تصویر، لیست یا حتی یک جدول دیگر در این المان و سلول های جدول قرار دهید.

بازگشت به فهرست مجموعه آموزشی HTML

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.