تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب (تعلم بروقااان👌)
كيفية الشراء من الموقع

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

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

سعر الإعلان 3$ فى اليوم الواحد

شرح الجداول 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
ReactLaravel
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المجموع


المصادر

w3.org

  1. w3.org table tag
  2. w3.org caption tag
  3. w3.org tr tag
  4. w3.org th tag
  5. w3.org td tag
  6. w3.org thead tag
  7. w3.org tbody tag
  8. w3.org tfoot tag
  9. w3.org colgroup tag
  10. w3.org col tag

w3schools.com

  1. w3schools.com table tag
  2. w3schools.com caption tag
  3. w3schools.com tr tag
  4. w3schools.com th tag
  5. w3schools.com td tag
  6. w3schools.com thead tag
  7. w3schools.com tbody tag
  8. w3schools.com tfoot tag
  9. w3schools.com colgroup tag
  10. w3schools.com col tag
😡
انت مشغل الـ AdBlock !!

يعنى انت مش مُنتسب فى القناة ولا مُشترك فى كورس يوديمى وكمان مشغل الأدبلوك فى الموقع !! 😢