طريقة عمل الجداول في صفحة الويب بلغة html
سنتعرف في هذا الدرس علي طريقة عمل الجداول في صفحة الويب بلغة html.
تستخدم الجداول في صفحة الويب لعمل تقسيمات تحتوي علي اسماء للمقارنة او لوضع ارقام معينة وغيرها... يتم انشاء الجدول عن طريق الوسم <table> ولكي نضيف به سطر نستخدم الوسم <tr> اختصار لكلمة table rows ولكي نضيف محتوي داخل السطر نستخدم الوسم <td> اختصار لكلمة table data ونقوم بتحديد عرض الجدول وسمك الحدود عن طريق الواصفة border
وفيما يلي شرح مفصل لكود وطريقة انشاء الجدول في صفحة الويب بلغة html
كود عمل الجداول في لغة html
لاحظ الكود الآتي
<body><table border="1" width="50%"><tr><td> ahmed </td><td> mahmoud </td><td> omar </td></tr></table></body>
شرح الكود السابق:
- وسم انشاء الجدول هو <table> وقمنا بأضافة الواصفة border لتحديد سمك الجدول واضافة الواصفة width لتحديد عرض الجدول.
- واضفنا ايضاً الوسم <tr> الدال علي كلمة table rows لوضع سطر في الجدول وهذا السطر لا يتم اضافة به محتوي
- واضفنا الوسم <td> الدال علي كلمة table data لأضافة محتوي في الجدول سواء كان ( نص- رقم) وسيظهر كما في الصوره الظاهرة.
- لو اردنا اضافة سطر اخر نضيف الوسم <tr> ونضيف السطور كما في الكود السابق مرة اخرى
 |
| الصورة الظاهرة لتوضيح الكود |
كود انشاء عنوان للجدول في لغة html
<body><table border="1" width="50%"><caption> عنوان الجدول </caption><tr><td> ahmed </td><td> mahmoud </td><td> omar </td></tr></table></body>
شرح الكود السابق:
- يتم انشاء عنوان للجدول عن طريق الوسم <caption> ونضيفه بعد وسم <table> داخل الجدول كما في الكود
- ستظهر النتيجة كما في الصوره الظاهرة
 |
| الصورة الظاهرة لتوضيح الكود |
منطقه رأس الجدول table head :
يقصد بمنطقة رأس الجدول جعل الخط في الجدول الاول سميك وفيما يلي الكود الذي يوضح ذلك
<body><table border="1" width="60%"><caption> عنوان الجدول </caption><thead><tr><th> الاسم </th><th>الاسم 2 </th><th> الاسم 3</th></tr></thead><tr><td> ahmed </td><td> mahmoud </td><td> omar </td></tr></table></body>
شرح الكود السابق:
- يتم انشاء منطقة رأس الجدول عن طريق الوسم <thead> ثم نضيف سطر بواسطة الوسم <tr> ونضيف محتوى رأس الجدول بواسطة الوسم <th> وستظهر كما في الصوره الظاهرة.
 |
| الصورة الظاهرة لتوضيح الكود |
منطقه جسم الجدول table body :
يقصد بمنطقة جسم الجدول هي المنطقة بعد رأس الجدول وقبل ذيل الجدول اي في منتصف الجدول وفيما يلي شرح ذلك الكود
<body><table border="1" width="60%"><caption> عنوان الجدول </caption><thead><tr><th> الاسم </th><th>الاسم 2 </th><th> الاسم 3</th></tr></thead><tbody><tr><td> ahmed </td><td> mahmoud </td><td> omar </td></tr></tbody></table></body>
شرح الكود السابق:
- وسم انشاء جسم الجدول هو <tbody> وجسم الجدول هي المنطقة في منتصف الجدول وستظهر كما في الصوره الظاهرة.
 |
| الصورة الظاهرة لتوضيح الكود |
منطقه ذيل الجدول table foot:
<body>
<table border="1" width="60%">
<caption> عنوان الجدول </caption>
<thead>
<tr>
<th> الاسم </th>
<th>الاسم 2 </th>
<th> الاسم 3</th>
</tr>
</thead>
<tbody>
<tr>
<td> ahmed </td>
<td> mahmoud </td>
<td> omar </td>
</tr>
</tbody>
<tfoot>
<tr>
<th> رقم 1</th>
<th> رقم 2</th>
<th> رقم 3</th>
</tr>
</tfoot>
</table>
</body>
شرح الكود السابق:
- وسم منطقة ذيل الجدول هو <tfoot> وهذه المنطقة تقع اسفل الجدول وتستخدم لعمل ملخص نهائي للجدول اوغيرها
- قمنا بأضافة وسم سطر <tr> واضفنا بداخله المحتوي عبر وسم <th> الوسم الذي يستخدم لجعل المحتوي عريض.
 |
| الصورة الظاهرة لتوضيح الكود |
وفي نهاية هذا الدرس نرجو ان نكون قد افدناكم حتي لو بالقليل وشكراً لكم
لا تنسي القاء نظرة علي الدروس السابقة
تعليقات
إرسال تعليق