کاربرد جدول در صفحات وب؛ آموزش ساخت جدول HTML ریسپانسیو

جدول در HTML یکی از بهترین ابزارها برای نمایش داده هایی است که باید در ردیف و ستون با هم مقایسه شوند؛ از جدول قیمت و مشخصات محصول گرفته تا برنامه زمانی، گزارش آماری و فهرست نتایج. با این حال، کاربرد جدول در صفحات وب فقط زمانی درست است که محتوا ماهیت جدولی داشته باشد. برای چیدمان منو، ستون های صفحه، فرم یا جای گذاری تصویر باید از CSS Grid و Flexbox استفاده کرد، نه تگ table.

در این راهنما از ساخت اولین جدول HTML شروع می کنیم و سپس به ساختار معنایی، استایل CSS، جدول ریسپانسیو، دسترس پذیری، سئو و استفاده در وردپرس می رسیم. نمونه کدها طوری نوشته شده اند که بتوانید آن ها را تغییر دهید و در پروژه خود به کار ببرید.

کاربرد جدول در صفحات وب چیست؟

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

اما اگر فقط می خواهید دو بخش از صفحه را کنار هم بگذارید، جدول ابزار مناسبی نیست. استاندارد HTML، table را برای داده های دوبعدی تعریف می کند و برای چیدمان صفحه، راهکارهایی مانند Grid و Flexbox وجود دارد. این تفکیک روی نگهداری کد، نمایش موبایل و تجربه کاربری سایت تاثیر مستقیم دارد.

تگ های اصلی جدول در HTML

یک جدول استاندارد فقط از table، tr و td تشکیل نمی شود. استفاده درست از caption، thead، tbody، tfoot و th به مرورگر و ابزارهای کمکی می گوید هر قسمت چه نقشی دارد. همین ساختار معنایی باعث می شود کد خواناتر باشد و تغییر ظاهر جدول با CSS ساده تر انجام شود.

• table: ظرف اصلی تمام اجزای جدول است.
• caption: عنوان کوتاه و دقیق جدول را مشخص می کند.
• thead: ردیف یا ردیف های عنوان ستون ها را در بر می گیرد.
• tbody: داده های اصلی جدول داخل این بخش قرار می گیرند.
• tfoot: برای جمع، نتیجه یا توضیح پایانی کاربرد دارد.
• tr: یک ردیف می سازد.
• th: سلول عنوان ردیف یا ستون است.
• td: سلول داده معمولی را می سازد.

ویژگی scope ارتباط هر سلول عنوان را با ردیف یا ستون مشخص می کند. در جدول های پیچیده تر می توان از colspan برای ادغام چند ستون و از rowspan برای ادغام چند ردیف استفاده کرد؛ اما ادغام زیاد، خواندن جدول در موبایل و صفحه خوان را دشوار می کند.

آموزش ساخت جدول HTML مرحله به مرحله

ابتدا عنصر table را ایجاد کنید. سپس یک caption کوتاه بنویسید، عنوان ستون ها را در thead قرار دهید و ردیف های داده را داخل tbody بسازید. در نمونه زیر، هر th با scope="col" عنوان ستون مربوط را معرفی می کند.

<table>
  <caption>مقایسه سه پلن محتوا</caption>
  <thead>
    <tr>
      <th scope="col">پلن</th>
      <th scope="col">تعداد کلمه</th>
      <th scope="col">زمان تحویل</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">پایه</th>
      <td>1000 کلمه</td>
      <td>3 روز</td>
    </tr>
    <tr>
      <th scope="row">کامل</th>
      <td>2000 کلمه</td>
      <td>5 روز</td>
    </tr>
  </tbody>
</table>

ترتیب منطقی کد را حفظ کنید. caption باید فرزند مستقیم table باشد و بخش های thead و tbody نیز جای مشخصی دارند. مرجع تگ table در MDN فهرست کامل عناصر و ویژگی های پشتیبانی شده را ارائه می دهد.

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

تگ th یک سلول عنوان می سازد، اما td برای داده معمولی است. مرورگرها th را اغلب پررنگ و وسط چین نمایش می دهند، ولی تفاوت مهم تر معنای آن است. صفحه خوان می تواند عنوان ردیف یا ستون را هنگام رسیدن به هر داده اعلام کند. بنابراین تغییر ظاهر td با CSS، آن را به عنوان واقعی تبدیل نمی کند.

کاربرد colspan و rowspan

