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

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

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

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

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

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

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

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

فاصل

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

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

أولاً نرسم جدول على صفحات الويب باستخدام العلامات :   <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

روابط مكملة:

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

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

قناتي على اليوتوب

تنويرأرى أن هذه المواضيع الذات صلة قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

 

اترك تعليقاً

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

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 442 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

756 عدد المشاهدات لهذا المحتوى
Scroll to Top