تغيير خلفيات الجداول على صفحات HTML

نشرت من قبل jabism في

السلام عليكم ورحمة الله

تغيير خلفيات الجداول والخلايا على صفحات HTML باستخدام  background-color  

🌓 إذا كنتم مازلتم تذكرون درس إضافة الخلفية في CSS، الذي تطرقت فيه إلى كيفية تغيير خلفية صفحات الويب سواء كانت الخلفية باللــون أو الصورة، في الحقيقة كان درساً رائعاً !🏅🎖

قد يشدك الحنين إلى الماضي حيث كان تغيير لون الخلفيات في HTML يتطلب فقط معرفة سمة bgcolor وإدماجها داخل أكواد HTML.  لقد كانت هاته العلامة بمثابة العصا السحرية التي تتيح لنا تعيين لون خلفية عناصر HTML.  لكنه  تم إهمالها في HTML 4 وتم إيقافها اعتبارًا من HTML 5 بحيث كانت هاته السمة فيما مضى تُستخدم لتعيين لون الخلفية لعناصر HTML مثل العنصر<table> أو العنصر <body>.

واليوم ومع ظهور CSS3 تغير الحال بعض الشيئ! فأحببت أن أقوم بتحرير بعض التفاصيل حول تغيير خلفية  الجداول باستعمال السمة الجديدة  background-color ، وهاته العلامة لا نستعملها فقط لتغيير  خلفية الصفحات أو الجداول، بل يمكننا استعمالها حتى في تغيير خلفية كل خانة منفصلة عن الأخرى .

في صفحة الويب يمكننا تمييز خلية أو خلايا داخل جدول بألوان مختلفة. سيكون تصميم الجدول رائعاً إذا استعملنا له خلفية أو لبعض خلاياه حسب ما يناسب المحتوى. وهنا سأطرح  احتمالين ، إما باستخدام فكرة ألوان ست عشرية ، أو اسم اللون كما هو الحال بالنسبة لخلفية الصفحات التي رأيناها في درس إضافة الخلفية في CSS.

وقبل أن نتكلم عن تلوين خلفية الجداول والخانات لا بد أن نقوم بإنشاء جدول لنطبق عليه موضوع درسنا اليوم  (نرسم جدول، نملأه ثم نلون خلفيته)، إذن جهز نفسك للتمرين.

أولاً نرسم جدول على صفحات الويب باستخدام العلامات :   <td> أو <tr> أو <table>.

والتكن هذه هي شفيرة الجدول:

نحصـل علــى هــذا الجدول:

1 2 3 4 5 6 7
8 9 10 11 12 13 14

 

ويمكن تلوين خلفية الجدول كاملاً باللون الأزرق مثلاً، لكن يجب أن نُـغـيِّـر السطر الأول من الشفيرة التي طرحتها في الأعلى  لتصبح هكذا:

 

 

1 2 3 4 5 6 7
8 9 10 11 12 13 14

 

ويمكننا أيضاً ملأ هذا الجدول بما نريد، مع إمكانية تغيير خلفية الجدول ككل كالسابق،  أو تلوين خلفيات السطور أو الخلايا فقط، مثلاً في الجدول تحت كتبت أسماء التلاميذ في أحد الأقسام الدراسية مع المعدلات التي حصلوا عليها ، وجلعت سطر الأسماء باللون الأزرق بينما خلايا المعدلات بألوان مختلفة:

فرح هبة هند يس آلاء أنس فجر
17.03 17.01 16.96 15.75 13.20 11.33 11.15

هذه هي شفيرة الجدول:

 

🌓 أمثلة لتلوين خلفيات الجداول والخانات 

افتراضيًا ، يكون لون الخلفية شفافًا ، بمعنى أنه لا يوجد لون للخلفية.

transparent

يمكنك استخدام أحد أسماء الألوان :

#05ffb0

يمكنك استخدام رموز اللون السداسية عشرية.

Green

يمكنك استخدام رموز ألوان rgb ():

القيمة الأولى هي للأحمر
القيمة الثانية هي للأخضر
القيمة الثالثة للأزرق
يمكن أن يكون لكل منهم قيمة بين 0 و 255.

50, 115, 220

يمكنك استخدام رموز ألوان hsl ():

القيمة الأولى هي للون وهي يمكن أن تذهب من 0 إلى 359
القيمة الثانية هي للتشبع وتذهب من 0 ٪ إلى 100 ٪
القيمة الثالثة هي لمعان وتذهب من 0 ٪ إلى 100 ٪

14, 100%, 53%

يمكنك استخدام hsl () رموز اللون:

القيم 3 الأولى هي ل hsl
القيمة الرابعة للقناة ألفا وتعرف عتامة اللون
يمكن أن تنتقل قيمة ألفا من صفر (شفاف) إلى 1 (غير شفاف).

14, 100%, 53%, 0.6

روابط مكملة:

لا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء.

فــي أمــان الله

 


jabism

عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، خبرة مهمة في الفلاش والفوتوشوب ومشاكل الويندوز .

0 تعليق

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *