50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش CSS – جداول در CSS

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با نحوه استایل دهی لیست ها در CSS آشنا شدید. در این بخش قصد داریم شما را با نحوه استایل دهی جداول در CSS را آموزش بدیم.

معمولا از جدول برای نماش داده های موجود استفاده می شود. در CSS شما می توانید ظاهر نمایشی مربوط به جداول را کنترل و مدیریت کنید.

استایل دهی جداول در CSS :

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

در این مقاله به شما نشان خواهیم داد که چگونه می توانید طرح و نمایش المان جدول table را به کمک CSS کنترل کنید و یک جدول زیبا و جذاب بسازید.

اضافه کردن حاشیه(Borders)به جدول:

خصوصیت Border در زبان CSS بهترین روش برای تعریف حاشیه جدول هاست.

به مثال زیر توجه کنید. این کد می تواند حاشیه سیاه را برای المان های <table> ،<th> و <td> ایجاد کند.

خصوصیت border-collapse:

اگر مثال بالا را اجرا کنید, حتما متوجه شده اید که هر سلول از جدول دارای حاشیه های جداگانه و نیز فضایی بین حاشیه های سلول های مجاور است.

این موضوع بدین خاطر رخ می دهد که حاشیه های سلول جدول به صورت پیش فرض از هم جدا شده اند. اما شما می توانید حاشیه های جدول را به کمک خصوصیت border-collapse به یک حاشیه واحد تبدیل کنید.

این خصوصیت مدل حاشیه جدول را انتخاب می کند. چنین خصوصیتی می تواند یکی از دو مقادیر Collapse یا Separate را داشته باشد.

  •   مدل separated، مدل پیش فرض برای جدول های HTML  است که در آن هر سلول مجاور حاشیه مجزای خویش را خواهد داشت.
  •   در مدل collapsed ، سلول های مجاور دارای حاشیه های اشتراکی هستند.

به مثال زیر توجه کنید:

همچنین شما می توانید فضای بین حاشیه سلول های جدول را به کمک تنظیم مقدار خصوصیت border-spacing بر روی صفر حذف کنید.

با این حال، چنین خصوصیتی تنها فضای موجود را حذف می کند و همانند خصوصیت border-collapse حاشیه ها را ترکیب نمی نماید.

نکته: اگر <!DOCTYPE> در سند HTML مشخص نشده باشد، خصوصیت border-collapse نتایج غیر قابل پیش بینی خواهد داشت.

کنترل کردن طرح جدول:

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

با این حال، در برخی از موارد باید عرض ثابتی برای جدول در نظر گرفته شود تا طرح آن به درستی مدیریت گردد. برای اینکه بتوانید اینکار را به درستی انجام دهید کافیست از خصوصیت table-layout استفاده نمایید.

این خصوصیت الگوریتم هایی را برای استفاده در سلول ها، ستون ها و سطرها ایجاد می کند. دو الگوریتم طرح بندی جدول  در دسترس کاربران قرار دارد: یکی از آن ها automatic و دیگری Fixed است.

  •   Auto: از الگوریتم خودکار برای طرح بندی جدول استفاده می کند. با این الگوریتم عرض جدول و سلول های آن  به محتوای سلول بستگی خواهد داشت.
  •   Fixed: از الگوریتم ثابت برای طرح بندی جدول استفاده می کند. با این الگوریتم، طرح افقی جدول به محتوای سلول وابسته نیست و تنها به عرض جدول، عرض ستون و حاشیه یا فضای سلول وابسته خواهد بود.

مثال زیر نشان می دهد که جدول از الگوریتم fixed استفاده می کند و عرض ثابت ۳۰۰ پیکسل را دارد.

بدون وجود مقادیر ثابت در خصوصیت table-layout (در جدول های بزرگ) کاربر تا زمانی که مرورگر کل جدول را رندر نکرده است هیچ بخشی از جدول را نخواهد دید .

نکته: شما می توانید عملکرد رندر شدن جدول را به کمک خصوصیت table-layout بهینه سازی کنید. مقادیر ثابت برای این خصوصیت، باعث می شود یک سطر از جدول شما در زمان واحد رندر شود و همین امر اطلاعات سریع تری در اختیار کاربران قرار می دهد.

مدیریت سلول های خالی:

خصوصیت empty-cells رندر شدن حاشیه ها و پس زمینه سلول هایی که محتوای قابل مشاهده در جدول ندارند را  کنترل می کند.  این خصوصیت سه مقدار زیر را می تواند اتخاذ کند:

  • show
  • hide
  • inherit

قانون استایل دهی زیر، سلول های خالی موجود در المان جدول را پنهان می سازد.

کنترل موقعیت عنوان جدول:

خصوصیت caption-side در CSS، موقعیت عمودی جعبه کپشن جدول را تنظیم می کند. قانون استایل دهی زیر، کپشن جدول را زیر جدول والدش تنظیم می کند.

با این حال، برای تغییر ترازبندی افقی متن کپشن، می توان از خصوصیت text-align استفاده کرد.

توجه: خصوصیت caption-side در مرورگر اینترنت اکسپلورر ۷ و پایین تر از آن کار نمی کند. این خصوصیت تنها در اینترنت اکسپلورر ۸ پشتیبانی می شود و باید <!DOCTYPE> مشخص گردد.

 

امیدوارم در این بخش آموزش CSS, از استایل دهی جداول در CSS نهایت استفاده را برده باشید.

در بخش بعدی با Box-Model در CSS آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link