أساسيات الجداول
جزء من قسم الأساسيات في رحلة HTML على Coddy. الدرس 48 من 60.
في HTML، يُعد الجدول وسيلة لتنظيم البيانات في صفوف وأعمدة. تُستخدم الجداول عادةً لعرض البيانات بتنسيق منظّم، مثل الجداول الزمنية أو الإحصاءات أو أي نوع آخر من المعلومات التي يمكن تقديمها ضمن شبكة. لإنشاء جدول، تستخدم الوسم <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.
جرّب بنفسك
<!DOCTYPE html>
<html>
<body>
<!-- اكتب الكود هنا -->
</body>
</html>يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس الأساسيات
2النصوص والتنسيق
العناوينالفقراتفواصل الأسطرالنص العريض والمائلالنص العريض والمائل مجدداًمراجعة - التنسيق8النماذج والمدخلات - الجزء الأول
أساسيات النماذجمدخلات النصوصسمات المدخلاتحقل كلمة المرورتسميات المدخلاتملخص - نموذج أساسي11صفحة التسجيل في الفعالية
نظرة عامة على المشروعقسم الـ Headerتدرّب بنفسك: Playground لـ Web