هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب
الدرس: استخدام <colgroup> و<col> لتنسيق الأعمدة في جداول HTML باستخدام CSS
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
<colgroup> و<col> لتنسيق الأعمدة في جداول HTML باستخدام CSS. سنستعرض كيف يمكن تخصيص عرض الأعمدة وألوانها لتحقيق تصميم متناسق وجذاب.ما هو
<colgroup> و<col>؟<colgroup>: تُستخدم لتجميع مجموعة من الأعمدة في الجدول وتطبيق الأنماط عليها بشكل جماعي. هذا يسمح لك بتطبيق خصائص محددة على مجموعة من الأعمدة دفعة واحدة.<col>: تُستخدم لتطبيق أنماط على عمود محدد داخل مجموعة الأعمدة. يمكنك تحديد سمات مثل العرض والخلفية لكل عمود بشكل منفصل.
مثال على استخدام
<colgroup> و<col><style>
table { border-collapse: collapse; width: 40%; margin: 20px auto; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f4f4f4; }
col:nth-child(1) { background-color: #f00; }
col:nth-child(2) { background-color: blue; }
col:nth-child(3) { background-color: green; }
td {
color:#fff;
}
</style>
<table>
<colgroup>
<col style="width: 30%;">
<col style="width: 20%;">
<col style="width: 50%;">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>29</td>
<td>Graphic Designer</td>
</tr>
<tr>
<td>Bob</td>
<td>35</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>Charlie</td>
<td>42</td>
<td>Project Manager</td>
</tr>
</tbody>
</table>
شرح الكود
- الأنماط العامة: نحدد أنماطًا عامة للجدول باستخدام CSS مثل
border-collapseلتحديد كيفية دمج حدود الخلايا، وwidthلتحديد عرض الجدول. <colgroup>و<col>: نستخدم<colgroup>لتجميع الأعمدة، و<col>لتحديد العرض الخلفية لكل عمود على حدة. في المثال، نستخدم أنماطًا مخصصة لكل عمود (أحمر، أزرق، أخضر) لتوضيح كيفية تخصيص الألوان.- أنماط خلايا الجدول: نستخدم CSS لتحديد أنماط الخلايا في الجدول مثل الحدود والخلفية والتعبئة.
لماذا نستخدم
<colgroup> و<col>؟- تخصيص الأعمدة: يساعد
<colgroup>و<col>في تخصيص عرض وألوان الأعمدة بشكل دقيق، مما يحسن من تنظيم الجدول وجعل البيانات أكثر وضوحًا. - تحسين التوافق: عند استخدام هذه العلامات بشكل صحيح، يمكنك ضمان توافق تصميم الجدول مع المتصفحات المختلفة وجعل البيانات أكثر قراءة.
البدائل والتحديات
- التوافق مع المتصفحات: بينما
<colgroup>و<col>توفر طريقة فعالة لتنسيق الأعمدة، يجب الانتباه إلى أن بعض المتصفحات قد لا تدعمها بشكل كامل. في هذه الحالة، يمكن استخدام CSS لتخصيص الأعمدة بشكل مباشر. - التقنيات الحديثة: بعض المطورين يفضلون استخدام تقنيات CSS الحديثة مثل Grid وFlexbox لتحسين تنسيق الجداول وتجاوز بعض قيود
<colgroup>و<col>.
كلمة عن الدرس
تعلم كيفية استخدام
<colgroup> و<col> لتنسيق الأعمدة في جداول HTML يمكن أن يعزز من جودة تصميماتك ويجعلها أكثر احترافية. استكشاف كيفية تطبيق الأنماط بشكل دقيق يساعد في تحسين تجربة المستخدم وجعل البيانات أكثر وضوحًا.استثمر وقتك في تعلم هذه التقنيات للحصول على جداول تنسيق فعالة وتجربة مستخدم متفوقة.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي استخدام و
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
الأكواد المستخدمة في هذا الدرس
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
الملف المرجعي لشرح الجداول وعرض البيانات في HTML
- 337 دقيقة من الفيديوهات التفاعلية الحصرية
- 66 مصدر إضافي
- 52 ملحقات PDFs
- 14 فيديو إضافي داخل الدروس
- 28 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
دورة تدريبية تعلم لغة HTML لبناء مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب
دورات تدريبية أخرى في برمجة
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة...
دورة تدريبية في فهم شبكات الإنترنت وخوادم الويب
دورة تدريبية تحتوي على دروس مجانية مدعمة من البورد الأوروبي لفهم أساسيات شبكة الإنترنت والاتصالات بين المستخدمين وتطبيقات الويب والأجهزة
مقالات ذات صلة
ماهي لغة PHP ولماذا نستخدمها وكيف نقوم بكتابتها
ماهي لغة PHP ولماذا نستخدمها وكيف نقوم بكتابتها؟ لغة PHP هي واحدة من أقوى لغات البرمجة المستخدمة في تطوير الصفحات الويب الديناميكية....
التعامل مع البيانات وواجهة المستخدم باستخدام JavaScript
هل تساءلت يومًا عن كيفية التحكم في البيانات والتفاعل مع واجهة المستخدم في صفحات الويب؟ 🤔 في عالم البرمجة الحديثة، يعد فهم...
تعلم البرمجة وتطوير صفحات الويب Javascript
برنامج تعلم البرمجة وتطوير صفحات الويب بلغة JavaScript يعد برنامج “تعلم البرمجة وتطوير صفحات الويب بلغة JavaScript” خيارًا مثاليًا لكل من يرغب...
