إضافة التسميات التوضيحية
جزء من قسم Fundamentals في رحلة HTML على Coddy — الدرس 49 من 60.
في جداول HTML، يُعد الـ caption عنواناً أو شرحاً للجدول. فهو يوفر وصفاً موجزاً لمحتوى الجدول، مما يسهل على المستخدمين فهم الغرض من الجدول. يتم إنشاء التسميات التوضيحية باستخدام الوسم <caption>، والذي يجب وضعه مباشرة بعد الوسم <table>.
إليك الصيغة الأساسية لإضافة تسمية توضيحية (caption) لجدول في HTML:
<table>
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
التحدي
سهلقم بإنشاء مستند HTML يتضمن جدولاً مع تسمية توضيحية (caption). يجب أن يحتوي الجدول على الهيكل التالي:
- وسم
<table>لتعريف الجدول. - وسم
<caption>مع النص "Product Inventory" لوصف الجدول. - صف جدول (
<tr>) للرأس مع خليتي رأس (<th>). يجب أن تحتوي خلايا الرأس على "Product Name" و "Quantity". - صف جدول (
<tr>) مع خليتي بيانات (<td>). يجب أن تحتوي الخلايا على "Laptop" و "5". - صف جدول آخر (
<tr>) مع خليتي بيانات (<td>). يجب أن تحتوي الخلايا على "Mouse" و "10".
ورقة مرجعية
يوفر الوسم <caption> عنواناً أو شرحاً لجدول HTML. يجب وضعه مباشرة بعد الوسم <table>.
<table>
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>جرّب بنفسك
<!DOCTYPE html>
<html>
<body>
<!-- اكتب الكود هنا -->
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Fundamentals
2النصوص والتنسيق
العناوينالفقراتفواصل الأسطرالنص العريض والمائلالنص العريض والمائل مجدداًمراجعة - التنسيق8النماذج والمدخلات - الجزء الأول
أساسيات النماذجمدخلات النصوصسمات المدخلاتحقل كلمة المرورتسميات المدخلاتملخص - نموذج أساسي11صفحة التسجيل في الفعالية
نظرة عامة على المشروعقسم الـ Header
قسم تفاصيل الفعاليةنموذج التسجيلقسم الـ Footer