أساسيات الجداول
جزء من قسم Fundamentals في رحلة HTML على Coddy — الدرس 48 من 60.
في لغة HTML، يُعد الـ table (الجدول) وسيلة لتنظيم البيانات في صفوف وأعمدة. تُستخدم الجداول بشكل شائع لعرض البيانات بتنسيق منظم، مثل الجداول الزمنية، أو الإحصائيات، أو أي نوع آخر من المعلومات التي يمكن تقديمها في شبكة. لإنشاء جدول، تستخدم الوسم <table> جنباً إلى جنب مع أوسمة أخرى مثل <tr> لصفوف الجدول، و <td> لبيانات الجدول (الخلايا)، و <th> لرؤوس الجدول.
إليك الهيكل الأساسي لجدول HTML:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table><table>: الوسم الذي يعرّف الجدول.
<tr>: الوسم الذي يعرّف صفاً في الجدول.
<th>: الوسم الذي يحدد خلية رأس الجدول. تُستخدم خلايا الرأس عادةً لعناوين الأعمدة أو الصفوف ويتم عرضها بخط عريض بشكل افتراضي.
<td>: الوسم الذي يحدد خلية قياسية في الجدول.
إليك كيف سيتم عرض هذا الجدول في المتصفح:
| العنوان 1 | العنوان 2 |
|---|---|
| الصف 1، الخلية 1 | الصف 1، الخلية 2 |
| الصف 2، الخلية 1 | الصف 2، الخلية 2 |
في هذا المثال، لدينا جدول يتكون من صفين وعمودين. يحتوي الصف الأول على خلايا رأس الجدول، وتحتوي الصفوف اللاحقة على خلايا بيانات عادية. ينشئ هذا الهيكل تخطيط شبكة بسيطاً يسهل قراءته وفهمه.
التحدي
سهلأنشئ مستند HTML يتضمن جدولاً بالهيكل التالي:
- وسم
<table>لتعريف الجدول. - صف جدول (
<tr>) للرأس مع خليتي رأس (<th>). يجب أن تحتوي خلية الرأس الأولى على "Name"، والثانية على "Age". - صف جدول (
<tr>) مع خليتي بيانات (<td>). يجب أن تحتوي الخلية الأولى على "John"، والثانية على "30". - صف جدول آخر (
<tr>) مع خليتي بيانات (<td>). يجب أن تحتوي الخلية الأولى على "Jane"، والثانية على "25".
ورقة مرجعية
تنظم جداول HTML البيانات في صفوف وأعمدة باستخدام الوسم <table>:
<table>: يحدد الجدول<tr>: يحدد صفاً في الجدول<th>: يحدد خلية رأس الجدول (تُعرض بخط عريض افتراضياً)<td>: يحدد خلية بيانات قياسية
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>جرّب بنفسك
<!DOCTYPE html>
<html>
<body>
<!-- اكتب الكود هنا -->
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Fundamentals
2النصوص والتنسيق
العناوينالفقراتفواصل الأسطرالنص العريض والمائلالنص العريض والمائل مجدداًمراجعة - التنسيق8النماذج والمدخلات - الجزء الأول
أساسيات النماذجمدخلات النصوصسمات المدخلاتحقل كلمة المرورتسميات المدخلاتملخص - نموذج أساسي11صفحة التسجيل في الفعالية
نظرة عامة على المشروعقسم الـ Header
قسم تفاصيل الفعاليةنموذج التسجيلقسم الـ Footer