رنگی کردن خانه های خالی جدول با css

رنگی کردن جدول با css

در این نوشته یک آموزش کاربردی و ساده در صفحات وب که با css استایل دهی می شوند.

برای شما به اشتراک گذاشته ایم پس با ما همراه باشید.

 

فرض کنید جدول زیر را دارید:

جدول ساده در html
جدول ساده در html

قصد داریم خانه هایی که با ضربدر مشخص شدند را رنگی کنیم تا با بقیه فرق کنند. شاید اول بگویید شماره ی خانه را با خصیصه ی nth-child می توان رنگی کرد ولی در صورتی که جدول بزرگ شود اینکار غیر معقول و زمانبر می باشد.

خروجی کد باید به شکل زیر شود:

رنگی کردن جدول با css
جدول رنگی شده در html

بدون حاشیه ی بیشتر سراغ انجام دادن اینکار می رویم.

کد HTML + CSS :

(دانلود)

ما در مثال بالا تنها با خصیصه ی empty در خاصیت تگ td در بخش css گفتیم که خانه های خالی رنگ خاکستری را به خود بگیرند.

برای دانلود کدهای بالا روی این لینک کلیک کنید.

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

 

نظرات خود را در ارتباط با “ترفند رنگی کردن جدول با css” برای ما بنویسید.

موفق و پیروز باشید.

برای امتیاز به این نوشته کلیک کنید!
[کل: ۰ میانگین: ۰]
با دوستانتان به اشتراک بگذارید

دیدگاهتان را بنویسید

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

*

code