آموزش CSS مبتدی : استایل‌دهی جداول

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

یک جدول HTML معمولی

بیایید با نگاهی به یک جدول HTML معمولی شروع کنیم. خب، من می‌گویم معمولی - بیشتر نمونه‌های جدول HTML در مورد کفش، یا آب و هوا، یا کارمندان هستند؛ ما تصمیم گرفتیم با تبدیل آن به گروه‌های پانک معروف بریتانیا، مطالب را جالب‌تر کنیم. نشانه‌گذاری به این شکل است:

HTML

جدول به خوبی نشانه‌گذاری شده، به راحتی قابل استایل‌بندی و دسترسی‌پذیر است، به لطف ویژگی‌هایی مانند و غیره. متأسفانه، ظاهر چندان خوبی ندارد. فقط با استایل پیش‌فرض مرورگر، شلوغ، ناخوانا و کمی کسل‌کننده به نظر می‌رسد: برای رفع این مشکل باید از CSS استفاده کنیم. شما می‌توانید با استفاده از CSS به هر شکلی که می‌خواهید، یک جدول را استایل‌دهی کنید. برای مثال، ما این طرح نسبتاً "پانک" مانند را ایجاد کرده‌ایم: با این حال، این طراحی نسبتاً زننده است. در این مقاله، شما را با استفاده از برخی از بهترین شیوه‌های طراحی جدول - همانطور که در «تایپوگرافی وب: طراحی جداول برای خوانده شدن نه دیده شدن» آمده است - آشنا می‌کنیم.

شروع استایل‌دهی به جدول

بیایید با هم روی استایل‌دهی به مثال جدول خود کار کنیم. برای شروع، یک کپی محلی از نمونه کد نشان داده شده قبلی تهیه کنید و آن را در یک دایرکتوری کاری در جایی از رایانه محلی خود ذخیره کنید. در مرحله بعد، یک فایل جدید به نام ایجاد کنید و آن را در همان دایرکتوری که سایر فایل‌های شما قرار دارند ذخیره کنید. با قرار دادن خط زیر از HTML در ، CSS را به HTML پیوند دهید:

HTML

HTML خود را در یک مرورگر بارگذاری کنید تا ببینید به طور پیش‌فرض چگونه به نظر می‌رسد.

به‌روزرسانی فونت

این یک نکته‌ی جزئی است و خیلی به استایل‌دهی جداول مربوط نمی‌شود، اما به نظر ما فونت پیش‌فرض برای جدولی درباره‌ی گروه‌های پانک کمی زیادی رسمی به نظر می‌رسید. CSS خود را با اضافه کردن قانون زیر شروع کنید:

CSS

فاصله گذاری

اولین کاری که باید با جدول خود انجام دهیم، مرتب کردن فاصله بین عناصر است - سبک پیش‌فرض جدول بسیار فشرده است! برای انجام این کار، CSS زیر را به انتهای فایل خود اضافه کنید:

CSS

مهم‌ترین بخش‌هایی که باید به آنها توجه کنید به شرح زیر است: تنظیم مقدار fixed برای table-layout معمولاً ایده خوبی برای جدول شماست، زیرا باعث می‌شود جدول به طور پیش‌فرض کمی قابل پیش‌بینی‌تر رفتار کند. معمولاً ستون‌های جدول بر اساس میزان محتوایی که دارند، اندازه می‌گیرند که نتایج عجیبی ایجاد می‌کند. با ، می‌توانید ستون‌های خود را بر اساس عرض عنوان‌هایشان اندازه دهید و سپس با محتوای آنها به طور مناسب برخورد کنید. کریس کوایر این تکنیک را با جزئیات بیشتر در Fixed Table Layouts مورد بحث قرار می‌دهد. ما fixed layout را با عرض 90٪ و مارجین ترکیب کرده‌ایم. این تنظیمات به این معنی است که جدول بیشتر نمای دید را پر می‌کند و به صورت افقی در مرکز قرار می‌گیرد. مقدار collapse برای border-collapse بهترین روش استاندارد برای هرگونه تلاش برای سبک‌دهی جدول است. به طور پیش‌فرض، وقتی حاشیه‌ها را برای عناصر جدول تنظیم می‌کنید، همه آنها فاصله‌ای بین خود خواهند داشت، همانطور که تصویر زیر نشان می‌دهد:

این خیلی خوب به نظر نمی‌رسد (هرچند شاید ظاهری که می‌خواهید باشد). با تنظیم ، حاشیه‌ها به هم می‌ریزند و یکی می‌شوند که ظاهر بسیار بهتری دارد:

ما مقداری فاصله‌گذاری روی عناصر و تنظیم کرده‌ایم - این کار به آیتم‌های داده فضای کافی برای نفس کشیدن می‌دهد و باعث می‌شود جدول بسیار خواناتر به نظر برسد. کد خود را ذخیره کنید و مرورگر خود را رفرش کنید تا نتایج را ببینید.

ترازبندی

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

CSS

