الجداول Tables

إنشاء الجداول في لغة HTML

تتيح لك الجداول في لغة HTML ترتيب البيانات في صفوف وأعمدة. تُستخدم الجداول عادةً لعرض البيانات المجدولة مثل قوائم المنتجات وتفاصيل العميل والتقارير المالية وما إلى ذلك.
لانشاء جدول داخل صفحة الويب استخدم العنصر <table>.
داخل العنصر <table> ، استخدم العنصر <tr> لإنشاء صفوف.
ولإنشاء أعمدة داخل صف ، استخدم العنصر <td>.
يمكنك أيضًا تحديد خلية كعنوان لمجموعة من خلايا الجدول باستخدام العنصر <th>.
يوضح المثال التالي الهيكل الأساسي للجدول.

مثال
تشغيل
  1. <table>
  2. <tr>
  3. <th>No.</th>
  4. <th>Name</th>
  5. <th>Age</th>
  6. </tr>
  7. <tr>
  8. <th>1</th>
  9. <th>Murad Mustafa</th>
  10. <th>35</th>
  11. </tr>
  12. <tr>
  13. <th>2</th>
  14. <th>Noor</th>
  15. <th>27</th>
  16. </tr>
  17. </table>

الجداول ليس لها حدود بشكل افتراضي. يمكنك استخدام خاصية border في لغة CSS لإضافة حدود إلى الجداول. أيضا ، حجم خلايا الجدول كبير بما يكفي لتناسب المحتويات بشكل افتراضي. لإضافة مساحة أكبر حول المحتوى في خلايا الجدول ، يمكنك استخدام خاصية padding في لغة CSS.
تضيف قواعد النمط التالية حدًا بسماكة 1 بكسل إلى الجدول و 10 بكسل من المساحة بين المحتوى وحد الخلية.

مثال
تشغيل
  1. table, th, td {
  2. border: 1px solid black;
  3. }
  4. th, td {
  5. padding: 10px;
  6. }

كما لاحظنا في المثال السابق و بشكل افتراضي ، يتم فصل الحدود حول الجدول وخلاياه عن بعضها البعض لذلك لاحظنا وجود حدود حول الخلايا وكذلك حدود حول الجدول كاملا . ولدمجها سنقوم بإستخدام الخاصية border-collapse داخل العنصر <table>.
أيضًا ، يتم عرض النص الموجود داخل عناصر <th> بخط غامق ، ويتم محاذاته أفقيًا في الوسط في الخلية بشكل افتراضي. لتغيير المحاذاة الافتراضية ، يمكنك استخدام خاصية text-align من لغة CSS.
تعمل قواعد النمط التالية على دمج حدود الجدول ومحاذاة النص في الخلايا العنوانية الموجودة في رأس الجدول إلى اليسار.

مثال
تشغيل
  1. table {
  2. border-collapse: collapse;
  3. }
  4. th {
  5. text-align: left;
  6. }
ملاحظة:

تم الغاء معظم سمات عنصر <table> مثل border و cellpadding و cellspacing و width و align ، وما إلى ذلك من السمات التي تستخدم لتصميم وتنسيق الجداول ف HTML5 ، لذا تجنب استخدامها. ولتنسيق الجداول بالشكل المناسب استخدم قواعد الانماط في CSS بدلاً من ذلك.

دمج خلايا من صفوف وأعمدة متعددة

عادةً ، لا يمكن للبيانات الموجودة في خلية الجدول أن تنتقل إلى المساحة الموجودة أسفل خلية جدول أخرى أو فوقها او بجانبها. ولكن ، يمكنك استخدام السمات rowspan أو colspan لدمج الخلايا من صفوف متعددة او اعمدة متعددة في جدول.
لنجرب المثال التالي لفهم كيفية عمل colspan :

مثال
تشغيل
  1. <table>
  2. <tr>
  3. <th>Name</th>
  4. <th colspan="2">Phone</th>
  5. </tr>
  6. <tr>
  7. <td>Murad Mustafa</td>
  8. <td>5550192</td>
  9. <td>5550152</td>
  10. </tr>
  11. </table>

وبالمثل ، يمكننا استخدام سمة rowspan لدمج خلايا من اكثر من صف. دعنا نجرب مثالًا لفهم كيفية عملها:

مثال
تشغيل
  1. <table>
  2. <tr>
  3. <th>Name</th>
  4. <td>Murad Mustafa</td>
  5. </tr>
  6. <tr>
  7. <th rowspan="2">Phone</th>
  8. <td>5550192</td>
  9. </tr>
  10. <tr>
  11. <td>5550152</td>
  12. </tr>
  13. </table>

إضافة عناوين للجداول

يمكننا تحديد عناوين للجداول باستخدام عنصر <caption>.
يجب وضع عنصر <caption> مباشرة بعد وسم البدء <table>. بشكل افتراضي ، يظهر العنوان في أعلى الجدول ، ولكن يمكننا تغيير موضعه باستخدام خاصية caption-side في لغة CSS.
يوضح المثال التالي كيفية استخدام هذا العنصر في الجدول.

مثال
تشغيل
  1. <table>
  2. <caption>Users Info</caption>
  3. <tr>
  4. <th>No.</th>
  5. <th>Name</th>
  6. <th>Age</th>
  7. </tr>
  8. <tr>
  9. <td>1</td>
  10. <td>Murad Mustafa</td>
  11. <td>35</td>
  12. </tr>
  13. <tr>
  14. <td>2</td>
  15. <td>Noor</td>
  16. <td>27</td>
  17. </tr>
  18. </table>

تحديد رأس (Header) وهيكل (Body) وتذييل (Footer) للجدول

توفر لغة HTML سلسلة من الوسوم <thead> و <tbody> و <tfoot> تساعدك على إنشاء جدول منظم بشكل أكبر من خلال تحديد مناطق الرأس والهيكل والتذييل على التوالي.
يوضح المثال التالي استخدام هذه العناصر.

مثال
تشغيل
  1. <table>
  2. <thead>
  3. <tr>
  4. <th>Items</th>
  5. <th>Expenditure</th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td>Stationary</td>
  11. <td>2,000</td>
  12. </tr>
  13. <tr>
  14. <td>Furniture</td>
  15. <td>10,000</td>
  16. </tr>
  17. </tbody>
  18. <tfoot>
  19. <tr>
  20. <th>>Total</th>
  21. <th>12,000</th>
  22. </tr>
  23. </tfoot>
  24. </table>
« التالي السابق »