آموزش HTML : اصول اولیه جدول HTML

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

جدول چیست؟

   جدول مجموعه‌ای ساختاریافته از داده‌ها است که از ردیف‌ها و ستون‌ها (داده‌های جدولی) تشکیل شده است. جدول به شما امکان می‌دهد به سرعت و به راحتی مقادیری را که نشان‌دهنده نوعی ارتباط بین انواع مختلف داده‌ها هستند، جستجو کنید، به عنوان مثال یک فرد و سن او، یا یک روز از هفته، یا جدول زمانی یک استخر محلی.

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

   نکته‌ی اصلی یک جدول این است که انعطاف‌پذیر است. اطلاعات به راحتی با ایجاد ارتباط بصری بین سرتیترهای سطر و ستون تفسیر می‌شوند. در صورت پیاده‌سازی صحیح، جداول HTML به خوبی توسط ابزارهای دسترسی مانند صفحه‌خوان‌ها مدیریت می‌شوند، بنابراین یک جدول HTML موفق باید تجربه کاربران بینا و کم‌بینا را به طور یکسان بهبود بخشد. دچار ذهنیت اشتباه نشوید؛ برای اینکه جداول در وب مؤثر باشند، باید علاوه بر ساختار خوب و مستحکم HTML، اطلاعات مربوط به استایل‌بندی را نیز با CSS ارائه دهید. در این درس، ما بر بخش HTML تمرکز داریم؛ بعداً در درس استایل‌بندی جداول، با استایل‌بندی جداول آشنا خواهید شد. در این ماژول، ما بر CSS تمرکز نخواهیم کرد، اما یک استایل‌شیت CSS حداقلی برای استفاده شما ارائه کرده‌ایم که باعث می‌شود جداول شما نسبت به حالت پیش‌فرض بدون استایل‌بندی، خواناتر باشند.

چه زمانی باید از جداول HTML اجتناب کنید؟

   جداول HTML باید برای داده‌های جدولی (اطلاعاتی که کار با آنها در سطرها و ستون‌ها آسان است) استفاده شوند - این همان چیزی است که برای آن طراحی شده‌اند. متأسفانه، بسیاری از افراد قبلاً از جداول HTML برای طرح‌بندی صفحات وب استفاده می‌کردند، به عنوان مثال یک سطر برای قرار دادن سرصفحه صفحه، یک سطر برای قرار دادن هر ستون محتوا، یک سطر برای قرار دادن پاورقی و غیره. این تکنیک در گذشته مورد استفاده قرار می‌گرفت زیرا پشتیبانی CSS در مرورگرها بسیار محدودتر بود. مرورگرهای مدرن از CSS پشتیبانی کاملی دارند، بنابراین طرح‌بندی‌های مبتنی بر جدول دیگر نیازی به آن ندارند. طرح‌بندی‌های جدول اکنون بسیار نادر هستند، اما ممکن است هنوز آنها را در گوشه و کنار وب ببینید. به طور خلاصه، استفاده از جداول برای طرح‌بندی به جای تکنیک‌های طرح‌بندی CSS ایده بدی است. دلایل اصلی به شرح زیر است: جداول طرح‌بندی، دسترسی کاربران کم‌بینا را کاهش می‌دهد: صفحه‌خوان‌ها، که توسط افراد نابینا استفاده می‌شوند، تگ‌های موجود در یک صفحه HTML را تفسیر می‌کنند و محتوا را برای کاربر می‌خوانند. از آنجا که جداول ابزار مناسبی برای طرح‌بندی نیستند و نشانه‌گذاری پیچیده‌تر از تکنیک‌های طرح‌بندی CSS است، خروجی صفحه‌خوان‌ها برای کاربرانشان گیج‌کننده خواهد بود. جداول، آشفتگی برچسب ایجاد می‌کنند: همانطور که در بالا ذکر شد، طرح‌بندی‌های جدول معمولاً شامل ساختارهای نشانه‌گذاری پیچیده‌تری نسبت به تکنیک‌های مناسب طرح‌بندی هستند. این می‌تواند منجر به سخت‌تر شدن نوشتن، نگهداری و اشکال‌زدایی کد شود. جدول‌ها به طور خودکار واکنش‌گرا نیستند: وقتی از ظروف طرح‌بندی مناسب (مانند ) استفاده می‌کنید، عرض آنها به طور پیش‌فرض ۱۰۰٪ عنصر والدشان است. از طرف دیگر، جداول به طور پیش‌فرض بر اساس محتوایشان اندازه می‌گیرند، بنابراین برای اینکه سبک‌بندی طرح‌بندی جدول به طور موثر در دستگاه‌های مختلف کار کند، اقدامات اضافی لازم است.

اضافه کردن سرفصل با عناصر <th>

   حالا بیایید توجه خود را به سربرگ‌های جدول معطوف کنیم - سلول‌های خاصی که در ابتدای یک ردیف یا ستون قرار می‌گیرند و نوع داده‌هایی را که آن ردیف یا ستون در بر دارد تعریف می‌کنند (به عنوان مثال، به سلول‌های "Person" و "Age" در اولین مثال نشان داده شده در این مقاله مراجعه کنید). برای نشان دادن اینکه چرا آنها مفید هستند، به مثال جدول زیر نگاهی بیندازید. ابتدا کد منبع:

Copy

HTML

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

