مقدمه

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

در این آموزش یاد می‌گیرید چگونه یک جدول در HTML ایجاد کنید، تعداد سطرها و ستون‌ها را افزایش دهید، برای آن عنوان (Header) تعریف کنید و در نهایت با روش‌های استاندارد، جدول‌هایی واکنش‌گرا (Responsive) و سازگار با سئو و دسترس‌پذیری ایجاد کنید.

پیش‌نیازها

برای دنبال کردن این آموزش بهتر است:

• با مفاهیم اولیه HTML آشنا باشید.
• یک فایل index.html یا هر فایل HTML دیگری برای تمرین داشته باشید.

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

هر جدول با تگ <table> آغاز شده و با </table> پایان می‌یابد.

داخل جدول از دو تگ اصلی استفاده می‌شود:

• <tr> برای ایجاد ردیف
• <td> برای ایجاد سلول‌های داده

نمونه:

<table>
  <tr>
    <td>ستون اول</td>
    <td>ستون دوم</td>
    <td>ستون سوم</td>
  </tr>

  <tr>
    <td>ستون اول</td>
    <td>ستون دوم</td>
    <td>ستون سوم</td>
  </tr>
</table>

خروجی این کد جدولی با ۲ ردیف و ۳ ستون خواهد بود.

اضافه کردن ردیف جدید

برای افزودن یک ردیف کافی است یک بلوک <tr> جدید اضافه کنید.

<table>
  <tr>
    <td>ستون ۱</td>
    <td>ستون ۲</td>
    <td>ستون ۳</td>
  </tr>

  <tr>
    <td>ستون ۱</td>
    <td>ستون ۲</td>
    <td>ستون ۳</td>
  </tr>

  <tr>
    <td>ستون ۱</td>
    <td>ستون ۲</td>
    <td>ستون ۳</td>
  </tr>
</table>

اکنون جدول دارای ۳ ردیف خواهد بود.

اضافه کردن ستون جدید

برای افزودن ستون باید داخل تمام ردیف‌ها یک تگ <td> جدید قرار دهید.

<table>
  <tr>
    <td>ستون ۱</td>
    <td>ستون ۲</td>
    <td>ستون ۳</td>
    <td>ستون ۴</td>
  </tr>

  <tr>
    <td>ستون ۱</td>
    <td>ستون ۲</td>
    <td>ستون ۳</td>
    <td>ستون ۴</td>
  </tr>

  <tr>
    <td>ستون ۱</td>
    <td>ستون ۲</td>
    <td>ستون ۳</td>
    <td>ستون ۴</td>
  </tr>
</table>

در این حالت جدول دارای ۴ ستون و ۳ ردیف است.

افزودن حاشیه (Border) به جدول

اگرچه امروزه بهتر است ظاهر جدول با CSS طراحی شود، اما برای نمونه‌های آموزشی می‌توانید از ویژگی border استفاده کنید.

<table border="1">
  <tr>
    <td>ردیف ۱</td>
    <td>ردیف ۲</td>
    <td>ردیف ۳</td>
  </tr>

  <tr>
    <td>ردیف ۱</td>
    <td>ردیف ۲</td>
    <td>ردیف ۳</td>
  </tr>
</table>

این ویژگی دور تمام سلول‌ها یک کادر نمایش می‌دهد.

توجه: در پروژه‌های واقعی بهتر است به‌جای ویژگی border از CSS استفاده کنید.

ایجاد عنوان ستون‌ها

برای ایجاد عنوان ستون‌ها از تگ <th> استفاده می‌شود.

<table border="1">
  <tr>
    <th></th>
    <th>نام</th>
    <th>سن</th>
    <th>شهر</th>
  </tr>
</table>

تگ <th> به‌صورت پیش‌فرض متن را Bold و وسط‌چین نمایش می‌دهد.

ایجاد عنوان ردیف‌ها

همچنین می‌توانید اولین سلول هر ردیف را به عنوان Header تعریف کنید.

<table border="1">

<tr>
    <th></th>
    <th>نام</th>
    <th>سن</th>
    <th>شهر</th>
</tr>

<tr>
    <th>کاربر ۱</th>
    <td>علی</td>
    <td>۲۵</td>
    <td>تهران</td>
</tr>

<tr>
    <th>کاربر ۲</th>
    <td>مریم</td>
    <td>۲۸</td>
    <td>اصفهان</td>
</tr>

<tr>
    <th>کاربر ۳</th>
    <td>رضا</td>
    <td>۳۰</td>
    <td>شیراز</td>
</tr>

</table>

این ساختار خوانایی جدول را برای کاربران و موتورهای جستجو افزایش می‌دهد.

واکنش‌گرا (Responsive) کردن جدول

یکی از ساده‌ترین روش‌ها استفاده از overflow-x است.

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

سپس جدول را داخل یک div قرار دهید.

<div class="table-container">

<table>

<tr>
<th>نام</th>
<th>سن</th>
</tr>

<tr>
<td>علی</td>
<td>۲۵</td>
</tr>

</table>

</div>

در نمایشگرهای کوچک، جدول به‌صورت افقی اسکرول خواهد شد.

استفاده از Bootstrap برای جدول واکنش‌گرا

اگر از Bootstrap استفاده می‌کنید کافی است جدول را داخل کلاس زیر قرار دهید:

<div class="table-responsive">

<table class="table">

<tr>
<th>نام</th>
<th>سن</th>
</tr>

<tr>
<td>علی</td>
<td>۲۵</td>
</tr>

</table>

</div>

نکات مهم برای دسترس‌پذیری (Accessibility)

برای افزایش دسترس‌پذیری بهتر است از ویژگی‌های زیر استفاده کنید.

استفاده از scope

<th scope="col">نام</th>

یا

<th scope="row">کاربر اول</th>

استفاده از caption

<table>

<caption>
جدول قیمت محصولات
</caption>

...
</table>

استفاده از aria-describedby

<table aria-describedby="table-description">

این ویژگی به نرم‌افزارهای صفحه‌خوان کمک می‌کند تا جدول را بهتر تفسیر کنند.

مهم‌ترین تگ‌های جدول در HTML

سوالات متداول

چگونه در HTML جدول ایجاد کنیم؟

برای ساخت جدول از تگ‌های زیر استفاده می‌شود:

• <table>
• <tr>
• <td>
• <th>

نمونه:

<table border="1">

<tr>
<th>نام</th>
<th>سن</th>
</tr>

<tr>
<td>علی</td>
<td>۲۵</td>
</tr>

</table>

چگونه سلول‌ها را ادغام کنیم؟

ادغام ستون‌ها

<td colspan="2">
سلول ادغام شده
</td>

ادغام ردیف‌ها

<td rowspan="2">
سلول مشترک
</td>

چگونه جدول بدون حاشیه بسازیم؟

با CSS:

table{
    border-collapse:collapse;
    border:none;
}

td,th{
    border:none;
}

چگونه جدول را واکنش‌گرا کنیم؟

می‌توانید از:

• overflow-x:auto
• Bootstrap (table-responsive)
• CSS Media Query

استفاده کنید.

جمع‌بندی

در این آموزش با نحوه ساخت جدول در HTML آشنا شدید و یاد گرفتید چگونه:

• جدول ایجاد کنید.
• ردیف و ستون اضافه کنید.
• عنوان سطر و ستون تعریف کنید.
• حاشیه به جدول اضافه کنید.
• جدول را واکنش‌گرا کنید.
• از تگ‌های استاندارد و اصول دسترس‌پذیری استفاده کنید.

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

از همراهی شما با پارمین کلود سپاسگزاریم.