شرح العنصر (th) في HTML

الشرح الشامل لعنصر <th> في HTML

HTML

العنصر <th> في HTML (HyperText Markup Language) هو اختصار لـ "Table Header"، ويُستخدم لتحديد رأس خلية في جدول. يُعتبر هذا العنصر جزءًا أساسيًا من بنية الجداول في صفحات الويب، حيث يُساعد في تنظيم البيانات وتحديد العناوين التي تشرح محتوى الأعمدة أو الصفوف. فيما يلي شرح شامل ووافٍ للعنصر <th> يشمل تعريفه، استخداماته، خصائصه، وأمثلة عملية:

تعريف العنصر <th>

• الغرض: يُستخدم العنصر <th> لتحديد خلية رأسية في جدول HTML، والتي تُمثل عادةً عنوانًا لعمود أو صف.
• الفرق بين <th> و <td> :
  • <th> تُستخدم للخلايا التي تحتوي على عناوين (headers)، وعادةً ما تُظهر محتواها بخط عريض وتكون مُتمركزة افتراضيًا في معظم المتصفحات.
  • <td> (Table Data) تُستخدم للخلايا التي تحتوي على البيانات العادية.
• الموقع: يُوضع العنصر <th> داخل عنصر <tr> (Table Row)، وعادةً ما يُستخدم داخل <thead> (Table Header) لتحديد رأس الجدول، ولكن يمكن استخدامه في أي صف داخل الجدول.

خصائص العنصر <th>

العنصر <th> يدعم مجموعة من السمات (attributes) التي تُساعد في تخصيص وظيفته وسلوكه. أهم هذه السمات تشمل:

• السمات العامة (Global Attributes):
  • مثل id , class , style , titleوغيرها، والتي تُطبق على معظم عناصر HTML.
  • مثال: <th class="header" id="col1"> لتحديد فئة أو معرف للخلية.
• السمات الخاصة بـ <th> :
  • scope:
    • تُحدد نطاق الرأس (إذا كان ينطبق على صف، عمود، مجموعة صفوف، أو مجموعة أعمدة).
    • القيم الممكنة:
      • row: يشير إلى أن الرأس ينطبق على الصف.
      • col: يشير إلى أن الرأس ينطبق على العمود.
      • rowgroup: ينطبق على مجموعة صفوف.
      • colgroup: ينطبق على مجموعة أعمدة.
    • مثال: <th scope="col">اسم الطالب</th> يوضح أن الرأس ينطبق على العمود بأكمله.
  • colspan:
    • يُحدد عدد الأعمدة التي تمتد عبرها الخلية.
    • مثال: <th colspan="2">معلومات الاتصال</th> تجعل الخلية تمتد عبر عمودين.
  • rowspan:
    • يُحدد عدد الصفوف التي تمتد عبرها الخلية.
    • مثال: <th rowspan="2">الفئة</th> تجعل الخلية تمتد عبر صفين.
  • headers:
    • تُستخدم لربط خلية رأس بخلايا أخرى في الجدول باستخدام معرفات (IDs).
    • تُستخدم غالبًا لتحسين إمكانية الوصول (accessibility).
    • مثال: <th id="name-header">الاسم</th> ثم <td headers="name-header">أحمد</td>.
• سمات إمكانية الوصول (Accessibility Attributes):
  • مثل aria-label ، aria-describedby ، و aria-labelledby لتحسين تفاعل قارئات الشاشة مع الجدول.

استخدامات العنصر <th>

• تنظيم البيانات: يُساعد في توضيح العلاقة بين العناوين والبيانات في الجدول، مما يجعل الجدول أكثر وضوحًا.
• تحسين إمكانية الوصول: يُستخدم مع السمات مثل scope و headers لضمان أن قارئات الشاشة يمكنها تفسير الجدول بشكل صحيح.
• تصميم الجداول المعقدة: يُستخدم في الجداول التي تحتوي على رؤوس متعددة المستويات أو خلايا ممتدة عبر صفوف/أعمدة.
• التمييز البصري: يُظهر المتصفح محتوى <th> عادةً بخط عريض ومُتمركز، مما يُميزه عن البيانات العادية.

هيكلية استخدام <th> في الجدول

لإنشاء جدول يحتوي على <th> ، يتم استخدامه ضمن الهيكلية التالية:

<table>
  <thead>
    <tr>
      <th>رأس 1</th>
      <th>رأس 2</th>
      <th>رأس 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>بيانات 1</td>
      <td>بيانات 2</td>
      <td>بيانات 3</td>
    </tr>
  </tbody>