اگر یک عنوان باید چند ستون را پوشش دهد، از colspan استفاده کنید. برای پوشش چند ردیف نیز rowspan مناسب است. پیش از استفاده مطمئن شوید تعداد خانه ها با ساختار نهایی هماهنگ است؛ خطای شمارش می تواند ستون ها را جابه جا کند و مدل جدول را به هم بریزد.

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

HTML ساختار را مشخص می کند و CSS ظاهر را می سازد. برای شروع، عرض جدول را برابر فضای در دسترس بگذارید، حاشیه سلول ها را یکی کنید و برای th و td فاصله داخلی مناسب در نظر بگیرید. ردیف های راه راه نیز دنبال کردن داده ها را آسان تر می کنند.

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.data-table th,
.data-table td {
  border: 1px solid #d8dee6;
  padding: 12px 14px;
  text-align: right;
  vertical-align: top;
}

.data-table thead {
  background: #f3f6fa;
}

.data-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.data-table tbody tr:hover {
  background: #fff4f7;
}

عرض ثابت برای همه ستون ها تعیین نکنید. ستون توضیحات معمولا به فضای بیشتری از ستون عدد یا وضعیت نیاز دارد. همچنین رنگ پس زمینه و متن باید کنتراست کافی داشته باشند و اندازه فونت در موبایل آن قدر کوچک نشود که کاربر مجبور به بزرگ نمایی صفحه باشد.

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

جدول عریض در نمایشگر کوچک از صفحه بیرون می زند. راهکار ساده و قابل اعتماد این است که جدول را داخل یک ظرف قابل اسکرول قرار دهید. به این ترتیب ساختار معنایی جدول حفظ می شود و کاربر می تواند ستون های دورتر را با حرکت افقی ببیند.

<div class="table-scroll" tabindex="0">
  <table class="data-table">
    ...
  </table>
</div>

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  min-width: 640px;
}

مقدار min-width باید بر اساس محتوای واقعی انتخاب شود. اگر جدول فقط دو ستون کوتاه دارد، شاید اصلا به آن نیاز نباشد. در جدول بسیار بزرگ می توانید ستون های کم اهمیت را حذف نکنید، بلکه نسخه خلاصه را بالای جدول ارائه دهید یا داده را در چند جدول مرتبط تقسیم کنید. راهنمای طراحی سایت واکنش گرا اصول کلی نمایش درست محتوا در موبایل را توضیح می دهد.

اصول دسترس پذیری جدول HTML

کاربر صفحه خوان باید بدون دیدن خطوط و رنگ ها، ارتباط داده با عنوان ردیف و ستون را بفهمد. برای این هدف، یک caption روشن بنویسید، عنوان ها را با th مشخص کنید و scope مناسب بدهید. W3C نیز توضیح می دهد که caption مانند عنوان جدول عمل می کند و به کاربر کمک می کند پیش از خواندن سلول ها، موضوع جدول را تشخیص دهد.

1. برای هر جدول داده یک عنوان کوتاه و توصیفی بنویسید.
2. برای عنوان ستون از scope="col" و برای عنوان ردیف از scope="row" استفاده کنید.
3. اطلاعات مهم را فقط با رنگ منتقل نکنید؛ متن، آیکون همراه با برچسب یا الگوی دیگری هم در نظر بگیرید.
4. ترتیب ردیف ها و ستون ها را ساده و قابل پیش بینی نگه دارید.
5. اگر ظرف جدول اسکرول می شود، امکان فوکوس با صفحه کلید را بررسی کنید.
6. جدول پیچیده را با چند عنوان تو در تو نسازید، مگر اینکه داده واقعا به آن نیاز داشته باشد.

برای جدول های پیچیده می توان توضیح بیشتری را با aria-describedby به جدول متصل کرد. راهنمای رسمی دسترس پذیری جدول در W3C نمونه های caption و خلاصه جدول را نشان می دهد.

تاثیر جدول HTML بر سئو سایت

خود تگ table تضمینی برای افزایش رتبه نیست. ارزش سئویی زمانی ایجاد می شود که جدول، پاسخ کاربر را سریع تر و دقیق تر ارائه کند، مقایسه را ساده سازد و در کنار متن توضیحی قرار بگیرد. عنوان روشن، ساختار معنایی، محتوای اختصاصی و نمایش درست در موبایل به موتور جستجو نیز کمک می کنند موضوع داده را بهتر درک کند.

