في هذا الدرس 5تصفّح المواضيع
HTML Tables
الجداول في لغة HTML
HTML Tables الجداول في لغة HTML
العناصر التي يتكون منها الجدول:
- عنصر <table>: يُستخدم لإنشاء جدول داخل صفحة HTML وهو يعني كلمة [جدول].
- عنصر <tr>: يُستخدم لإنشاء صف جديد داخل الجدول وهو اختصار لـ [table row].
- عنصر <th>: يُستخدم لتحديد محتوى بيانات العناوين داخل الجدول وهو اختصار لـ [table header].
- عنصر <td>: يُستخدم لإنشاء خلية جديدة داخل الجدول وهو اختصار لـ [table data].
- عنصر <caption>: يُستخدم لإضافة تسمية توضيحية أو عنوان للجدول وهو يعني [[التسمية التوضيحية].
- عنصر <thead>: يُستخدم لإضافة رأس الجدول الذي يحتوي على عناوين البيانات وهو اختصار لـ [table head].
- عنصر <tbody>: يُستخدم لإضافة محتوى البيانات الداخلي للجدول وهو اختصار لـ [table body].
- عنصر <colgroup>: يُستخدم لإنشاء مجموعة أعمدة داخل الجدول وهو يعني [مجموعة الأعمدة].
- عنصر <col>: يُستخدم لتحديد خصائص عمود معين داخل عنصر <colgroup> وهو يعني كلمة [عمود].
- عنصر <tfoot>: يُستخدم لتحديد الجزء الأخير من الجدول، والذي عادة ما يحتوي على معلومات إضافية أو إحصائيات تتعلق بالبيانات الموجودة في الجدول وهو اختصار لـ [table footer].
HTML Table Syntax
يوضح المثال كيفية بناء جدول بسيط في HTML باستخدام العناصر الأساسية مثل <table>, <tr>, <th>, و <td> لترتيب الصفوف والخلايا.
<table>
<tr>
<th> </th>
</tr>
<tr>
<td> </td>
</tr>
</table>
Creating a Table in HTML
إنشاء الجدول في لغة HTML
Creating a Table in HTML إنشاء الجدول في لغة HTML
يتم بناء الجدول باستخدام عنصر <table>. ويعد هذا العنصر من نوع العناصر المتداخلة، حيث يحتوي على علامة فتح <table> وعلامة إغلاق </table>. وهو حاوية رئيسية تُكتب بداخلها جميع العناصر المتعلقة بتكوين الجدول.
HTML Table Element
يُظهر هذا المثال كيفية استخدام عنصر <table> لإنشاء هيكل الجدول الأساسي في لغة HTML.
Create Table Row in HTML
إضافة صف للجدول في لغة HTML
Create Table Row in HTML إضافة صف للجدول في لغة HTML
يتم إنشاء صف داخل الجدول باستخدام عنصر <tr>. هذا العنصر هو من نوع العناصر المتداخلة، مما يعني أنه يحتوي على علامة فتح <tr> وعلامة إغلاق </tr>.
داخل هذا الصف، يتم وضع الخلايا التي تحتوي على البيانات باستخدام td للبيانات أو th للعناوين.
Syntax Table Row
يوضح المثال كيفية استخدام عنصر <tr> لإنشاء صف داخل جدول HTML.
Create Table Header in HTML
إنشاء رأس الجدول في لغة HTML
Create Table Header in HTML إنشاء رأس الجدول في لغة HTML
- يتم إنشاء خلايا العناوين باستخدام عنصر th، وقد تكون عناوين أعمدة أو صفوف، يجب أن يكون هذا العنصر داخل صف، والذي يُنشأ باستخدام عنصر <tr>.
- يُستخدم th لتحديد عنوان يصف مجموعة من خلايا البيانات في الجدول.وهو من نوع العناصر المتداخلة،له علامة فتح <th> وعلامة إغلاق </th>.
- عناوين الأعمدة توضع عادةً في صف علوي، وعناوين الصفوف في عمود جانبي. يتأثر ترتيب الأعمدة باتجاه الجدول RTL أو LTR.
يمكن تحديد علاقة العنوان بالخلايا صراحةً باستخدام scope="col" لعنوان العمود أو scope="row" لعنوان الصف، مما يساعد التقنيات المساعدة، خصوصًا حين تكون العلاقة ملتبسة.
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
Create Table Data in HTML إنشاء بيانات داخل الجدول في لغة HTML
- يتم إضافة البيانات سواءً [نصية أو مرئية] في الخلايا داخل الجدول باستخدام عنصر <td>.
- يجب أن يكون عنصر <td> داخل عنصر <tr>.
- عنصر<td> من نوع العناصر المتداخلة له علامة فتح <td> وعلامة وإغلاق </td>.
- توضع البيانات داخل خلايا td أو th التابعة لصف tr، ويمكن أن يضم الجدول أيضًا تسمية caption ومجموعات صفوف.
- اختيار td أو th يعتمد على دور الخلية، لا رقم الصف: td لخلية بيانات ولو في الصف الأول، وth لعنوان ولو في صف آخر.
Table Data Element
في هذا المثال، نستخدم <td> لتحديد خلايا البيانات في الصفوف، بينما نستبدل <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>Using [th] for Table Row Headers in HTML
في هذا المثال، نستخدم <th> لتحديد عناوين الصفوف في جدول عمودي.
<table>
<tr>
<th>Firstname</th>
<td>Mohamed</td>
<td>Mazen</td>
</tr>
<tr>
<th>Lastname</th>
<td>Adly</td>
<td>Salah</td>
</tr>
</table>Th Element
في هذا المثال، نستخدم عنصر <th> في الصف الأول لتحديد عناوين الأعمدة الرئيسية في جدول أفقي، حيث تُوضع العناوين في الجزء العلوي من كل عمود.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Age</th>
<th>Study</th>
</tr>
</table>سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات14
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML Tables جداول HTML
- للمراجعة
- 02 Table جدول
- للمراجعة
- 03 Nested متداخلة
- للمراجعة
- 04 Rows صفوف
- للمراجعة
- 05 Table Row صف الجدول
- للمراجعة
- 06 Table Data بيانات الجدول
- للمراجعة
- 07 HTML Element عنصر HTML
- للمراجعة
- 08 Table Border حدود الجدول
- للمراجعة
- 09 Border حدود
- للمراجعة
- 10 Attribute سمة
- للمراجعة
- 11 Value قيمة
- للمراجعة
- 12 Style نمط أو شكل
- للمراجعة
- 13 Text Align محاذاة النص
- للمراجعة
- 14 Align محاذاة
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- صفحات التنسيق المتتالية<p><a href="https://www.closetag.com/tutorial/css/css-introduction">المزيد عن CSS</a></p>
- للمراجعة
- 03 Colspan Colspan
- Column Span
- الإمتداد العمودي
- للمراجعة
- 04 Rowspan Rowspan
- Rowspan
- الإمتداد الصفي
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.