HTML table Tag

HTML table Tag – يحدد وسم <table> جدول (مكون من صفوف وأعمدة) في HTML.

HTML table Tag

لكى ننشأ جدول فى HTML نستخدم وسم <table> مع تضمين بعض الوسوم الأخرى بداخلة:

<tr>: لتحديد صف الجدول.
<th>: لتحديد رأس الجدول.
<td>: لتحديد خلية جدول.

مثال للتوضيح

إستخدام وسم <table> لجدولة بعض البيانات:

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML table example</title>
    
    <style>
       tr, th, td {
	      border: 1px solid #999;
       }
    </style>
  </head>
  <body>
    
    <table>
       <caption>Languages percents</caption>
       <tr>
         <th>Number</th>
         <th>Languages</th>
         <th>Percent</th>
       </tr>
       <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>
    </table>
    
  </body>
</html>

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

يمكنك تضمين وسوم مثل <caption> و <colgroup> و <thead> و <tfoot> و <tbody> داخل جدول HTML أيضًا.

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

أمثلة – <table>

1. تمتد خلايا الجدول لأكثر من عمود:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Example of table with Cell spans 2 columns</title>
    
    <style>
        th, td, table {
            border-collapse: collapse;
            border: 1px solid #999;
        }
        
        th, td {
            padding: 20px;
        }
    </style>
    </head>
    <body>
    
     <table>
        <caption>Languages percents</caption>
        <tr>
            <th>Number</th>
            <th colspan="2">Languages and Percent</th>
        </tr>
        <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>
      </table>
    </body>
</html>

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

2. تمتد خلايا الجدول لأكثر من صف:

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title>Example of table with Cell spans 2 rows</title>
    
     <style>
       th, td, table {
          border-collapse: collapse;
       	  border: 1px solid #999;
       }
        
       th, td {
          padding: 20px;
       }
      </style>
    </head>
    <body>
    
    <table>
      <tr>
        <th>Language</th>
        <td>HTML</td>
        <td>CSS</td>
        <td>JavaScript</td>
      </tr>
      <tr>
        <th rowspan="2">Percents</th>
        <td>2019 - 90%</td>
        <td>2019 - 90%</td>
        <td>2019 - 93%</td>
      </tr>
      <tr>
        <td>2021 - 92%</td>
        <td>2021 - 95%</td>
        <td>2021 - 98%</td>
      </tr>
    </table>
  </body>
</html>

Language	HTML	CSS	JavaScript
Percents	2019 – 90%	2019 – 90%	2019 – 93%
Percents	2021 – 92%	2021 – 95%	2021 – 98%

3. مجموعات الأعمدة بإستخدام عناصر <col> & <colgroup>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example of table column groups</title>
    
    <style>
        tr, th, td {
            border: 1px solid #999;
            padding: 10px;
        }
        
        table {
        width: 100%;
        }
    </style>
   </head>
   <body>
    
    <table>
        <colgroup>
         <col style="background: #219c1dab;">
         <col style="background: #ec5d64;">
         <col style="background: #a49362;">
        </colgroup>
       <tr>
         <th>Number</th>
         <th>Languages</th>
         <th>Percent</th>
       </tr>
       <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>
    </table>

  </body>
</html>