HTML – الجداول Tables

نستيطع عرض البيانات في شكل جدول اي مجموعة من الصفوف والاعمدة كما بالشكل الاتي:

الجدول table

لتعريف الجدول نستخدم ​العنصر <table> ،عادة يتكون الجدول من عدة صفوف rows ويتكون كل صف من عدد من الخلايا cells لتخزين البيانات، لتعريف الصفوف نستخدم العنصر <tr> و لتعريف الخلايا نستخدم العنصر <td>

<table>
	<tr>
		<td> محمد حسن </td>
		<td> 25 </td>
		<td> مهندس </td>
	</tr>
	
	<tr>
		<td> اسماء الزيات </td>
		<td> 29 </td>
		<td> طبيبة </td>
	</tr>
	
	<tr>
		<td> خالد حسين </td>
		<td> 17 </td>
		<td> طالب </td>
	</tr>
</table>

عند التجربة قد يظهر الجدول وكأن ترتيبه من اليسار الى اليمين لان هذا هو الوضع الافتراضي، سيتم الشرح مستقبلا كيفية جعل الصفحة تعرض البيانات من اليمين الى اليسار.

الخلايا العناوين Heading Cells

عنصر الخلية <td> يظهر البيانات في صورة عادية، اما العنصر <th> يقوم باظهار البيانات في صورة عناوين.

<table>
	<tr>
		<th> الاسم </th>
		<th> العمر </th>
		<th> المهنة </th>
	</tr>

	<tr>
		<td> محمد حسن </td>
		<td> 25 </td>
		<td> مهندس </td>
	</tr>
	
	<tr>
		<td> اسماء الزيات </td>
		<td> 29 </td>
		<td> طبيبة </td>
	</tr>
	
	<tr>
		<td> خالد حسين </td>
		<td> 17 </td>
		<td> طالب </td>
	</tr>
</table>

الحدود Borders

نستطيع وضع حدود بين الخلايا باستخدام احد سمات attributes الجدول وهي border مثلا <table border="1"> حيث يمثل الرقم “1” هو سمك الحدود.
نستطيع ايضا تغير لون الحدود باستخدام احد صفات الجدول وهي bordercolor مثلا <table border="2" bordercolor="blue">

<table border="1" bordercolor="blue">
	<tr>
		<th> الاسم </th>
		<th> العمر </th>
		<th> المهنة </th>
	</tr>

	<tr>
		<td> محمد حسن </td>
		<td> 25 </td>
		<td> مهندس </td>
	</tr>
</table>

عرض كامل full width

لكي نظهر الجدول بعرض كامل نستطيع استخدام احد صفات الجدول وهي ال style وتكون كالاتي <table style="width:100%">

<table border="1" bordercolor="blue" style="width:100%">
	<tr>
		<th> الاسم </th>
		<th> العمر </th>
		<th> المهنة </th>
	</tr>

	<tr>
		<td> محمد حسن </td>
		<td> 25 </td>
		<td> مهندس </td>
	</tr>
</table>

تطور شكل الجدول تدريجيا، لكننا قد لم نصل الى الشكل الجمالي الذي نريده! لاضافة المظهر الجمالي على عناصر ال HTML نستخدم CSS وهو ما سيتم شرحه مستقبلا!!