شرح كامل عن خاصية CSS Tables

السلام عليكم ورحمة الله وبركاتة

اليوم إخوانى الكرام سنتكلم عن خاصية الـ { css taples } وهى من خلال هذة الخاصية تستطيع عمل جدول فى هذة التدوينة سنقدم لك شرح هذة الخاصية وكيفية إستخدام وتنسيق الجدول والآن دعنا نشرح لك كيفية إستخدام هذة الخاصية .

* حدود الجدول

لتخطيط جدول فى css عليك بإستخدام خاصية الـ border و الـ table ، على سبيل المثال يحدد أيضاً عناصل الجدول <table> و  تحدد عدد عناصر الجدول .

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

المثال الأول

* لاحظ فى المثال أعلاة أن حدود الجدول مزدوجة وذلك لان كل من الجدول والـ / لهما حدود منفصلة ولإستخدام حدود غير مزدوجة إستخدم هذة الخاصيةborder-collapse وتابع المثال التالى للتعرف على هذة الخاصية.

* Collapse Borders

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

المثال الثانى

* عرض وطول الجدول

يمكنك تحديد طول وعرض الجدول من خلال القيم التالية
table
{
width: 100%;
}
th {
height: 50px;
} 

المثال الثالث

* محاذاة النص داخل الجدول

محاذاة النص داخل الجدول وهى تحديد وضع النص داخل الجدول إذا كان يميناً أو يساراً أو فى المنتصف شاهد معى المثال التالى

th {
text-align: center;
} 

المثال الرابع

محاذاة النص العمودى مثل السابقة ولكن هذة هى عمودية يمكنك التحكم من خلال هذة القيمة من وضع النص اعلا أو أسفل شاهد المثال التالى على النص العمودى
td {
height: 50px;
vertical-align: bottom;
} 

المثال الخامس

* الـ color و Table Padding

table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}

ومع إضافة هذة الخواص يمكنك التحكم فى الضبط بين حدود الجدول والمحتوى وأيضاً إستخدام الخلفيات والألوان المخصصة يمكنك إستخدامها بكل سهولة مثل ما هو موضح بالمثال التالى

المثال السادس

التسميات:

فيسبوك تويتر جوجل + لينكدن واتساب

احمد فيكتور

مدونة ابداع مهوس : مدونة تقنية تحتوى على مجموعة دروس ودورات فى مجالات تقنية مختلفة مثل دروس انظمة التشغيل والبرامج والالعاب وبلوجر وفوتوشوب وتطبيقات اندوريد والربح من الانترنت وغيره من الشروحات المميزة تاست مدونة ابداع مهوس عام 2013 وبفضل الله نالت اعجاب الكثير مؤسس المدونة ابداع مهوس مدون عراقي توصل بجديد المواضع