منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

شرح الجداول html table tags

شرح انشاء الجداول والاعمدة والصفوف داخل الجدول html table tags

1

html table tag

<table> </table>

table ترجمتها جدول.
وهذا العنصر يكون بداخلة جميع العناصر التالية👇

2

html caption tag

<caption> </caption>

Caption ترجمتها شرح.
المُحتوى بداخل هذا العُنصر يكون هو عنوان الجدول ولكن العنوان اعلى الجدول.
مثال على ذلك:


<!DOCTYPE html>
<html>
<head>
  <title>Courses 4 Arab</title>
  <!-- css اكواد لغة -->
  <style>
  table, th, td {
    border: 1px solid black;
    text-align: center;
    margin: auto;}
  </style>
</head>

<body>

  <table>
    <caption>popular Frameworks</caption>

    <tr>
      <th>front-end frameworks</th>
      <th>Back-end frameworks</th>
    </tr>

    <tr>
      <td>React</td>
      <td>Laravel</td>
    </tr>

    <tr>
      <td>Angular</td>
      <td>Django</td>
    </tr>

    <tr>
      <td>Vue</td>
      <td>Flask</td>
    </tr>

  </table>
</body>

</html>
وهذه الأكواد تُعطى هذه النتيجة :

popular Frameworks
front-end frameworksBack-end frameworks
React Laravel
AngularDjango
VueFlask
3

html tr, th, td tags

<tr> </tr>
<th> </th>
<td> </td>

<tr>tr اختصار ل table row ومعناها صف داخل الجدول.
<th>th اختصار ل table header وترجمتها عنوان الجدول ولكنالعنوان داخل الجدول.
ويكون داخل عنصر ال <tr>
<td>td هي اختصار ل table data ومعناها المعلومات الفرعية اسفل عنوان الجدول <th>

مثال على ذلك فى الأعلى👆

4

html thead , tbody , tfoot tag

<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot>

اذا كان الجدول يتكون من العنوان (head) و الجزء الأساسي من الجدول (body) و الجزء الأسفل من الجدول (footer) فإننا نستخدم هذه العناصر معا لتكون محتوياتهم هي<tr >او<th >حتى يُمكننا التعامل مع الجدول بسهولة اذا كان الجدول يحتوى على الكثير من البيانات.
مثال على ذلك:


<!DOCTYPE html>

<html>
  <head>
    <title>Courses 4 Arab</title>
    <!-- css اكواد لغة -->
    <style>
      table, th, td {
        border: 1px solid black;
        text-align: center;
        margin: auto;}
    </style>
  </head>

  <body>
    
    <table>
      <thead>
        <tr>
          <th>المصروفات</th>
          <th>الشهر</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1200</td>
          <td>يناير</td>
        </tr>
        <tr>
          <td>1800</td>
          <td>فبراير</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>3000</td>
          <td>المجموع</td>
        </tr>
      </tfoot>
    </table>

  </body>
</html>

وهذه الأكواد تُعطى هذه النتيجة :



المصروفاتالشهر
1200يناير
1800فبراير
3000المجموع
5

html colgroup , col tag

<colgroup> </colgroup>
<col >

هذه العناصر تُستخدم بعد عنصر ال<table>وبعد عنصر ال<caption> وذلك لتنسيق الاعمدة
<col >يكون دائما داخل عنصر<colgroup>ولا يوجد له نهاية وسم (closing tag) ويُمكن كتابته<col>او<col />
وتحتوي على attribute مهم هو span وتكون قيمته عبارة عن عدد الأعمدة المُراد تنسيقها بالترتيب من اليسار الى اليمين.

مثال على ذلك:


<!DOCTYPE html>

<html>
  <head>
    <title>Courses 4 Arab</title>
    <!-- css اكواد لغة -->
    <style>
          table, th, td {
          border: 1px solid black;
          text-align: center;
          margin: auto;}
    </style>

  </head>

  <body>
    <table>
      <colgroup>
        <col span="2" style="background-color: white" />
        <col style="background-color: gray" />
      </colgroup>

      <thead>
        <tr>
          <th>المُرتب</th>
          <th>المصروفات</th>
          <th>الشهر</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>2000</td>
          <td>1200</td>
          <td>يناير</td>
        </tr>
        <tr>
          <td>2200</td>
          <td>1800</td>
          <td>فبراير</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>4200</td>
          <td>3000</td>
          <td>المجموع</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
وهذه الأكواد تُعطى هذه النتيجة :

المُرتبالمصروفاتالشهر
20001200يناير
22001800فبراير
42003000المجموع