چرا سرفصل‌ها مفید هستند؟

   ما قبلاً تا حدودی به این سوال پاسخ داده‌ایم - وقتی هدرها به وضوح مشخص باشند، پیدا کردن داده‌های مورد نظر آسان‌تر است و طراحی به طور کلی بهتر به نظر می‌رسد. عنوان‌های جدول با برخی استایل‌های پیش‌فرض ارائه می‌شوند - حتی اگر استایل خودتان را به جدول اضافه نکنید، برای اینکه به برجسته شدنشان کمک کند، پررنگ و در مرکز قرار می‌گیرند. هدرهای جداول یک مزیت اضافه هم دارند - همراه با ویژگی scope (که در مقاله بعدی در مورد آن خواهیم آموخت)، به شما این امکان را می‌دهند که با مرتبط کردن هر هدر با تمام داده‌های موجود در همان سطر یا ستون، جداول را قابل دسترس‌تر کنید. سپس صفحه‌خوان‌ها می‌توانند کل یک سطر یا ستون از داده‌ها را به طور همزمان بخوانند، که بسیار مفید است.

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

   گاهی اوقات می‌خواهیم سلول‌ها چندین ردیف یا ستون را در بر بگیرند. مثال ساده زیر را در نظر بگیرید که نام حیوانات رایج را نشان می‌دهد. در برخی موارد، می‌خواهیم نام نرها و ماده‌ها را در کنار نام حیوان نشان دهیم. گاهی اوقات این کار را نمی‌کنیم و در چنین مواردی فقط می‌خواهیم نام حیوان کل جدول را در بر بگیرد. نشانه‌گذاری اولیه به این شکل است:

Copy

HTML

   اما خروجی دقیقاً آن چیزی را که می‌خواهیم به ما نمی‌دهد.

گروه بندی ستون ها با <colgroup> و <col>

   راهی برای هدف قرار دادن کل ستون‌های جدول به عنوان یک موجودیت واحد وجود دارد، به عنوان مثال هنگام اعمال سبک‌ها به یک جدول (که بعداً در بخش سبک‌بندی جداول با آن آشنا خواهید شد). با کسب تجربه بیشتر در ایجاد جداول HTML، متوجه خواهید شد که اعمال رنگ پس‌زمینه، به عنوان مثال، برای هر سلول در یک ستون، سخت‌تر از آن چیزی است که فکر می‌کنید. عناصر و راه حلی برای این مشکل ارائه می‌دهند. عنصر باید به عنوان فرزند جدول، درست بعد از عنصر باز ، گنجانده شود. در داخل عنصر می‌توانید یک یا چند عنصر را قرار دهید که نشان‌دهنده گروه‌هایی از ستون‌ها هستند. عنصر می‌تواند شامل یک ویژگی span باشد که تعداد ستون‌های آن گروه را نشان می‌دهد. همچنین می‌تواند شامل ویژگی‌های سراسری مانند style (اگر می‌خواهید گروه را با سبک‌های درون‌خطی هدف قرار دهید) یا class (اگر می‌خواهید آن گروه را با CSS یا جاوا اسکریپت با استفاده از نام کلاس هدف قرار دهید) باشد. عناصر ستون‌های جدول را از ابتدای ستون‌ها نشان می‌دهند، به عنوان مثال از سمت چپ جدولی که به زبانی از چپ به راست مانند انگلیسی نوشته شده است. بیایید نگاهی به یک مثال بیندازیم تا منظورمان را بهتر متوجه شویم. جدول زیر برنامه زمانی یک مدرسه را نشان می‌دهد:

Copy

HTML

   در این جدول، هشت ستون وجود دارد. بیایید ساختار و را با دقت بیشتری بررسی کنیم تا ببینیم چگونه بر آنها تأثیر می‌گذارد:

Copy

HTML

   با نگاهی به عناصر : روی اولین عنصر، span="2" تنظیم شده است، بنابراین ستون‌های اول و دوم از سمت چپ جدول را نشان می‌دهد. ما این ستون‌ها را با هیچ سبکی هدف قرار نمی‌دهیم، اما باید آن را اضافه کنیم تا بتوانیم ستون‌های بعدی را هدف قرار دهیم. روی دومین و چهارمین عنصر، ویژگی span تنظیم نشده است، بنابراین یک ستون واحد را نشان می‌دهند - در این موارد، ستون‌های سوم و پنجم. کلاس column-background روی آنها اعمال شده است. روی سومین عنصر، ویژگی span تنظیم نشده است و کلاس column-fixed-width روی آن اعمال شده است. این عنصر، ستون چهارم را نشان می‌دهد. روی پنجمین عنصر، ویژگی span تنظیم نشده است و کلاس column-background-border روی آن اعمال شده است. این عنصر، ستون ششم را نشان می‌دهد. روی ششمین عنصر، span="2" تنظیم شده است و کلاس column-fixed-width روی آن اعمال شده است. این عنصر، ستون‌های هفتم و هشتم را نشان می‌دهد. ما بیشتر CSS را برای این مثال پنهان کرده‌ایم، اما قوانینی را به شما نشان می‌دهیم که سبک‌ها را به عناصر <col> با کلاس‌های column-background، column-fixed-width و column-background-border که روی آنها تنظیم شده است، اعمال می‌کنند:

Copy

CSS

   - عناصر با کلاس column-background دارای رنگ پس‌زمینه ثابت هستند. - عناصر با کلاس column-fixed-width دارای عرض ثابت و باریک هستند. - عنصر با کلاس column-background-border دارای رنگ پس‌زمینه ثابت و حاشیه ضخیم است. در حال حاضر نیازی نیست نگران نحوه عملکرد CSS باشید؛ بعداً در ماژول اصول اولیه استایل‌بندی CSS با جزئیات بیشتری در مورد آن خواهید آموخت.