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

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

مثال

HTML <table> عنصر با برخی از عناصر مورد نیاز و برخی از عناصر تو در تو اختیاری کار می کند.

نحو

1
<table>
2
  <thead>
3
    <th>First name</th>
4
    <th>Last name</th>
5
    <th>Occupation</th>
6
  </thead>
7
  <tbody>
8
    <tr>
9
      <td>John</td>
10
      <td>Doe</td>
11
      <td>Scientist</td>
12
    </tr>
13
    <tr>
14
      <td>Jane</td>
15
      <td>Doe</td>
16
      <td>Web Developer</td>
17
    </tr>
18
  </tbody>
19
</table>

نتیجه

پشتیبانی از مرورگر

را <table> برچسب در تمام مرورگرهای مدرن و همچنین بسیاری از سرویس گیرندگان ایمیل پشتیبانی می شود. ادامه مطلب را بخوانید caniuse.com.

ویژگی های

را <table> برچسب پشتیبانی می کند ویژگی های جهانی در HTML. مشخصه های جهانی برای همه عناصر HTML مشترک هستند و می توانند روی همه آنها استفاده شوند (اگرچه ممکن است تأثیر زیادی روی برخی از آنها نداشته باشند).

محتوا

در جداول می توانید از انواع عناصر اضافی HTML استفاده کنید.

  • شرح جدول: <caption>
  • گروه های ردیف: <thead>، <tfoot>، و <tbody>
  • گروه های ستونی: <colgroup> و <col>
  • ردیف های جدول: <tr>
  • سلول های جدول: <th> و <td>

اضافه کردن <caption> برای دسترسی بهتر

برای افزایش دسترسی، سعی کنید a اضافه کنید <caption> عنصر بلافاصله پس از باز شدن <table> برچسب، توضیح واضحی از هدف جدول ارائه می دهد.

مثال بالا از CSS استفاده می کند caption-side ویژگی برای قرار دادن عنوان این هم می تواند باشد top یا bottom.

را <caption> به کسی کمک می کند بفهمد چه محتوایی ارائه می شود و آیا باید برای هضم آن وقت بگذارد. علاوه بر این، <caption> عنصر نشانه هایی را برای فناوری های کمکی مانند صفحه خوان ها ارائه می دهد.

استایل دادن به جداول HTML

میزها سفت و سخت هستند، اما می توانند به گونه ای طراحی شوند که بیشتر نیازها را برآورده کنند. ویژگی‌های CSS که ممکن است در یک ظاهر طراحی مفید باشد <table> عنصر شامل width، border، border-style، border-color، border-width، border-collapse، border-spacing، margin، padding، text-align، و vertical-align.

ملاحظات دستگاه تلفن همراه

  • از جداول استفاده نکنید مگر اینکه دستگاه یا دستگاه‌هایی که از آن‌ها پشتیبانی می‌کنند (1)
  • از جداول تو در تو استفاده نکنید (2)
  • از جداول برای چیدمان استفاده نکنید (3)
  • استفاده از جایگزین های ارائه جدولی (4)

بیشتر بدانید

آیا می دانستید؟ <table> نسبتاً دیر به HTML وارد شد و فقط با مشخصات در آن آشنا شد ژانویه 1997.

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

بسته‌های گرافیکی مانند ادوبی فتوشاپ به سرعت در حال توسعه هستند ابزار برش، که به طرح ها اجازه می داد تا به صورت تکه تکه و صادر شوند و آماده مونتاژ مجدد در سلول های جدول شوند.

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