عنصر <table> يُستخدم لإنشاء 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

طريقة بناء هيكل الجملة الخاص بالجدول.

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

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

</> Create HTML table
إنشاء الجدول في لغة 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

يتم إنشاء table header الصف العلوي داخل الجدول عن طريق عنصر <th> الذي يجب أن يكون داخل عنصر <tr>.
تشير th إلى table cell 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>

جربها بنفسك

Multi table 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