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

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

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

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

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

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

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

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

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

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

شفيرة لإدراج الجداول

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

<table style="width: 100%; height: 92px;">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</tbody>
</table>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

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

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

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

<table style="background-color: blue; width: 100%; height: 92px;">

1	<table style="background-color: blue; width: 100%; height: 92px;">

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

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

شفيرة لتلوين خلفيات الجداول

<table style="width: 100%; height: 92px;">
<tbody>
<tr style="background-color: blue; height: 46px;">
<td style="height: 46px; text-align: center;">رشيد</td>
<td style="height: 46px; text-align: center;">هبة</td>
<td style="height: 46px; text-align: center;">نهيلة</td>
<td stylebackground-color: blue; height: 46px text-align: center">حسام</td>
<td style="height: 46px; text-align: center;">إحسان</td>
<td style="height: 46px; text-align: center;">إلياس</td>
<td style="height: 46px; text-align: center;">كريم</td>
<td style="height: 46px; text-align: center;">مجدولين</td>
</tr>
<tr style="height: 46px;">
<td style="background-color: green; height: 46px; text-align: center;">17.03</td>
<td style="background-color: yellow; height: 46px; text-align: center;">17.01</td>
<td style="background-color: #00ffff;  height: 46px; text-align: center;">16.96</td>
<td style="background-color: #ff00ff; height: 46px; text-align: center;">15.75</td>
<td style="background-color: #b8db4b; height: 46px; text-align: center;">13.20</td>
<td style="background-color: #ffee4c; height: 46px; text-align: center;">11.33</td>
<td style="background-color: #ffffff; height: 46px; text-align: center;">11.15</td>
<td style="background-color: #b1a168; height: 46px; text-align: center;">10.50</td>
</tr>
</tbody>
</table>

<tbody>

<td style="height: 46px; text-align: center;">نهيلة</td>

<td style="height: 46px; text-align: center;">إحسان</td>

<td style="height: 46px; text-align: center;">إلياس</td>

<td style="height: 46px; text-align: center;">مجدولين</td>

</tr>

</tr>

</tbody>

</table>

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

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

background-color: transparent;

1	background-color: transparent;

transparent

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

background-color: green;

1	background-color: green;

#05ffb0

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

background-color: #05ffb0;

1	background-color: #05ffb0;

Green

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

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

background-color: rgb(50, 115, 220);

1	background-color: rgb(50, 115, 220);

50, 115, 220

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

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

background-color: hsl(14, 100%, 53%);

1	background-color: hsl(14, 100%, 53%);

14, 100%, 53%

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

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

background-color: hsla(14, 100%, 53%, 0.6);

1	background-color: hsla(14, 100%, 53%, 0.6);

14, 100%, 53%, 0.6

صفحات ذات صلـة

إنشاء جدول في HTML
دمج خلايا الجداول في HTML

روابط مكملة:

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

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

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

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

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