از قرار دادن چند جدول بدون توضیح خودداری کنید. قبل از جدول بگویید چه چیزی مقایسه می شود و بعد از آن، نتیجه مهم را توضیح دهید. داده ها را به روز نگه دارید و برای اعداد حساس مانند قیمت یا آمار، تاریخ آخرین بررسی را بنویسید. جدول نباید جای متن کامل را بگیرد؛ باید آن را خلاصه و قابل اسکن کند.

تولید محتوای سئو شده

یک جدول خوب به داده درست، متن روشن و ساختار هدفمند نیاز دارد. برای تهیه مقاله، صفحه خدمات یا محتوای محصول می توانید سفارش اختصاصی ثبت کنید.

سفارش تولید محتوا

چه زمانی به جای جدول از ابزار دیگری استفاده کنیم؟

اگر محتوا فقط یک بعد دارد، فهرست ساده خواناتر است. اگر هدف نمایش روند، نسبت یا تغییرات زمانی است، نمودار سریع تر مفهوم را منتقل می کند؛ هرچند بهتر است داده دقیق آن نیز در دسترس باشد. کارت ها برای معرفی محصول در موبایل جذاب هستند، اما مقایسه مستقیم چند ویژگی در آن ها سخت تر از جدول است.

ساخت جدول در وردپرس

در ویرایشگر بلوکی وردپرس، بلوک Table را اضافه و تعداد ردیف و ستون را انتخاب کنید. سپس عنوان ستون ها، داده ها و در صورت نیاز caption را وارد کنید. برای کنترل بیشتر می توانید کلاس CSS اختصاصی به بلوک بدهید و ظاهر آن را در فایل استایل یا بخش CSS سفارشی پوسته تنظیم کنید.

در ویرایشگر کلاسیک می توانید جدول را از ابزار ویرایشگر بسازید یا کد HTML را در حالت کد قرار دهید. نصب افزونه فقط زمانی منطقی است که امکاناتی مانند مرتب سازی، جستجو، صفحه بندی، ورود فایل CSV یا مدیریت داده های زیاد لازم باشد. برای یک جدول کوچک، HTML ساده سبک تر و قابل نگهداری تر است.

چک لیست پیش از انتشار جدول

• عنوان جدول موضوع داده را دقیق بیان می کند.
• هر ردیف تعداد سلول درست و یکسان دارد.
• th و scope برای عنوان ها استفاده شده اند.
• جدول در موبایل از صفحه بیرون نمی زند.
• رنگ، فونت و فاصله سلول ها خوانا هستند.
• اعداد و اطلاعات قدیمی بررسی شده اند.
• متن قبل و بعد جدول، نتیجه را برای کاربر توضیح می دهد.

اشتباهات رایج در کاربرد جدول در صفحات وب

رایج ترین اشتباه، استفاده از جدول برای ساخت کل چیدمان صفحه است. این روش کد را سنگین و تغییر جای عناصر را دشوار می کند. جدول های تو در تو، عرض های ثابت، ویژگی های منسوخ HTML، سلول های خالی برای ایجاد فاصله و تصاویر نامرئی نیز به طراحی مدرن تعلق ندارند.

• از ویژگی های ظاهری قدیمی مانند border، cellpadding و width در HTML استفاده نکنید و آن ها را به CSS بسپارید.
• برای ایجاد فاصله، سلول خالی یا تصویر GIF نسازید؛ padding و gap راهکار درست هستند.
• متن طولانی چند پاراگرافی را داخل یک سلول قرار ندهید.
• برای جدول عریض، نمایش موبایل را به بعد موکول نکنید.
• سرستون ها را فقط با پررنگ کردن td شبیه سازی نکنید.
• بدون دلیل از colspan و rowspan زیاد استفاده نکنید.

استخراج اطلاعات از جدول وب

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

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

سخن پایانی

کاربرد جدول در صفحات وب، نمایش منظم داده هایی است که میان ردیف و ستون رابطه دارند. ساختار درست با caption، thead، tbody، th و td آغاز می شود؛ CSS ظاهر را کنترل می کند و یک ظرف اسکرول، جدول را در موبایل قابل استفاده نگه می دارد. دسترس پذیری، توضیح متنی و به روز بودن داده ها نیز به اندازه زیبایی جدول اهمیت دارند.

پیش از افزودن table یک سوال ساده بپرسید: آیا کاربر واقعا باید چند مقدار را در دو بعد مقایسه کند؟ اگر پاسخ مثبت است، جدول انتخاب مناسبی خواهد بود. اگر هدف فقط چیدمان یا نمایش یک فهرست است، Grid، Flexbox، کارت یا فهرست نتیجه تمیزتر و انعطاف پذیرتری ارائه می دهند.