رنگی کردن : برای تغییر رنگ ردیف ها یک جدول HTML می توان با CSS کار را آسان کرد.
مثال اول :
رنگی کردن ردیف های زوج و فرد جدول
برای این کار از کد CSS زیر استفاده کنید و رنگ های مورد نظر را اعمال کنید.
اگر دقت کنید ردیف ها به صورت زوج و فرد هر کدام دارای رنگ منحصر به فرد می باشند.
رنگی کردن
even – odd
EVEN AND ODD RULES
PHP
1
2
3
4
5
6
7
tr:nth-child(even){
background:#C1C1C1
}
tr:nth-child(odd){
background:#FFFFFF
}
مثال دوم :
از آنجا که جداول اطلاعات زیادی را در سطرهای نزدیک به هم نشان میدهند، ممکن است کاربر هنگام دنبال کردن محتوا در سطرهای مختلف درچار اشتباهاتی در برداشت اطلاعات شود. از این رو برای ایجاد تفاوت بین سطرها و قابلیت تمایز برای چشم هایی که سطر های نزدیک به هم را مشاهده میکنند، سطرهای جداول را به صورت یکی درمیان با رنگ های متفاوت نشان میدهند. اینکار از طریق تکنیک های مختلفی صورت میگیرد اما امروزه با ظهور CSS3 به سادگی توسط چند خط کد CSS و بدون نیاز به هیچگونه کد جاوااسکریپت و غیره می توان این قابلیت را به جداول نمایش داده شده در وبسایت خود اضافه کنید.نتیجه جدولی راه راه به شکل زیر خواهد بود:
سلول شماره یک
سلول شماره دو
سلول شماره سه
سلول شماره چهار
سلول شماره پنج
برای راه راه کردن جدول مورد نظر خود کافیست دستور CSS زیر را بر آن اعمال کنید:
کدهای CSS
Css Table
CSS
1
2
3
tbody tr:nth-child(odd) {
background-color:#ccc;
}
نکته: در دستور فوق پارامتر odd به معنی هایلایت کردن سطرهای فرد می باشد. بنابراین چنانچه می خواهید سطرهای زوج جدول شما رنگی باشد، کافیست این پارامتر را به even تغییر دهید.
کدهای HTML جدول مورد نظر ما میتواند به شرح زیر باشد :