</table>
  

• <table> يُمثل الجدول بأكمله.
• <thead> يحتوي على رأس الجدول (اختياري ولكنه موصى به للجداول المعقدة).
• <tbody> يحتوي على جسم الجدول.
• <tr> يُمثل صفًا في الجدول.
• <th> يُمثل خلية رأسية داخل الصف.

أمثلة عملية

جدول بسيط مع <th>

<table border="1">
  <thead>
    <tr>
      <th scope="col">الاسم</th>
      <th scope="col">العمر</th>
      <th scope="col">المدينة</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>أحمد</td>
      <td>25</td>
      <td>القاهرة</td>
    </tr>
    <tr>
      <td>سارة</td>
      <td>30</td>
      <td>الرياض</td>
    </tr>
  </tbody>
</table>
  

النتيجة:

• يظهر الجدول مع عناوين "الاسم"، "العمر"، و"المدينة" بخط عريض ومُتمركز.
• البيانات تظهر في خلايا عادية أسفل كل رأس.

استخدام colspan و rowspan

<table border="1">
  <thead>
    <tr>
      <th colspan="2">معلومات الشخص</th>
      <th rowspan="2">الدرجة</th>
    </tr>
    <tr>
      <th>الاسم</th>
      <th>العمر</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>محمد</td>
      <td>22</td>
      <td>85</td>
    </tr>
  </tbody>
</table>
  

النتيجة:

• رأس "معلومات الشخص" يمتد عبر عمودين.
• رأس "الدرجة" يمتد عبر صفين.

جدول مع تحسين إمكانية الوصول

<table border="1">
  <thead>
    <tr>
      <th id="name" scope="col">الاسم</th>
      <th id="score" scope="col">النتيجة</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="name">علي</td>
      <td headers="score">90</td>
    </tr>
  </tbody>
</table>
  

النتيجة:

• يتم ربط البيانات بالعناوين باستخدام headers، مما يُسهل على قارئات الشاشة فهم الجدول.

تنسيق <th> باستخدام CSS

يمكن تخصيص مظهر <th> باستخدام CSS لتغيير الخط، اللون، الخلفية، الحدود، وغيرها. مثال:

<style>
  th {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>

<table>
  <tr>
    <th>المنتج</th>
    <th>السعر</th>
  </tr>
  <tr>
    <td>تفاح</td>
    <td>5 ريال</td>
  </tr>
</table>
  

النتيجة:

• رأس الجدول يظهر بخلفية خضراء ونص أبيض مع تباعد داخلي (padding).

نصائح وأفضل الممارسات

• استخدام scope: دائمًا استخدم السمة scope لتحديد نطاق الرأس، خاصة في الجداول الكبيرة.
• إمكانية الوصول: تأكد من استخدام headers أو id في الجداول المعقدة لدعم قارئات الشاشة.
• تناسق التصميم: حافظ على تنسيق موحد لجميع خلايا <th> باستخدام CSS.
• اختبار الجدول: اختبر الجدول على أجهزة مختلفة للتأكد من أنه يظهر بشكل صحيح.
• تجنب الإفراط في التعقيد: لا تُفرط في استخدام colspan وrowspan لتجنب إرباك المستخدم.

القيود والتحذيرات

• عدم دعم بعض السمات في HTML5: بعض السمات القديمة مثل align وvalign أصبحت مهجورة في HTML5، ويُفضل استخدام CSS بدلاً منها.
• التأثير على إمكانية الوصول: إذا لم يتم استخدام <th> بشكل صحيح (مثل عدم تحديد scope)، قد يؤدي ذلك إلى صعوبة فهم الجدول بواسطة قارئات الشاشة.
• التوافق مع المتصفحات: تأكد من اختبار الجدول في متصفحات مختلفة، حيث قد تختلف طريقة العرض الافتراضية لـ <th>.

الخلاصـــة

العنصر <th> هو أداة أساسية لإنشاء جداول منظمة وواضحة في صفحات الويب. من خلال استخدامه مع السمات المناسبة مثل scope، colspan، وrowspan، يمكن تحسين وظائف الجدول وإمكانية الوصول إليه. كما يُمكن تخصيص مظهره باستخدام CSS ليتناسب مع تصميم الموقع. باتباع أفضل الممارسات، يُمكن ضمان أن تكون الجداول سهلة الفهم للمستخدمين ومتوافقة مع معايير الويب الحديثة.

إذا كنت بحاجة إلى مثال إضافي أو توضيح لجزء معين، لا تتردد في طلب ذلك!

كيف كان المقال؟