التحكم في شكل الجداول في لغة CSS

في هذا الدرس 8تصفّح المواضيع

CSS Tables التحكم في شكل الجداول في لغة CSS

في لغة CSS يمكن عمل جداول أكثر ابداعية ويمكنك التحكم في الجداول بشكل كامل مثل النصوص او الخلفيات او المسافات.

يمكنك عمل كل خلية أو كل صف بلون مختلف او تضع في خلايا الجداول زر بواسطة لغة HTML مع لغة CSS ويمكنك التحكم ايضا في الاطارات لكل صف وكل خلية.

جرب الكود

CSS table border and width التحكم في إطار وعرض الجدول في لغة CSS

عن طريق خاصية width يمكن التتحكم في عرض الجدول داخل صفحة الويب ويمكن أن يكون الجدول بعرض الشاشة بالكامل تكون قيمة الخاصية بالنسبة المئوية width:100% في لغة CSS.

وعن طريق خاصية border يمكن التتحكم إطارات الجدول ,والصفوف والأعمده الداخلية ويمكن أيضاً التحكم في لون وحجم ونوع الأطار في لغة CSS.

Result

جرّب بنفسك

CSS table border and width

HTML

table,th,td 
{
  border: 1px solid black;
}

جرّب بنفسك

Result

جرّب بنفسك

CSS table border dashed

إضافة إطار للجدول مع ضبط الجدول بعرض الشاشة في لغة CSS

HTML

table,th,td 
{
  border: 1px dashed blue;
}

جرّب بنفسك

CSS collapse table borders الغاء ازدواج إطار الجدول في لغة CSS

عن طريق ال border-collapse property يمكننا الغاء ازدواج الاطارات لان ال border property يصنع اطار مزدوج وبداخل ال Value نضع collapse

Result

جرّب بنفسك

CSS collapse table borders

إلغاء إزدواج إطار الجدول في لغة CSS.

HTML

table,th,td 
{
  border: 1px dashed blue;
  border-collapse: collapse;
}

جرّب بنفسك

CSS Table Alignment محاذاة النصوص داخل الجدول في لغة CSS

عن طريق خاصية text-align:center مع القيمة center يمكن توسيط النصوص بشكل أفقي في لغة CSS.

Result

جرّب بنفسك

CSS table alignment

محاذاة النصوص في لغة CSS.

HTML

td
{
text-align:center;
}

جرّب بنفسك

CSS vertical alignment توسيط النصوص داخل الجدول رأسياً في لغة CSS

استخدم ال text-align: center لتوسيط النصوص بشكل افقي واستخدم ال vertical-align:center لتوسيط النصوص بشكل رأسي.

Result

جرّب بنفسك

CSS Table Vertical Alignmen middle

HTML

td
{
text-align:center;
height:50px;
vertical-align:middle;
}

جرّب بنفسك

Result

جرّب بنفسك

CSS Table Vertical Alignmen top

HTML

td
{
text-align:center;
height:50px;
vertical-align:top;
}

جرّب بنفسك

CSS table horizontal dividers الفواصل الأفقية في الجداول في لغة CSS

تستخدم خاصية border-bottom مع خلايا الجدول لعمل horizontal dividers فواصل أفقية في لغة CSS.

Result

جرّب بنفسك

CSS table horizontal dividers

فواصل أفقية في لغة CSS.

HTML

th,td
{
  border-bottom:1px solid #ddd;
  border-collapse: collapse;
  padding:5px;
  text-align:left;
}

جرّب بنفسك

CSS hoverable table شكل الجداول مع تحريك مؤشر mouse في لغة CSS

استخدم ال hover selector: مع ال tr لعمل hover مع الصفوف.

Result

جرّب بنفسك

CSS hoverable table

تغيير لون خلفية الصف مع تحريك مؤشر mouse أعلي الصف في لغة CSS.

HTML

tr:hover
{
background-color:#f5f5f5;
}

جرّب بنفسك

CSS striped tables الجداول المُخططة في لغة CSS

عن طريق إستخدام nth-child() selector مع background-color في لغة CSS لتحديد خلفية للصفوف الزوجية والفردية odd و even.

Result

جرّب بنفسك

CSS striped tables

جدول مخطط في لغة CSS.

HTML

tr:nth-child(even)
{
background-color: #f2f2f2;
}

جرّب بنفسك

ابنِ لغتك البرمجية

المصطلحات20

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 20 مفهومةأول بطاقة، أول خطوة

