سنتابع موضوعنا الجزأ الثاني سنذكر هنا ايضا بعض الخصائص التي نستخدمها مع الوسوم الشائغة للغة Html ونبدأ بخصائص وسم الجدول:
يمكن استخدام العديد من الخصائص لتحسين مظهر الجدول وجعله رائع وجميل، وبعض هذه الخصائص هي:
1- خاصية الحدود (border): يمكن استخدام هذه الخاصية لإضافة حدود للجدول وتحديد سماكتها.
2- خاصية التباعد (padding): يمكن استخدام هذه الخاصية لتحديد التباعد بين حواف الجدول ومحتواه.
3- خاصية الهوامش الداخلية (inner margin) والخارجية (outer margin) (margin-top، margin-bottom، margin-right، margin-left) والتي تمكنك من تحديد هامش محدد لأي جانب من جوانب الجدول.
4- خاصية الخطوط المتقطعة (dashed) أو المتصلة (solid) لتحديد نوع الخط.
5- خاصية الألوان (color) لتحديد لون حدود الجدول.
6- خاصية الخط العرضي (border-collapse) لتحديد ما إذا كانت حدود الخلايا تندمج أم لا.
7- خاصية العرض (width) لتحديد عرض الجدول وعرض الخلايا.
مثال:يمكن جمع كل الخصائص في الوسم head كما يلي
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
border: 2px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
color: #333;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
</style>
</head>
فيما يلي مثال على استخدام وسم <video> و <audio> مع بعض الخصائص المذكورة:
1- وسم <video>:
<video width="640" height="360" controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
Your browser does not support the video tag.
</video>
في هذا المثال، يتم تحديد عرض وارتفاع مشغل الفيديو، واستخدام خاصية التحكم لعرض أزرار التحكم الافتراضية، وتحديد مصدر الفيديو بصيغتي mp4 و webm، وإذا لم يتم دعم مشغل الفيديو من قبل المتصفح، فسيتم عرض رسالة "لا يدعم متصفحك عنصر الفيديو".
2- وسم <audio>:
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
في هذا المثال، يتم استخدام خاصية التحكم لعرض عناصر التحكم الافتراضية، وتحديد مصدر الملف الصوتي بصيغتي mp3 و ogg، وإذا لم يتم دعم مشغل الصوت من قبل المتصفح، فسيتم عرض رسالة "لا يدعم متصفحك عنصر الصوت".
