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>

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

السمات العامة – Global Attributes

الوسم <table> يدعم السمات العامة، تعرف عليهم عن طريق هذا الرابط: السمات العامة – Global Attributes.

سمات الحدث – Event Attributes

كما يدعم الوسم <table> سمات الحدث أيضًا، تعرف عليهم عن طريق هذا الرابط: سمات الحدث – Event Attributes.

إقرأ أيضًا – HTML <table> Tag

للمزيد من المعلومات عن جداول HTML شاهد:

الوسوم المتعلقة: <tr> – <td> – <th> – <caption> – <col> – <colgroup> – <thead> – <tfoot> – <tbody>.

دعم المتصفحات

HTML svg Tag HTML tbody Tag

الإبلاغ عن خطأ

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!


مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

HTML Tags

HTML table Tag

HTML table Tag

أمثلة – <table>

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

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

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

السمات العامة – Global Attributes

سمات الحدث – Event Attributes

إقرأ أيضًا – HTML <table> Tag

دعم المتصفحات

شارك هذا:

الإبلاغ عن خطأ