ما در اینجا از شبه کلاس استفاده کرده‌ایم؛ یک انتخابگر مفید که به شما امکان می‌دهد یک فرزند شماره‌گذاری شده خاص از یک عنصر یا یک دنباله خاص را انتخاب کنید. در اینجا ما از آن برای انتخاب عناصر خاص درون عناصر استفاده می‌کنیم. توجه داشته باشید که چگونه عرض‌های خاصی را نیز برای ردیف‌های جدول تنظیم کرده‌ایم، به طوری که ردیف‌های حاوی متن بسیار پهن‌تر از ردیف‌های حاوی اعداد تنظیم شده‌اند. این ایده خوبی است - ردیف‌هایی که محتوای بیشتری دارند به فضای بیشتری نیاز دارند تا بیشترین شانس ممکن را برای قرار گرفتن محتوایشان در یک خط داشته باشند. ردیف‌هایی که محتوای کمتری دارند به فضای زیادی برای نمایش داده‌های خود نیاز ندارند و در واقع اگر فضای زیادی به آنها بدهید، داده‌ها کمی در فضا گم می‌شوند و بنابراین خواندن آنها دشوارتر می‌شود. همچنین باید مطمئن شویم که اقلام داده ما به جای وسط، در بالای سلول‌های خود تراز شده‌اند. برای دستیابی به این هدف، می‌توانیم از ویژگی vertical-align استفاده کنیم. قانون th, td موجود خود را به صورت زیر به‌روزرسانی کنید:

CSS

دوباره، ذخیره کنید و رفرش کنید تا تأثیر آخرین به‌روزرسانی‌های CSS خود را ببینید.

اضافه کردن حاشیه

جدول از قبل خیلی بهتر به نظر می‌رسد، اما باید چند حاشیه اضافه کنیم تا بین جدول، داده‌ها و سطر جمع در پایین، جدایی بصری ایجاد شود. برای انجام این کار، قوانین زیر را به CSS خود اضافه کنید:

CSS

در مرحله بعد، قانون جدول موجود خود را به صورت زیر به‌روزرسانی کنید:

CSS

ذخیره و رفرش کنید؛ جدول شما حالا باید کاملاً خوانا به نظر برسد!

نوار گورخری

ما می‌خواستیم یک بخش جداگانه را به نحوه پیاده‌سازی خطوط راه‌راه گورخری اختصاص دهیم - ردیف‌های رنگی متناوب که تجزیه و خواندن ردیف‌های داده مختلف در جدول شما را آسان‌تر می‌کنند. CSS زیر را به انتهای فایل خود اضافه کنید:

CSS

پیش از این دیدید که از انتخابگر برای انتخاب عناصر فرزند خاص استفاده می‌شود. همچنین می‌توان به آن یک فرمول به عنوان پارامتر داد تا دنباله‌ای از عناصر را انتخاب کند. فرمول 2n+1 تمام فرزندان فرد (1، 3، 5 و غیره) و فرمول 2n تمام فرزندان زوج (2، 4، 6 و غیره) را انتخاب می‌کند. ما در کد خود از کلمه کلیدی odd استفاده کرده‌ایم که میانبری برای فرمول 2n+1 است (even مخفف 2n است). باز هم، فراموش نکنید که برای مشاهده نتیجه، ذخیره و رفرش کنید.

استایل دادن به کپشن ها

یک کار دیگر هم باید با جدولمان انجام دهیم - به عنوان جدول استایل بدهیم. برای انجام این کار، کد زیر را به انتهای فایل خود اضافه کنید:

CSS

در اینجا هیچ چیز قابل توجهی وجود ندارد، به جز ویژگی caption-side که مقدار bottom به آن داده شده است. این باعث می‌شود که عنوان در پایین جدول قرار گیرد.

نکات ریز استایل‌دهی جداول

قبل از ادامه، فکر کردیم فهرستی سریع از مفیدترین نکات نشان داده شده در بالا را در اختیار شما قرار دهیم: نشانه‌گذاری جدول خود را تا حد امکان ساده کنید و همه چیز را انعطاف‌پذیر نگه دارید. از برای ایجاد یک طرح‌بندی جدول قابل پیش‌بینی‌تر استفاده کنید که به شما امکان می‌دهد با تنظیم عرض روی عنوان‌های آنها () به راحتی عرض ستون‌ها را تنظیم کنید. از برای فرو رفتن حاشیه‌های عناصر جدول در یکدیگر استفاده کنید و ظاهری مرتب‌تر و کنترل‌پذیرتر ایجاد کنید. از برای تقسیم جدول خود به بخش‌های منطقی و ایجاد مکان‌های اضافی برای اعمال CSS استفاده کنید، بنابراین در صورت لزوم، لایه‌بندی سبک‌ها روی یکدیگر آسان‌تر می‌شود. از zebra striping برای خواناتر کردن ردیف‌های جایگزین استفاده کنید. از text-align برای تراز کردن متن و خود استفاده کنید تا مطالب مرتب‌تر و آسان‌تر دنبال شوند.