تم تعيين لون الخلفية للأعمدة الثلاثة للجدول باستخدام الوسوم <colgroup> و <col> .
<table border="1">
<colgroup>
<col span="2" style="background-color:red" />
<col style="background-color:yellow" />
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
المتصفحات الداعمة
ان وسم<col> متوافق مع جميع المتصفحات الرئيسية
التعريف والاستخدام
يستخدم الوسم <col> لإنشاء قيم لواحق لعمود أو أكثر في الجدول . يعتبر الوسم <col> مهم جداً لتطبيق التصميمات لأعمدة الجدول عوضاً عن تكرار التصميم لكل خلية أو لكل سطر .
يستخدم الوسم <col> داخل وسم الجدول <table> و داخل وسم <colgroup> .
ملاحظات و تعليمات
يجب استخدام لغة التصميم CSS لتطبيق تصميمات معينة الى وسم <col> لعمود أو أكثر في الجدول من حيث لون الخلفية و العرض و الحدود .
يمكنك أيضاً مشاهدة شرح وسم <colgroup> .
الاختلاف بين HTML و XHTML
في لغة HTML : يمكن عدم إغلاق وسم <col> .
في لغة XHTML : يجب إغلاق وسم <col> .
اللواحق الاختيارية
تشير DTD الى اللواحق المسموح استخدامها في لغة HTML 4.01/XHTML 1.0 DTD .
S=Strict, T=Transitional, and F=Frameset
| اللاحقة | القيمة | الشرح | DTD |
|---|---|---|---|
| align | leftright center justify char | تحدد محاذاة المحتوى المتعلق بوسم <col> . | STF |
| char | character | تحدد محاذاة المحتوى المتعلق بحرف و بوسم <col> . | STF |
| charoff | number | تحديد عدد الأحرف للمحتوى الذي سيتم محاذاته من الأحرف المحددة باللاحقة char | STF |
| span | number | تحديد رقم عدد الأعمدة لوسم <col> باستخدام اللاحقة span | STF |
| valign | topmiddle bottom baseline | تحديد المحاذاة الشاقولية للمحتوى التابع لوسم <col> . | STF |
| width | %pixels relative_length | تحديد عرض عنصر <col> | STF |
اللواحق الأساسية
يدعم وسم <col> عدداً من اللواحق التالية
| اللاحقة | الشرح |
|---|---|
| class | تستخدم لتحديد اسم أو أكثر لتصنيف أو عنصر معين ( غالباً مايستخدم مع ملف التصميم css ) |
| id | تستخدم لتحديد id مخصص لعنصر معين |
| style | تستخدم لتحديد تصميم CSS داخلي لعنصر معين . |
| title | تحديد معلومات اضافية عن العنصر . |
| dir | تحديد جهة النص لمحتوى العنصر . |
| lang | تحدد اللغة لمحتوى العنصر . |
| xml:lang | تحدد لغة محتوى العنصرلصفحة XHTML . |
| accesskey | تحديد وسم الاختصار لتفعيل أو التركيز على العنصر . |
| tabindex | تحدد رقم الاندكس للعنصر |
لمزيد من اللواحق يمكنك التوجه الى قائمة اللواحق الأساسية
لواحق الأحداث events
يدعم وسم <col> عدداً من اللواحق التالية
| اللاحقة | القيمة | الشرح |
|---|---|---|
| onblur | script | يستخدم السكربت عند عدم التركيز على العنصر . |
| onchange | script | يستخدم السكربت عند تغير العناصر . |
| onfocus | script | يستخدم السكربت عند حصول العنصر على التركيز |
| onreset | script | يستخدم السكربت عند ضبط النموذج . |
| onselect | script | يستخدم السكربت عند اختيار العناصر . |
| onsubmit | script | يستخدم السكربت عند الضغط على ارسال للنموذج . |
لمزيد من الأحداث يمكنك التوجه الى قائمة الأحداث الأساسية
مؤسس المعهد العربي للبرمجة ومدّون فيه. أقدم العديد من الدروس والنصائح من خلال دراستي وتجربتي الطويلة في تصميم وبرمجة مواقع الويب. أقدّم معلومات مجانية للمبرمجين الجدد ولدينا أكاديمية لتدريس تصميم المواقع وتطويرها باستخدام أهم لغات البرمجة في اسطنبول تركيا وأيضاً اونلاين.
ليست هناك تعليقات:
إرسال تعليق