يتمثل دور الجدول في عرض البيانات ذات الأبعاد. ، سيتم تقديمه لاحقًا). فيما يلي يقدم عناصر HTML بشكل أساسي لصنع الجداول.
بناء نموذجتشمل العناصر الأساسية للنموذج: الجدول ، TR ، و TD.
يمثل الجدول الجدول في مستند HTML الذي يدعم السمة الحدودية لتحديد عرض إطار الإطار ؛
يمثل TR الخط في الجدول ؛
يمثل TD الخلايا في الجدول ، بما في ذلك السمات التالية:
1) Colspan: عدد الأعمدة التي يمكن أن تعبرها الخلايا ؛
2) Rowspan: عدد الصفوف التي يمكن أن تعبرها الخلايا ؛
3) الرؤوس: لا تنتج هذه السمة أي تغييرات بصرية في المتصفحات العادية ، ولكن يمكن استخدامها من قبل قراء الشاشة.
<tably> <tr> <td> التفاح </td> <td> الأخضر </td> <td> متوسطة </td> </td> oranges </td> <td> Orange </td> <td> كبير </td> </r> </table>
يحدد ما ورد أعلاه جدولًا من سطرين وثلاثة أعمدة.
الحدود الجدوليمكن أن يؤدي استخدام السمة الحدودية لعنصر الجدول إلى إضافة حدود إلى الجدول.
<table border = 1> <tr> <td> Apples </td> <td> Green </td> </tdium </td> </td> <td> Oranges </td> <td> Orange </ td> <td> كبير </td> </tr> </table>
الحدود الافتراضية للمتصفح ليست جميلة جدًا ، وعادة ما تحتاج إلى استخدام CSS لتعيين نمط الإطار للعناصر المختلفة.
جدول غير منتظمباستخدام سمات Colspan و Rowspan للخلية ، يمكن أن تقوم ببناء جداول غير منتظمة ، بحيث تمتد بعض الصفوف أو الأعمدة من الجدول إلى خلايا متعددة أدناه.
<table border = 1> <ter> <th> month </h> <th> التوفير </th> </tr> <td colorpan = 2> يناير </td> </tr> <ter> <td colorpan = 2> فبراير </td> </tr> </lood>
فيما يلي مثال على خلية تعبر خطوط متعددة:
<table border = 1> <ter> <th> month </h> <th> Savings </h> </tr> <td> January </td> <td> $ 100.00 </td> <td rowspan = 2> $ 50 </td> </td> <td> فبراير </td> <td> $ 10.00 </td> </thand>رأس
يتم استخدام العنصر TH لإضافة رأس إلى النموذج ، والذي يمكن استخدامه لتمييز البيانات وتفسيرات البيانات. يدعم العنصر TH السمات التالية:
1) Colspan: عدد الأعمدة التي يمكن أن تعبرها الخلايا ؛
2) Rowspan: عدد الصفوف التي يمكن أن تعبرها الخلايا ؛
3) النطاق: تحديد طريقة ربط بيانات الرأس ببيانات الوحدة ؛
3) الرؤوس: يتم توفير قائمة معرف الرأس مفصولة بالمساحة بمعلومات رأس لخلية البيانات.
<Table> <ter> <th> rank </h> <th> الاسم </th> <th> اللون </th> </th> </tr> <th> المفضل: not/td> <td> Orange </td> <td> كبير </td> </tr> <ter> <th> 3rd المفضل: </th> <td> pomegraanate </td> <td> نوع من Greeny-Red </ يختلف TD> <td> من متوسط إلى كبير </td> </tr> </table>
يمكن استخدام TH و TD في خط.
دع الخلايا تربط الرأسيمكن أن ترتبط سمات رؤوس TD بالخلايا. يمكن أن تكون سمة الرؤوس هي قيمة سمة المعرف لواحد أو أكثر من خلايا TH:
<table border = 1 width = 100 ٪> <ter> <th id = name> name </th> <th id = email> البريد الإلكتروني </th> <th id = phone> phone> الهاتف </th> <th المعرف = العنوان> العنوان </th> </tr> <ter> <td headers = name> george bush </td> <td headers = email> [email protected] </td> <td headers = phone> + 789451236 </td> <td headers = address> Fifth Avenue New York ، USA </td> </tr> </tale>بناء ساعة معقدة
يمكن أن يؤدي استخدام سمات Colspan و Rowspan إلى إنشاء جداول معقدة.
<table border = 1> <tr> <th colspan = 2> الشركة في الولايات المتحدة الأمريكية </th> </tr> <th> الاسم </th> <h> addr </h> </tr> tr> <td > Apple ، Inc. </td> <td> 1 Lofinite Loop Cupertino ، CA 95014 </td> </td> <td> Google ، Inc. </td> 1600 Amphitheater Parkway Mountain View ، CA 94043 </td> </tr> </table>أضف بنية إلى الجدول
يمكنك استخدام عناصر thead و tbody و tfoot لإضافة هياكل إلى النموذج ، بحيث يمكنك إضافة نمط CSS إلى كل جزء من النموذج ليصبح أسهل.
1) موضوع الجدول
يمثل العنصر tbody السطر الكامل لموضوع النموذج ، باستثناء تمثيل العنصر (تمثيل عنصر thead) والدراجة البخارية (تمثيل عنصر tfoot).
لاحظ أن معظم المتصفحات ستقوم تلقائيًا بإدخال عنصر tbody عند معالجة عناصر الجدول.
2) رأس النموذج
يتم استخدام عنصر thead لتمييز خط العنوان للنموذج. إذا لم يكن هناك عنصر thead ، فسيتم اعتبار جميع عناصر TR جزءًا من موضوع النموذج.
3) إضافة الحاشية
يتم استخدام عناصر tfoot لتمييز خطوط التشكيل. قبل HTML5 ، لا يمكن أن تظهر عناصر tfoot إلا قبل عنصر tbody ، وفي HTML5 ، يُسمح لعنصر tfoot بوضع عنصر tfoot بعد tbody.
فيما يلي مثال شامل ، يستخدم عناصر tbody و thead و tfoot.
<Table> <d> <ter> <th> Rank </h> <th> name </h> <th> color </h> <th> Size </h> </thead> </thead> < tfoot> <ter> <th> رتبة </th> <h> الاسم </th> <th> اللون </th> </th> </tfoot المفضل: <th> <td> التفاح </td> <td> الأخضر </td> <em> متوسطة </td> </tr> <tr> <th> 2nd المفضلة: </th> <td> Oranges </td> <td> Orange </td> <td> كبير </td> </tr> <tr> <th> 3rd المفضل: </th> <td> pomegraanate </td> <td> نوع من Greeny-Red </td> <td> يختلف من متوسطة إلى كبيرة </td> </r> </tbody> </table>أضف العنوان إلى الجدول
يمكن باستخدام عنصر التسمية التوضيحية تحديد عنوان النموذج وربطه بالنموذج.
<Table> <aption> نتائج مسح الفاكهة لعام 2011 </caption> <thead> <tr> </h> <th> الاسم </th> </h> <th> الحجم </th> </r> </thead> <tfoot> <ter> <th> رتبة </th> <th> الاسم </th> <th> اللون </th> <th> الحجم </th> not> <ter> <th> 2nd المفضل: </th> <td> Orange </td> <td> Orange </td> <td> كبير </td> </tr> <trd المفضل: </th> <td> pomegranate </td > <td> يختلف نوعًا من greeny-red </td> <td> من متوسط إلى كبير </tdbody> </table>
يمكن أن يحتوي النموذج على عنصر توضيحي فقط ، وليس العنصر الأول من النموذج ، ولكن يتم عرضه دائمًا فوق الجدول.
الأعمدةفي الجدول ، نظرًا لأن الجدول يتكون من الخط ، فإن تشغيل العمود غير مناسب ، مثل نمط تعريف عمود النموذج. يمكنك استخدام عنصر Colgroup لتحديد المجموعة.
<html> <head> <style> #colryp1 {background-color: red} #colryp2 {background-color: green ؛ = 1> <colorp id = colorp1 span = 2> </ollp> <colorp id = colorp2> </ollowp> <ter> </h> </h> </h> لا td> <td> </td> <td> $ 47 </td> </tr> </table> </body> </html>يحدد المثال أعلاه مجموعة من عمودين. تحدد سمة Colgroup SPAN الإضافات.
<html> <head> <style> #colryp1 {background-color: red} #col3 {background-color: green ؛ border = 1> <colgroup id = colorp1> <col id = col1and2 span = 2/> <col id = color3/> </soltp> <ter> </h> <th> العنوان </th> السعر </h> </tr> <l> <td> 3476896 </td> <td> أول html </td> <td> $ 53 </td> </td> <td> 2489604 </td> <td> أول css </td> <td> $ 47 </td> </table> </body> </html>ما سبق هو كل محتويات هذا المقال.