جدول در 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>

در مثال فوق برای اینکه پهنای جدول تمام فضای موجود را دربربگیرد از ویژگی width در CSS به عنوان مقدار خصوصیت style (یعنی style=”width:100%”) در تگ شروع <table> استفاده کردیم و پهنای المان را روی 100% تنظیم کردیم. (با نحوه درج استایل به صورت اینلاین در مباحث 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

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

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

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