تگ table در html

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

برای ایجاد جدول از تگ <table> استفاده می‌شود و درون آن سطرها با <tr> و درون هر سطر، خانه‌های داده با <td> یا خانه‌های عنوان با <th> قرار می‌گیرند. معمولاً برای عنوان‌گذاری از <thead>، برای داده‌ها از <tbody> و برای جمع‌بندی از <tfoot> استفاده می‌شود.

<table>
  <thead>
    <tr>
      <th>نام</th>
      <th>ایمیل</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>علی</td>
      <td>ali@example.com</td>
    </tr>
    <tr>
      <td>زهرا</td>
      <td>zahra@example.com</td>
    </tr>
  </tbody>
</table>

تگ <table> می‌تواند دارای ویژگی‌هایی باشد که ظاهر و رفتار جدول را مشخص می‌کنند. برخی از این ویژگی‌ها به صورت HTML تعریف می‌شوند و برخی دیگر به کمک CSS کنترل می‌شوند.

• border: ضخامت خطوط جدول (مثلاً border="1") – بهتر است به‌جای آن از CSS استفاده شود.
• cellpadding: فاصله داخلی سلول‌ها از لبه‌ها – به‌جای آن می‌توان از padding در CSS استفاده کرد.
• cellspacing: فاصله بین سلول‌ها – بهتر است از border-spacing در CSS استفاده شود.
• width: تعیین عرض جدول به پیکسل یا درصد.
• align: تراز جدول نسبت به صفحه (left, center, right) – منسوخ شده است، بهتر است از CSS استفاده شود.
• summary: توضیحی برای کاربران با نیازهای ویژه (برای دسترس‌پذیری)، اکنون استفاده از <caption> و ARIA پیشنهاد می‌شود.

ویژگی border ضخامت و سبک حاشیهٔ دور جدول را تعیین می‌کند. مقدار عددی (پیکسل) برای ضخامت کفایت می‌کند و می‌توانید CSS مانند border: 2px solid #000; را ترجیح دهید. این ویژگی در HTML5 منسوخ شده است.

<table border="2">
  …
</table>

ویژگی cellpadding فاصلهٔ داخلی (padding) بین محتوا و حاشیهٔ سلول‌ها را مشخص می‌کند. بهتر است از CSS برای تنظیم padding سلول‌ها استفاده شود.

<table cellpadding="10">
  <tr><td>متن</td></tr>
</table>

ویژگی cellspacing فاصلهٔ بین سلول‌ها (مرز تا مرز) را تعیین می‌کند. توصیه می‌شود از CSS و border-spacing استفاده کنید.

<table cellspacing="5">
  <tr><td>A</td><td>B</td></tr>
</table>

ویژگی width عرض جدول را به واحد پیکسل یا درصد مشخص می‌کند. امروزه بهتر است از CSS و ویژگی width استفاده شود.

<table width="80%">
  <tr><td>محتوا</td></tr>
</table>

ویژگی align تراز جدول را نسبت به صفحه (یا بلوک والد) مشخص می‌کند: left، center یا right. این ویژگی منسوخ شده است و از CSS مانند margin: 0 auto; استفاده کنید.

<table align="center">
  <tr><td>وسط چین</td></tr>
</table>

ویژگی summary خلاصه‌ای توصیفی از محتویات جدول برای کاربران با نیازهای ویژه ارائه می‌دهد. در HTML5 منسوخ شده و توصیه می‌شود از <caption> یا ARIA attributes استفاده شود.

<table summary="جدول اطلاعات کاربران شامل نام و سن">
  <caption>اطلاعات کاربران</caption>
  …
</table>

تگ <table> از ویژگی‌های عمومی HTML مانند id، class، style، title و … پشتیبانی می‌کند.

می‌توانید با استفاده از ویژگی‌هایی مانند onclick، onmouseover، onmouseout و …، رویدادهایی برای تگ <table> تعریف کنید.

مرورگرها به‌طور پیش‌فرض جداول را با ظاهر زیر رندر می‌کنند. برای کنترل بهتر ظاهر جدول، توصیه می‌شود از CSS استفاده شود.

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  text-indent: initial;
  border-color: gray;
}