جدول در HTML چیست؟ آموزش table، tr، th و td و ساخت جدول حرفه‌ای

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

جدول زمانی کاربرد دارد که بخواهیم داده‌های مرتبط را در قالب سطر و ستون نمایش دهیم؛ مثل جدول قیمت‌ها، برنامه زمانی، مقایسه ویژگی‌ها، مشخصات محصولات یا نتایج یک گزارش.

جدول در HTML چیست؟

برای ساخت جدول از عنصر table استفاده می‌کنیم. داخل جدول، سطرها با tr و سلول‌ها با th یا td ساخته می‌شوند.

<table>
    <tr>
        <th>نام</th>
        <th>سن</th>
        <th>شهر</th>
    </tr>
    <tr>
        <td>علی</td>
        <td>25</td>
        <td>تهران</td>
    </tr>
</table>

تگ table چه کاری انجام می‌دهد؟

table ظرف اصلی جدول است و همه سطرها و سلول‌های جدول داخل آن قرار می‌گیرند.

تگ tr چیست؟

tr مخفف Table Row است و یک سطر جدول را ایجاد می‌کند.

تگ th چیست؟

th برای سلول‌های عنوان یا سرستون استفاده می‌شود.

تگ td چیست؟

td داده عادی داخل جدول را نگه می‌دارد.

تفاوت th و td چیست؟

thead، tbody و tfoot

thead بخش سر جدول، tbody بدنه داده‌ها و tfoot بخش پایانی جدول را گروه‌بندی می‌کنند.

<table>
    <thead>
        <tr><th>محصول</th><th>قیمت</th></tr>
    </thead>
    <tbody>
        <tr><td>دوره HTML</td><td>290000</td></tr>
    </tbody>
    <tfoot>
        <tr><td>جمع</td><td>290000</td></tr>
    </tfoot>
</table>

ویژگی colspan چیست؟

colspan باعث می‌شود یک سلول چند ستون را پوشش دهد.

<th colspan="3">اطلاعات دانشجو</th>

ویژگی rowspan چیست؟

rowspan باعث می‌شود یک سلول چند سطر را پوشش دهد.

<th rowspan="2">ردیف</th>

caption در جدول چیست؟

برای قرار دادن عنوان توضیحی برای جدول می‌توانیم از caption استفاده کنیم.

<table>
    <caption>لیست دوره‌های آموزشی</caption>
    ...
</table>

scope در th چه کاربردی دارد؟

برای دسترس‌پذیری بهتر، scope می‌تواند مشخص کند یک سلول عنوان مربوط به ستون است یا سطر.

<th scope="col">نام</th>
<th scope="row">علی</th>

آیا برای چیدمان صفحه از table استفاده کنیم؟

خیر. جدول برای داده‌های جدولی است، نه برای ساخت Layout صفحه. برای چیدمان مدرن از CSS، Flexbox و Grid استفاده می‌کنیم.

استایل جدول با CSS

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #ddd;
    padding: 12px;
}

جدول واکنش‌گرا در موبایل

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

.table-wrapper {
    overflow-x: auto;
}

اینفوگرافیک ساخت جدول

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

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

• قرار دادن td یا th خارج از tr
• استفاده از جدول برای چیدمان کل صفحه
• استفاده بی‌دلیل از colspan و rowspan
• فراموش کردن نمایش مناسب جدول روی موبایل

تمرین‌ها

یک جدول ساده با سه ستون بسازید، سپس آن را با thead، tbody و tfoot بخش‌بندی کنید و در نمونه‌ای دیگر colspan و rowspan را تمرین کنید.

جمع‌بندی

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