عنصر <table> يُستخدم لإنشاء جدول داخل صفحة HTML.
عنصر <tr> يُستخدم لإنشاء صف row جديد داخل الجدول.
عنصر <th> لتحديد محتوى بيانات العناوين table head داخل الجدول.
عنصر <td> يُستخدم لإنشاء خلية جديدة table data داخل الجدول.
عنصر <caption> يُستخدم لإضافة تَسمية توضيحية أو عنوان للجدول الخاصة بك.
عنصر <thead> يُستخدم لإضافة رأس الجدول -صف البداية- الذي يَكونُ بداخله جزء بداية محتوى البيانات التي تَكونُ عناوين الجدول.
عنصر <tbody> يُستخدم لإضافة جزء البيانات -المحتوي الداخلي- الذي يَكونُ بداخله محتوى بيانات الجدول.
عنصر <colgroup> يُستخدم في عمل مجموعة صفوف.
عنصر <col> يُستخدم لتحديد خصائص عمود معين، داخل عنصر <colgroup>.
عنصر <tfoot> يُستخدم في إنشاء آخر صف في الجدول.

Page Title

Firstname	Lastname	Email	Age	Study
Mohamed	Adly	[email protected]	33	PHP
Mazen	Salah	[email protected]	36	HTML
Mostafa	Abdo	[email protected]	24	CSS
Khaked	Aly	[email protected]	27	CSS
Mona	Mohamed	[email protected]	20	CSS

HTML Table Syntax

مثال على تكوين عناصر الجدول في HTML.

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

هام

لا يُوجد برمجياً طريقة لإنشاء أعمدة عن طريق HTML table، ولكن يتَكون الجدول من صفوف وبداخلها خلايا، وهذه الخلايا هي التي تُكوّنُ الأعمدة.
يَكونُ الجدول في لغة HTML بدون أي حدود أو أي تنسيقات، حيث تَقومُ العناصر الخاصة بالجدول ببناء هيكل الجدول فقط، أما جميع التنسيقات الخاصة بالجدول فتتم في لغة CSS، والتي سوف نتعلمها لاحقاً.

</> Creating A Table In HTML
إنشاء الجدول في لغة HTML

يتم بناء الجدول عن طريق عنصر <table> وهو من نوع العنصر المُتداخلة nested elements، وهو أكبر حاوية تُكتب بداخله جميع العناصر.

HTML Table Element

يُستخدم table element لإنشاء الجداول في لغة HTML.

<table>
        
</table>

جربها بنفسك

إطار الجدول

لا يظهر إطار للجدول في الوضع الافتراضي، لكن يمكن من خلال HTML إضافة إطارات، وستتعرف على ذلك في الدروس القادمة.

</> Create Table Row In HTML
إضافة صف للجدول في لغة HTML

يتم إنشاء صف row داخل الجدول، عن طريق عنصر <tr> وهو من نوع العنصر المُتداخلة nested elements، حيث تكون جميع البيانات داخل صفوف قبل بناء الخلايا.

Syntax Table Row

طريقة كتابة عنصر <tr> داخل الجدول في لغة HTML.

<table>
  <tr>

  </tr>
</table>

جربها بنفسك

</> Create Table Header In HTML
إضافة بيانات أعلى الجدول في لغة HTML

يتم إنشاء الصف العلوي داخل الجدول عن طريق عنصر <th> الذي يجب أن يكون داخل عنصر <tr>.
تشير th إلى table header.
عنصر <th> من نوع العنصر المُتداخلة nested elements، حيث يكون لجميع الجداول عناوين، ويكون العنوان أول صف إذا كان الجدول عمودي، أما إذا كان الجدول أفقي، فيكون العنوان من جهة اليسار إذا كانت البيانات باللغة الإنجليزية، ومن جهة اليمين إذا كانت البيانات باللغة العربية.

Th Element

يكون عنصر th في أول صف من الجدول إذا كان الجدول عمودي، ويحدد عناوين النصوص الرئيسية.

<table>
  <tr>
    <th>Firstname</th> 
    <th>Lastname</th>
    <th>Email</th>
    <th>Age</th>
    <th>Study</th>
  </tr>
</table>

جربها بنفسك

ملاحظة

لا تنسى علامة الإغلاق الخاصة بكل عنصر من عناصر الجدول.

</> Create Table Data In HTML
إضافة بيانات داخل الجدول في لغة HTML

يتم إضافة بيانات -سواءً نصية أو مرئية في الخلايا داخل الجدول عن طريق عنصر <td>.
يجب أن يكون عنصر <td> داخل عنصر <tr>.
عنصر <td> من نوع العنصر المُتداخلة nested elements.
جميع الجداول يكون لها محتوى وصفي، ويجب أن يكون المحتوى بداخل عنصر <tr>.
td اختصار table data.
عنصر <td> يكون في جميع الصفوف عدا الصف الأول حيث نستبدله بـعنصر <th>.

Table Data Element

يكون عنصر <td> في جميع الصفوف عدا الصف الأول، حيث نستبدله في الصف الأول بعنصر <th>.

<table>  
<tr>  
    <th>Firstname</th> 
    <th>Lastname</th>
    <th>Email</th>
    <th>Age</th>
    <th>Study</th>
</tr>
<tr>
    <td>Mohamed</td> 
    <td>Adly</td>
    <td>[email protected]</td>
    <td>33</td>
    <td>PHP</td>
</tr>
</table>

جربها بنفسك

Table Row With Data

يمكن في لغة HTML إضافة عدد غير محدود من الصفوف، التي تحتوي بداخلها على خلايا.

<tr>
    <td>Mohamed</td> 
    <td>Adly</td>
    <td>[email protected]</td>
    <td>33</td>
    <td>PHP</td>
</tr>

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

HTML Tables
الجداول في لغة HTML

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML Tables HTML

HTML Table

الجداول في لغة HTML