شرح كامل عن خاصية CSS Tables
السلام عليكم ورحمة الله وبركاتة
اليوم إخوانى الكرام سنتكلم عن خاصية الـ { css taples } وهى من خلال هذة الخاصية تستطيع عمل جدول فى هذة التدوينة سنقدم لك شرح هذة الخاصية وكيفية إستخدام وتنسيق الجدول والآن دعنا نشرح لك كيفية إستخدام هذة الخاصية .
* حدود الجدول
table, th, td {
border: 1px solid black;
}
لتخطيط جدول فى css عليك بإستخدام خاصية الـ border و الـ table ، على سبيل المثال يحدد أيضاً عناصل الجدول <table> <th> و <td> تحدد عدد عناصر الجدول .
table, th, td {
border: 1px solid black;
}
* لاحظ فى المثال أعلاة أن حدود الجدول مزدوجة وذلك لان كل من الجدول والـ <th>/<td> لهما حدود منفصلة ولإستخدام حدود غير مزدوجة إستخدم هذة الخاصية
border-collapse وتابع المثال التالى للتعرف على هذة الخاصية.* Collapse Borders
table
{
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
{
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
المثال الثانى
* عرض وطول الجدول
يمكنك تحديد طول وعرض الجدول من خلال القيم التالية
table
{
width: 100%;
}
th {
height: 50px;
}
table
{
width: 100%;
}
th {
height: 50px;
}
* محاذاة النص داخل الجدول
محاذاة النص داخل الجدول وهى تحديد وضع النص داخل الجدول إذا كان يميناً أو يساراً أو فى المنتصف شاهد معى المثال التالى
th {
text-align: center;
}
th {
text-align: center;
}
* محاذاة النص العمودى
محاذاة النص العمودى مثل السابقة ولكن هذة هى عمودية يمكنك التحكم من خلال هذة القيمة من وضع النص اعلا أو أسفل شاهد المثال التالى على النص العمودى
td {
height: 50px;
vertical-align: bottom;
}
td {
height: 50px;
vertical-align: bottom;
}
* الـ color و Table Padding
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
ومع إضافة هذة الخواص يمكنك التحكم فى الضبط بين حدود الجدول والمحتوى وأيضاً إستخدام الخلفيات والألوان المخصصة يمكنك إستخدامها بكل سهولة مثل ما هو موضح بالمثال التالى
المثال السادس
والآن انتهى شرح هذة الخاصية بحمد الله أتمنى أن أكود قدمت شرح جيد وأى إستفسار لا تتردد فى وضعة هنا
المثال السادس
والآن انتهى شرح هذة الخاصية بحمد الله أتمنى أن أكود قدمت شرح جيد وأى إستفسار لا تتردد فى وضعة هنا