01 Tables جداول: للمراجعة
02 Border حد: للمراجعة
03 Size حجم: للمراجعة
04 Width عرض: للمراجعة
05 Property خاصية: للمراجعة
06 Table جدول: للمراجعة
07 Value قيمة: للمراجعة
08 Table Data بيانات الجدول: للمراجعة
09 Collapse انهيار: للمراجعة
10 Alignment محاذاة: للمراجعة
11 Center في المنتصف: للمراجعة
12 Vertical عمودي: للمراجعة
13 Horizontal أفقي: للمراجعة
14 Dividers تقسيمات: للمراجعة
15 Bottom أسفل: للمراجعة
16 Selector محدد: للمراجعة
17 Hover يحوم: للمراجعة
18 Striped مخطط: للمراجعة
19 Background خلفية: للمراجعة
20 Color لون: للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات2

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 2 مفهومةأول بطاقة، أول خطوة

01 CSS CSS: Cascading Style Sheets; صفحات الأنماط الانسيابية; للمراجعة
02 HTML HTML: Hypertext Markup Language; لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>; للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

4أسئلة 2أنواع تحديات 100%هدف الإتقان

تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي4 أسئلة تنتظرك

التحكم في شكل الجداول في لغة CSSCSS Tables

CSS Tables التحكم في شكل الجداول في لغة CSS

CSS table border and width التحكم في إطار وعرض الجدول في لغة CSS

CSS table border and width

CSS table border dashed

CSS collapse table borders الغاء ازدواج إطار الجدول في لغة CSS

CSS collapse table borders

CSS Table Alignment محاذاة النصوص داخل الجدول في لغة CSS

CSS table alignment

CSS vertical alignment توسيط النصوص داخل الجدول رأسياً في لغة CSS

CSS Table Vertical Alignmen middle

CSS Table Vertical Alignmen top

CSS table horizontal dividers الفواصل الأفقية في الجداول في لغة CSS

CSS table horizontal dividers

CSS hoverable table شكل الجداول مع تحريك مؤشر mouse في لغة CSS

CSS hoverable table

CSS striped tables الجداول المُخططة في لغة CSS

CSS striped tables

سجّل الدخول لحفظ تقدمك

المصطلحات20

الاختصارات2

اختبر فهمك.
ووصلها للإتقان.

هل يمكنك عمل كل خلية او كل صف بلون مختلف او تضع في خلايا الجداول زر بواسطة ال HTML مع ال CSS ؟

ماهي الخاصية التي تستخدم في تحديد عرض الجدول ؟

ماهي الخاصية التي تستخدم مع الجدول لتوسيط العناصر في الاتجاه الرأسي ؟

نستخدم ال ............. selector مع background-color لتحديد خلفية للصفوف الزوجية والفردية odd و even.

التحكم في شكل الجداول في لغة CSSCSS Tables

CSS Tables التحكم في شكل الجداول في لغة CSS

CSS table border and width التحكم في إطار وعرض الجدول في لغة CSS

CSS table border and width

CSS table border dashed

CSS collapse table borders الغاء ازدواج إطار الجدول في لغة CSS

CSS collapse table borders

CSS Table Alignment محاذاة النصوص داخل الجدول في لغة CSS

CSS table alignment

CSS vertical alignment توسيط النصوص داخل الجدول رأسياً في لغة CSS

CSS Table Vertical Alignmen middle

CSS Table Vertical Alignmen top

CSS table horizontal dividers الفواصل الأفقية في الجداول في لغة CSS

CSS table horizontal dividers

CSS hoverable table شكل الجداول مع تحريك مؤشر mouse في لغة CSS

CSS hoverable table

CSS striped tables الجداول المُخططة في لغة CSS

CSS striped tables

مشاركة

هل كان هذا الدرس مفيدًا؟

سجّل الدخول لحفظ تقدمك

المصطلحات20

الاختصارات2

اختبر فهمك.ووصلها للإتقان.

هل يمكنك عمل كل خلية او كل صف بلون مختلف او تضع في خلايا الجداول زر بواسطة ال HTML مع ال CSS ؟

ماهي الخاصية التي تستخدم في تحديد عرض الجدول ؟

ماهي الخاصية التي تستخدم مع الجدول لتوسيط العناصر في الاتجاه الرأسي ؟

نستخدم ال ............. selector مع background-color لتحديد خلفية للصفوف الزوجية والفردية odd و even.

اختبر فهمك.
ووصلها للإتقان.