كل ما تحتاج لمعرفته حول جداول HTML



ستزودك هذه المقالة بمعرفة مفصلة وشاملة لجداول HTML. العلامات المختلفة والتنسيقات التي يمكن القيام بها.

منذ البداية التكنولوجية ، يعد الجدول طريقة شائعة لتخزين البيانات وتصورها. يتم استخدامه في جميع الحقول تقريبًا لتقديم المعلومات النصية والبيانات الرقمية حيث يمكنك بسهولة مقارنة عنصرين أو أكثر. في هذه المقالة ، سوف أناقش الجداول بالترتيب التالي:

print_r إلى السلسلة

ما هو جدول HTML؟

بكلمات بسيطة ، الجدول عبارة عن مجموعة من البيانات ذات الصلة التي تتكون من صفوف وأعمدة. الآن كما نعرف أن HTML هي لغة ترميز قياسية لإنشاء صفحات الويب وعرضها في متصفح الويب. لذلك ، يصبح إنشاء الجداول والعمل معها مهارة فرعية مهمة لإتقان HTML. في هذه المدونة ، سنتعلم كيفية التعامل مع الجداول بتنسيق HTML.





HTML5
لتعريف جدول HTML ، نستخدم

بطاقة شعار. في داخل
علامة ، يمكنك أولاً تحديد صفوف الجدول باستخدام بطاقة شعار. بعد ذلك ، يمكنك تحديد رؤوس الجدول بتنسيق تحتوي العلامات على نص الجدول.

جدول HTML مع رأس وتذييل ونص
بطاقة شعار. يتم تعريف البيانات أو الخلية في الجدول باستخدام بطاقة شعار.

علامات جدول HTML

دعونا أولاً نلقي نظرة على قائمة علامات HTML المستخدمة في إنشاء الجداول. لاحقًا في هذه المدونة ، سنتعلم كيفية استخدامها بمساعدة الأمثلة.



  • :تستخدم لتعريف الجدول
  • :يستخدم لتحديد صف في جدول
  • : يُستخدم لتجميع محتوى الجسم في جدول
  • : يُستخدم لتجميع محتوى التذييل في جدول
  • دعونا الآن نلقي نظرة على نموذج كود HTML لإنشاء جدول.

     
    : تستخدم لتعريف خلية رأس في جدول
  • : يستخدم لتعريف خلية في جدول
  • : تستخدم لتعريف التسمية التوضيحية للجدول
  • : يستخدم لتحديد مجموعة من عمود واحد أو أكثر في جدول للتنسيق
  • : يستخدم لتحديد خصائص العمود لكل عمود داخل العنصر
  • : يستخدم لتجميع محتوى الرأس في جدول
  • اسم عمر
    ابهيشيك 18
    بوب 2. 3

    انتاج:



    الاختلافات في جدول HTML

    • سمات Cellpadding و Cellspacing

    هناك نوعان من السمات تسمى الحشوة الخلوية وتباعد الخلايا والتي يمكنك استخدامها لضبط المساحة البيضاء في خلايا الجدول. تحدد خاصية تباعد الخلايا المسافة بين خلايا الجدول ، بينما تمثل الحشوة الخلوية المسافة بين حدود الخلية والمحتوى داخل الخلية.

    تباعد الخلايا و الحشو
    اسم عمر
    ابهيشيك خمسة عشر
    بوب 2. 3

    • سمات كولسبان وروسبان

    تُستخدم سمة Colspan لدمج عمودين أو أكثر ، بينما تُستخدم صفوف الصفوف لدمج صفين أو أكثر.

    كولسبان وروسبان
    دفعة اسم عمر
    علوم الكومبيوتر ابهيشيك خمسة عشر
    بوب 2. 3
    استراحة

    • ارتفاع الجدول وعرضه

    يمنحك HTML النفوذ لضبط ارتفاع الجدول وعرضه. يتم استخدام سمة العرض والارتفاع لتعيين عرض الجدول وارتفاعه على التوالي. يمكنك إما تحديده من حيث النسبة المئوية للمساحة المتاحة على الشاشة أو من حيث البكسل.

    عرض وارتفاع جدول HTML
    ابهيشيك خمسة عشر
    بوب 2. 3

    • رأس الجدول والنص والتذييل

    يمكن تقسيم الجدول إلى ثلاثة أقسام ، أي رأس ، ونص ، وتذييل. يتشابه رأس وتذييل الصفحة مع رأس وتذييل الصفحة في مستند Word الذي يظل شائعًا لكل صفحة ، بينما يحتوي النص الأساسي على المحتوى الرئيسي.

    تقوم العلامة بإنشاء رأس جدول منفصل ، حيث يقومeastag بإنشاء تذييل جدول منفصل.

رأس الجدول
تذييل الجدول
اسم عمر ماركس

  • خلفيات الجدول والشرح

يمكنك أيضًا تعيين خلفية الجدول. Bgcolor تحدد السمة لون الخلفية للجدول بأكمله وكذلك لخلية واحدة ، بينما تحدد سمة الخلفية صورة خلفية للجدول بأكمله بالإضافة إلى خلية واحدة فقط.

تعمل علامة التسمية التوضيحية كعنوان أو شرح للجدول الذي يتم عرضه في أعلى الجدول.

خلفية جدول HTMLالجدول التوضيحي
العمود 1 العمود 2 العمود 3
الصف 1 الخلية 1 الصف 1 الخلية 2 الصف 1 الخلية 3
الصف 2 الخلية 2 الصف 2 الخلية 3
الصف 3 الخلية 1

شهادة الدراسات العليا مقابل الماجستير

بهذا نصل إلى نهاية هذا المقال. الآن بعد تنفيذ المقتطفات أعلاه ، ستفهم كيفية إنشاء جداول بتنسيق HTML. آمل أن تكون هذه المدونة مفيدة وذات قيمة مضافة لك.

تفحص ال من Edureka ، وهي شركة تعليمية موثوقة عبر الإنترنت مع شبكة تضم أكثر من 250000 متعلم راضٍ منتشرين في جميع أنحاء العالم. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في هذه المقالة وسنعاود الاتصال بك.