دليل لتنسيق القوائم والجداول في CSS- الخصائص والأمثلة

يعد تنسيق القوائم والجداول جزءًا أساسيًا من عرض المعلومات على موقع الويب الخاص بك. يوفر CSS خصائص وفئات لإنشاء وتخصيص القوائم والجداول حسب رغبتك. فيما يلي دليل مفصل حول كيفية تنسيق القوائم والجداول في CSS.

 

قوائم التنسيق

قائمة غير مرتبة(ul)

الخاصية الرئيسية: نوع القائمة.

القيم none, disc, circle, square:.

مثال:

ul {  
  list-style-type: disc;  
}  

قائمة مرتبة(رأ)

الخاصية الرئيسية: نوع القائمة.

القيم: لا شيء(افتراضي) ، عشري ، سفلي ، ألفا علوي ، روماني منخفض ، روماني علوي.

مثال:

ol {  
  list-style-type: decimal;  
}  

قائمة التعريفات(دل)

الخاصية الرئيسية: لا توجد خاصية CSS محددة لتنسيق قوائم التعريف. ومع ذلك ، يمكنك نمط العناصر داخل القائمة باستخدام الفئات أو الخصائص الأخرى مثل font-size, font-weight, margin, padding, etc.

مثال:

<dl>  
  <dt>HTML</dt>  
  <dd>A markup language for creating web pages</dd>  
  <dt>CSS</dt>  
  <dd>A styling language for web pages</dd>  
</dl>  

dt {  
  font-weight: bold;  
}  

 

جداول التنسيق

تنسيق هيكل الجدول

الملكية الرئيسية border-collapse:.

القيم: separate(default), collaps هـ.

مثال:

table {  
  border-collapse: collapse;  
}  

تنسيق حدود الجدول

الملكية الرئيسية border:.

القيم: قيمة حد ، على سبيل المثال 1px solid black:.

مثال:

table {  
  border: 1px solid black;  
}  

تنسيق حدود الخلية

الملكية الرئيسية border:.

القيم: قيمة حد ، على سبيل المثال 1px solid black:.

مثال:

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

المحاذاة والتباعد بين خلايا الجدول

الخصائص الرئيسية text-align, padding:.

• محاذاة النص: قيم المحاذاة ، على سبيل المثال left, right, center:.
• المساحة المتروكة: قيمة التباعد داخل الخلايا ، على سبيل المثال: 10 بكسل.

مثال:

th {  
  text-align: center;  
  padding: 10px;  
}  

لون الخلفية والنص في الجداول

الخصائص الرئيسية: background-color, color

• background-color: قيمة لون الخلفية ، على سبيل المثال lightgray:.
• color: قيمة لون النص ، على سبيل المثال white:.

مثال:

table {  
  background-color: lightgray;  
  color: white;  
}  

العمود وحجم الصف في الجداول

الخصائص الرئيسية: width ، height.

• width: قيمة العرض ، على سبيل المثال: "100 بكسل" ، "20٪".
• height: قيمة الارتفاع ، على سبيل المثال: "50 بكسل" ، "10٪".

مثال:

th {  
  width: 100px;  
  height: 50px;  
}  

 

هذا دليل شامل حول كيفية تنسيق القوائم والجداول في CSS. يمكنك تخصيص القيم والخصائص لإنشاء أنماط قوائم وجدول تناسب احتياجات التصميم الخاصة بك على موقع الويب الخاص بك.