دمج الصفوف والأعمدة
جزء من قسم Fundamentals في رحلة HTML على Coddy. الدرس 50 من 60.
في HTML، يمكنك جعل خلايا الجدول تمتد عبر عدة صفوف أو أعمدة باستخدام السمتين rowspan وcolspan. تتيح لك هذه السمات إنشاء تخطيطات جداول أكثر تعقيدًا من خلال دمج الخلايا معًا.
تُستخدم السمة colspan لتحديد عدد الأعمدة التي يجب أن تمتد عبرها الخلية. وتُضاف إلى وسم <td> أو <th> الخاص بالخلية التي تريد توسيعها.
إليك مثالًا على كيفية استخدام colspan:
<table border="1">
<tr>
<th colspan="2">Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>في هذا المثال، تمتد خلية العنوان التي تحتوي على النص "الاسم" على عمودين. يُعد هذا مفيدًا لإنشاء عنوان يغطي عدة أعمدة. هكذا يبدو:
تُستخدم السمة rowspan لتحديد عدد الصفوف التي ينبغي أن تمتد عبرها الخلية. وتُضاف أيضًا إلى وسم <td> أو <th> الخاص بالخلية التي تريد توسيعها.
إليك مثالًا على كيفية استخدام rowspan:
<table border="1">
<tr>
<th>Employee</th>
<th>Shift</th>
</tr>
<tr>
<td rowspan="2">Alex</td>
<td>Morning</td>
</tr>
<tr>
<td>Evening</td>
</tr>
</table>هنا، تُستخدم rowspan لإظهار أن Alex يعمل في مناوبتي الصباح والمساء دون تكرار الاسم.
يمكنك استخدام كلٍّ من colspan وrowspan في الجدول نفسه لإنشاء تخطيطات معقّدة. تذكّر فقط ضبط عدد الخلايا في كل صف وفقًا لذلك لاستيعاب الخلايا الممتدّة.
التحدي
سهلأنشئ مستند HTML يتضمن table بخلايا تمتد عبر عدة صفوف وأعمدة. يجب أن يكون لـ table البنية التالية:
- صف
table(<tr>) يحتوي على خلية رأس (<th>) تمتد عبر ثلاثة أعمدة وتتضمن النص"Student Report". - صف آخر في
table(<tr>) يحتوي على خلية رأس (<th>) تقول"Name"، وخلية رأس (<th>) تقول"Subject"، وخلية رأس (<th>) تقول"Grade". - صف آخر في
table(<tr>) يحتوي على خلية بيانات (<td>) تقول"John Doe"، وخلية بيانات (<td>) تقول"Math"، وخلية بيانات (<td>) تقول"A". - صف آخر في
table(<tr>) يحتوي على خلية بيانات (<td>) تمتد عبر صفين وتتضمن النص"Jane Smith"، وخلية بيانات (<td>) تقول"Science"، وخلية بيانات (<td>) تقول"B". - صف
tableأخير (<tr>) يحتوي على خلية بيانات (<td>) تقول"History"وخلية بيانات (<td>) تقول"A".
جرّب بنفسك
<!DOCTYPE html>
<html>
<body>
<table border="1">
<!-- اكتب الكود هنا -->
</table>
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Fundamentals
2النصوص والتنسيق
العناوينالفقراتفواصل الأسطرالنص العريض والمائلالنص العريض والمائل مجدداًمراجعة - التنسيق8النماذج والمدخلات - الجزء الأول
أساسيات النماذجمدخلات النصوصسمات المدخلاتحقل كلمة المرورتسميات المدخلاتملخص - نموذج أساسي11صفحة التسجيل في الفعالية
نظرة عامة على المشروعقسم الـ Header
قسم تفاصيل الفعاليةنموذج التسجيلقسم الـ Footerتدرّب بنفسك: Playground لـ Web