CSS

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

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

التاريخ

12 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2567

المواضيع

24
الشروحات chevron_left CSS Tables chevron_left CSS
CSS Flex Box keyboard_arrow_down

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.

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS table border dashed

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

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

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

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS collapse table borders

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

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

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

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS table alignment

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

td
{
text-align:center;
}

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

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS Table Vertical Alignmen middle
td
{
text-align:center;
height:50px;
vertical-align:middle;
}

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS Table Vertical Alignmen top
td
{
text-align:center;
height:50px;
vertical-align:top;
}

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

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

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 مع الصفوف.

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS hoverable table

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

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

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

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

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

CSS striped tables

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

tr:nth-child(even)
{
background-color: #f2f2f2;
}
مصطلحات الدرس
Tables
Tables

جداول

Size
Size

حجم

Width
Width

عرض

Property
Property

خاصية

Table
Table

جدول

Value
Value

قيمة

Table Data
Table Data

بيانات الجدول

Collapse
Collapse

انهيار

Alignment
Alignment

محاذاة

Center
Center

في المنتصف

Vertical
Vertical

عمودي

Dividers
Dividers

تقسيمات

Bottom
Bottom

أسفل

Selector
Selector

محدد

Hover
Hover

يحوم

Striped
Striped

مخطط

Background
Background

خلفية

Color
Color

لون

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.