CSS Tables
التحكم في شكل الجداول في لغة CSS
سوف تتعلم في هذا الدرس كيفية التحكم في شكل الجداول وشكل الصفوف وشكل الخلايا لكل صف من حيث الأطارات الداخلية والهوامش وألوان النصوص والخلفيات وتغيير شكل الصفوف عند تمرير mouse علي الصفوف في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Tables
التحكم في شكل الجداول في لغة CSS
</>
CSS Tables
التحكم في شكل الجداول في لغة CSS
في لغة CSS يمكن عمل جداول أكثر ابداعية ويمكنك التحكم في الجداول بشكل كامل مثل النصوص او الخلفيات او المسافات.
يمكنك عمل كل خلية أو كل صف بلون مختلف او تضع في خلايا الجداول زر بواسطة لغة HTML مع لغة CSS ويمكنك التحكم ايضا في الاطارات لكل صف وكل خلية.
| # | User | Course |
|---|---|---|
| 1 | Mohamed Adly | HTML |
| 2 | Mostafa Hamed | CSS |
| 3 | Salah El Emam | Java Script |
| 4 | Eman Sammer | Jquery |
| 5 | Abdelrahaman Mohamed | Bootstrap |
| 6 | Somya Ahmed | PHP |
| 7 | Yahia Salah | MY SQL |
</>
CSS table border and width
التحكم في إطار وعرض الجدول في لغة CSS
عن طريق خاصية width يمكن التتحكم في عرض الجدول داخل صفحة الويب ويمكن أن يكون الجدول بعرض الشاشة بالكامل تكون قيمة الخاصية بالنسبة المئوية width:100% في لغة CSS.
وعن طريق خاصية border يمكن التتحكم إطارات الجدول ,والصفوف والأعمده الداخلية ويمكن أيضاً التحكم في لون وحجم ونوع الأطار في لغة CSS.
CSS table border dashed
إضافة إطار للجدول مع ضبط الجدول بعرض الشاشة في لغة CSS
table,th,td
{
border: 1px dashed blue;
}
</>
CSS collapse table borders
الغاء ازدواج إطار الجدول في لغة CSS
عن طريق ال border-collapse property يمكننا الغاء ازدواج الاطارات لان ال border property يصنع اطار مزدوج وبداخل ال Value نضع collapse
CSS collapse table borders
إلغاء إزدواج إطار الجدول في لغة CSS.
table,th,td
{
border: 1px dashed blue;
border-collapse: collapse;
}
</>
CSS Table Alignment
محاذاة النصوص داخل الجدول في لغة CSS
عن طريق خاصية text-align:center مع القيمة center يمكن توسيط النصوص بشكل أفقي في لغة CSS.
</>
CSS vertical alignment
توسيط النصوص داخل الجدول رأسياً في لغة CSS
استخدم ال text-align: center لتوسيط النصوص بشكل افقي واستخدم ال vertical-align:center لتوسيط النصوص بشكل رأسي.
CSS Table Vertical Alignmen middle
td
{
text-align:center;
height:50px;
vertical-align:middle;
}
CSS Table Vertical Alignmen top
td
{
text-align:center;
height:50px;
vertical-align:top;
}
</>
CSS table horizontal dividers
الفواصل الأفقية في الجداول في لغة CSS
تستخدم خاصية border-bottom مع خلايا الجدول لعمل horizontal dividers فواصل أفقية في لغة CSS.
CSS table horizontal dividers
فواصل أفقية في لغة CSS.
th,td
{
border-bottom:1px solid #ddd;
border-collapse: collapse;
padding:5px;
text-align:left;
}
</>
CSS hoverable table
شكل الجداول مع تحريك مؤشر mouse في لغة CSS
استخدم ال hover selector: مع ال tr لعمل hover مع الصفوف.
CSS hoverable table
تغيير لون خلفية الصف مع تحريك مؤشر mouse أعلي الصف في لغة CSS.
tr:hover
{
background-color:#f5f5f5;
}
</>
CSS striped tables
الجداول المُخططة في لغة CSS
عن طريق إستخدام nth-child() selector مع background-color في لغة CSS لتحديد خلفية للصفوف الزوجية والفردية odd و even.
CSS striped tables
جدول مخطط في لغة CSS.
tr:nth-child(even)
{
background-color: #f2f2f2;
}
جداول
حد
حجم
عرض
خاصية
جدول
قيمة
بيانات الجدول
انهيار
محاذاة
في المنتصف
عمودي
أفقي
تقسيمات
أسفل
محدد
يحوم
مخطط
خلفية
لون
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
