المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

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

ماذا يعني ذلك؟ ببساطة إذا أردت أن تعرض بيانات مجدولة فعليك أن تستخدم جدولاً، فمثلاً تصور أنك تريد المقارنة بين مواصفات سيارتين، يمكنك أن تفعل ذلك في جدول، فكل سيارة لها عمود خاص وكل صف يتعلق بإحدى المواصفات، فالصف الأول مثلاً يذكر نوع المحرك وقوته، الصف الثاني يقارن سرعة السيارة وهكذا.

الجداول يمكن استخدامها لعرض الكثير من المعلومات، وهي تختصر الوقت على القارئ، تصور مثلاً أنك أردت عرض أرباح وخسائر 100 شركة في سوق الأسهم، يمكنك أن تفعل ذلك بدون جداول لكن الجدول سيبسط عرض المعلومات ويجعلها سهلة الفهم.

في هذا الدرس سنتعلم بعض عناصر HTML المتعلقة بالجداول، وقد قمت بعمل جدول كمثال عملي ويحوي الجدول ترتيب فرق كرة القدم في الدوري الإماراتي، لست مهتماً بكرة القدم وهذا مجرد مثال:

ترتيب الفرق في دوري الإمارات لكرة القدم

وهكذا كتبت المثال في HTML:

<p align="center">ترتيب الفرق في دوري الإمارات لكرة القدم</p>
<table>
	<tr>
		<td>النادي</td>
		<td>المباريات</td>
		<td>النقاط</td>
	</tr>
	<tr>
		<td>الشباب</td>
		<td>5</td>
		<td>15</td>

	</tr>
	<tr>
		<td>العين</td>
		<td>4</td>
		<td>9</td>
	</tr>
	<tr>
		<td>الشارقة</td>
		<td>4</td>
		<td>8</td>
	</tr>
</table>

لاحظ أنني استخدمت العنصر p لوضع فقرة تصف الجدول، واستخدمت الخاصية align لوضعه في منتصف الصفحة، هذا أسلوب غير دقيق ومن المفترض ألا يستخدمه أي محترف في تطوير المواقع، ثم وضعت الجدول وقد استخدمت العناصر table وtr وtd، وهذه العناصر معروفة لكل من درس أساسيات HTML، بمعنى آخر لا جديد تحت الشمس.

لنقم بتحسين الجدول قليلاً، فبدلاً من استخدام العنصر p سنقوم باستخدام العنصر caption لوضع وصف للجدول:

<table>
<caption>ترتيب الفرق في دوري الإمارات لكرة القدم</caption>
	<tr>
		<td>النادي</td>
		<td>المباريات</td>
		<td>النقاط</td>
	</tr>
	<tr>
		<td>الشباب</td>
		<td>5</td>
		<td>15</td>

	</tr>
	<tr>
		<td>العين</td>
		<td>4</td>
		<td>9</td>
	</tr>
	<tr>
		<td>الشارقة</td>
		<td>4</td>
		<td>8</td>
	</tr>
</table>

عندما تضع وصفاً للجدول يجب أن يكون مختصراً ويصف محتويات الجدول، وإذا استخدمت العنصر caption سيقوم المتصفح بوضع الوصف فوق الجدول مباشرة، وبالطبع يمكنك تغيير شكل وموقعه من خلال CSS.

الآن الجدول متفق مع المعايير القياسية بشكل أفضل، لكن يمكن أن نحسنه أكثر من ذلك، هناك عنصر في HTML يسمى th أو table heading وهو كما يمكنك أن تخمن متعلق برأس الجدول، فالصف الأول لا يحوي أي بيانات بل يبين نوع البيانات (النادي، المباريات، النقاط) ولذلك من المنطقي أن نستخدم له عنصر th بدلاً من td والذي يعني table data أو بيانات الجدول.

<table>
<caption>ترتيب الفرق في دوري الإمارات لكرة القدم</caption>
	<tr>
		<th>النادي</th>
		<th>المباريات</th>
		<th>النقاط</th>
	</tr>
	<tr>
		<td>الشباب</td>
		<td>5</td>
		<td>15</td>

	</tr>
	<tr>
		<td>العين</td>
		<td>4</td>
		<td>9</td>
	</tr>
	<tr>
		<td>الشارقة</td>
		<td>4</td>
		<td>8</td>
	</tr>
</table>

نعم، الآن الجدول منطقي أكثر، وحتى بدون CSS يمكن لمن يقرأ الحدول أن يميز بين البيانات وبين رأس الجدول، فالنصوص في رأس الجدول ستكون سميكة وسيحاذيها المتصفح إلى المنتصف من كل خلية.

ماذا يمكننا أن نفعل أيضا؟ هناك الخاصية summary التي تستخدم في العنصر table، وهي خاصية مفيدة لمن يستخدم أجهزة لا تحوي شاشات لعرض الصفحة، مثل قارئ بريل للمكفوفين أو البرامج التي تقرأ الصفحات للمكفوفين أو لضعاف البصر وكذلك أجهزة أخرى صوتية، إضافة ملخص للجدول ليس صعباً:

<table summary="جدول ترتيب الفرق في دوري الإمارات لكرة القدم 2007">
<caption>ترتيب الفرق في دوري الإمارات لكرة القدم</caption>
	<tr>
		<th>النادي</th>
		<th>المباريات</th>
		...

هل هناك المزيد؟ بالتأكيد، لدينا العناصر thead وtfoot وtbody، فالعنصر thead متعلق برأس الجدول، أما tfoot فهو بالبيانات الموجودة في آخر الجدول، وtbody لبيانات الجدول، بالتأكيد لا يجب عليك أن تستخدم هذه العناصر، لكن في بعض الأحيان من الأفضل أن تفعل ذلك خصوصاً عندما تتعامل مع جداول كبيرة معقدة، ويمكنك أن تضع هذه العناصر بهذا الترتيب، thead أولاً ثم tfoot ثم tbody بهذا الشكل:

<table>
  <thead>
	<tr>
		.... محتويات رأس الجدول هنا ...
	</tr>
  </thead>

  <tfoot>
	<tr>
		.... محتويات ذيل الجدول هنا ...
	</tr>
  </tfoot>

  <tbody>
	<tr>
		.... محتويات الجدول هنا ...
	</tr>
	<tr>
		.... محتويات الجدول هنا ...
	</tr>
	<tr>
		.... محتويات الجدول هنا ...
	</tr>
  </tbody>
</table>

هل هذا كل شيء؟ بالتأكيد لا، هناك الكثير يمكن تعلمه حول الجداول، يمكن أن نجعلها أكثر منطقية وقابلة أكثر للوصول، لكن أكتفي بهذا القدر هنا في هذا الدرس وفي درس قادم سأتحدث عن العناصر col وcolgroup وعن الخاصية headers التي تستخدم للعنصر td والتي تساعد ذوي الاحتياجات الخاصة على فهم الجداول أكثر.