آموزش کامل جداول در HTML
تعریف جدول
در زبان HTML، جداول با استفاده از تگ <table> تعریف میشوند. هر جدول شامل سطرهایی با تگ <tr> و سلولهایی با تگ <td> است.
عامرتجارت خلیج فارس
تگ td و محتوای آن
تگ <td> میتواند شامل انواع محتوا باشد:
- متن
- لینک
- تصویر
- لیست
- حتی جدول دیگر
استفاده از border در جدول
عامرتجارت خلیج فارس
نکته: استفاده از border در HTML قدیمی است و بهتر است از CSS استفاده شود.
آموزش css و تنظیم ظاهر حرفه ای رو در جلسات آینده بهش میپردازیم.
تگ th (عنوان جدول)
عامرتجارت خلیج فارس
ساختار حرفهای جدول
عامرتجارت خلیج فارس
ادغام سلولها
عامرتجارت خلیج فارس
نکته مهم (ریسپانسیو بودن جدول)
در موبایل ممکن است جدول بزرگ از صفحه بیرون بزند. برای تست بهتر است سایز مرورگر را تغییر بده (Resize) و بررسی کن جدول چگونه رفتار میکند.
در طراحی حرفهای، جدول داخل یک باکس قرار میگیرد تا در موبایل قابل اسکرول باشد.
تمرین
یک فایل HTML بساز و موارد زیر را پیادهسازی کن:
- یک جدول 4 ستونه برای لیست دانشآموزان بساز
- ستونها شامل: نام، نام خانوادگی، نمره، وضعیت
- از <th> برای عنوان ستونها استفاده کن
- از CSS برای border و collapse استفاده کن
- برای سلولها padding قرار بده
- از caption برای عنوان جدول استفاده کن
- یک ردیف footer برای میانگین نمره بساز
- حداقل یک بار از colspan یا rowspan استفاده کن
چالش
کاری کن جدول در حالت تغییر سایز مرورگر (Resize) به هم نریزد و اگر بزرگ شد بتوان آن را اسکرول کرد.
چالش اضافه: یک سلول داخل جدول بساز که داخلش یک لینک <a> یا تصویر <img> قرار گرفته باشد.