HTML thead Tag

HTML thead Tag – يٌستخدم وسم <thead> لتجميع محتوى رأس header في جدول HTML.

HTML thead Tag

يحتوى الوسم <thead> على مجموعة من الصفوف <tr>.

يُستخدم وسم <thead> مع وسمى:

<tbody>: لتحديد محتوى نص الجدول
<tfoot> لتحديد تذييل أو نهاية الجدول

لتوفير معلومات دلالية مفيدة يمكن استخدامها عند العرض للشاشة أو الطباعة أو لأغراض إمكانية الوصول.

يجب استخدام عنصر <thead> داخل عنصر <table>، وبعد هذه العناصر:

<caption>
<colgroup>

وقبل هذه العناصر:

<tbody>
<tfoot>
<tr> .

مثال للتوضيح

شغل إيدك

إستخدام وسم <tbody> لتجميع بيانات رأس header الجدول:

Languages Percentage
Number	Languages	Percent
1	HTML	90%
2	CSS	91%
3	JavaScript	95%

<table>
    <caption>Languages Percentage</caption>
    <thead>
        <tr>
            <th>Number</th>
            <th>Languages</th>
            <th>Percent</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>HTML</td>
            <td>90%</td>
        </tr>
        <tr>
            <td>2</td>
            <td>CSS</td>
            <td>91%</td>
        </tr>
        <tr>
            <td>3</td>
            <td>JavaScript</td>
            <td>95%</td>
        </tr>
    </tbody>
</table>

Languages Percentage
Number	Languages	Percent
1	HTML	90%
2	CSS	91%
3	JavaScript	95%

لن تؤثر العناصر <thead> و <tbody> و <tfoot> على تخطيط الجدول افتراضيًا.

عند طباعة مستند ، تحدد العناصر <thead> و <tfoot> المعلومات التي قد تكون متطابقة أو على الأقل متشابهة جدًا في كل صفحة من جدول متعدد الصفحات ، بينما تختلف محتويات عنصر <tbody> بشكل عام عن صفحة إلى صفحة.

مثال: إستخدام <thead> و <tbody> و <tfoot> معًا

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Use thead and tbody and tfoot tag together</title>
    
    <style>
        th, td {
          border: 1px solid #999;
        }
        
        table {
          width: 100%;
        }
    </style>
  </head>
  <body>
    
     <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Laptop</td>
          <td>$1000</td>
        </tr>
        <tr>
          <td>iPhone</td>
          <td>$2000</td>
        </tr>
        <tr>
          <td>Keyboard</td>
          <td>$500</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>$3500</td>
        </tr>
      </tfoot>
    </table> 
    
  </body>
</html>