HTML الجداول

مفهوم الجدول

الجدول ( Table ) يسمح لك بعرض المعلومات بشكل مرتب و مقسم لأعمدة و أسطر.
في هذا الدرس ستتعلم كيف تنشئ جدول, كيف تضيف فيه أسطر, كيف تضيف فيه أعمدة و كيف تدمج الأعمدة و الأسطر مع بعضها.

إضافة جدول في الصفحة

لعرض جدول في الصفحة نستخدم الوسوم التالية لبنائه بالشكل الذي نريده:

• <table> </table> هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل جدول.
• <tr> </tr> تستخدمه لإضافة سطر في الجدول.
• <th> </th> تستخدمه لإضافة خانة في السطر تمثل عنوان, أي النص الذي تضعه فيها يظهر بخط عريض و في المنتصف.
• <td> </td> تستخدمه لإضافة خانة في السطر تمثل معلومة عادية, أي النص الذي تضعه فيها يظهر كنصر عادي.

معلومة تقنية

بشكل عام, الوسوم التي ذكرناها هي التي تحتاجها لبناء الجدول و لكن عليك معرفة أن استخدامها لوحدها لا يجعل الجدول يظهر بشكل جيد في المتصفح و سبب ذلك أن المتصفح لا يظهر أي خطوط بين أسطر و أعمدة الجدول من تلقاء نفسه و إنما أنت من يمكنه فعل ذلك سواء بإضافة بعض خصائص HTML للجدول أو بواسطة كود CSS الذي يمكن استخدامه مع الجدول.

بالتأكيد CSS توفر لك إمكانيات هائلة لتصميم الجدول و لكن بما أننا ندرس و نركز على ما توفره لنا لغة HTML فقط, سنتطرق للخصائص التي توفرها لنا هي فقط.

في المثال التالي قمنا بإضافة جدول يتألف من 4 أسطر و كل سطر فيه 3 خانات.

<table>
	<!-- هنا قمنا بتعريف السطر الأول في الجدول و بداخله وضعنا 3 خانات عبارة عن عناوين -->
	<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Mark</th>
	</tr>
	<!-- هنا قمنا بتعريف السطر الثاني في الجدول و بداخله وضعنا 3 خانات عادية -->
	<tr>
		<td>1</td>
		<td>Mhamad Harmush</td>
		<td>A</td>
	</tr>
	<!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية -->
	<tr>
		<td>2</td>
		<td>Rima Houssayni</td>
		<td>C</td>
	</tr>
	<!-- هنا قمنا بتعريف السطر الرابع في الجدول و بداخله وضعنا 3 خانات  عادية -->
	<tr>
		<td>3</td>
		<td>Youssef Jabber</td>
		<td>B</td>
	</tr>
</table>
		

جرب الكود

خصائص الجدول

هناك ثلاث خصائص يمكنك إضافتها للعمود لجعله يظهر بشكل أفضل و هي التالية:

• border يمكنك استخدامها لإظهار خطوط الجدول, الرقم الذي نعطيه لها يمثل حجم الخطوط التي سيتم وضعها بين الأسطر و الأعمدة.
• width يمكنك استخدامها لتحديد عرض الجدول بنفسك بدل جعل المتصفح يفعل ذلك, الرقم الذي نعطيه لها يمثل عرض الجدول.
• height يمكنك استخدامها لتحديد طول الجدول بنفسك بدل جعل المتصفح يفعل ذلك, الرقم الذي نعطيه لها يمثل طول الجدول.

سنضيف الخاصية border="1" في جميع الأمثلة التي نضعها حتى تظهر خطوط الجدول.

ملاحظة

في المثال التالي قمنا بإظهار خطوط الجدول حجمها 1 بيكسل.

<table border="1">
	...
</table>
		

جرب الكود

في المثال التالي قمنا بجعل عرض الجدول 100% و طوله 150 بيكسل.

<table border="1" width="100%" height="150">
	...
</table>
		

جرب الكود

دمج خانات الجدول

في حال أردت دمج خانات الجدول فهناك خاصيّتين يمكنك استخدامهما لأجل ذلك:

• colspan نستخدمها لدمج الخانات الموجودة على نفس السطر.
• rowspan نستخدمها لدمج الخانات الموجودة على أكثر من سطر.

ملاحظة: colspan و rowspan يمكن استخدامهما مع الوسم <th> و الوسم <td> فقط.

في المثال التالي قمنا بدمج الخانة الأولى و الثانية الموجودتين في السطر الأول.

<table>
	<tr>
		<!-- سيتم عرضها على خانتين وراء بعض 'A' هنا قلنا أن الخانة التي يوجد فيها الحرف -->
		<td colspan="2">A</td>
		<td>B</td>
	</tr>
	<tr>
		<td>C</td>
		<td>D</td>
		<td>E</td>
	</tr>
</table>
		

جرب الكود

في المثال التالي قمنا بدمج الخانة الثانية في السطر الأول مع الخانة الثانية الموجودة تحتها في السطر الثاني.

<table>
	<tr>
		<!-- سيتم عرضها على خانتين تحت بعض 'B' هنا قلنا أن الخانة التي يوجد فيها الحرف -->
		<td>A</td>
		<td rowspan="2">B</td>
		<td>C</td>
	</tr>
	<tr>
		<td>D</td>
		<td>E</td>
	</tr>
</table>
		

جرب الكود

في المثال التالي قمنا بدمج الخانة الثانية و الثالثة في السطر الثاني مع الخانة الثانية و الثالثة الموجودة تحتها في السطر الثالث.

<table>
	<tr>
		<td>A</td>
		<td>B</td>
		<td>C</td>
	</tr>
	<tr>
		<!-- سيتم عرضها على خانتين في نفس السطر و خانتين تحتهما مباشرةً 'E' هنا قلنا أن الخانة التي يوجد فيها الحرف -->
		<td>D</td>
		<td colspan="2" rowspan="2">E</td>
	</tr>
	<tr>
		<td>F</td>
	</tr>
</table>
		

جرب الكود

وضع عنوان خاص للجدول

إذا أردت وضع عنوان خاص للجدول, يمكنك كتابة العنوان بداخل الوسم <caption> </caption> مع الإشارة إلى أنه يجب وضع هذا الوسم كأول وسم في الجدول.

في المثال التالي قمنا بوضع عنوان للجدول بواسطة الوسم <caption>.

<table>
	<caption>Final semester marks</caption>
	...
</table>
		

جرب الكود