تبدو جداول HTML الافتراضية مخيبة للآمال إلى حد كبير - أضف إليها بعض تأثيرات CSS ذات المظهر الجميل.

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

يمكنك تصميم الجداول لتكون أكثر جاذبية من الناحية المرئية باستخدام CSS. يمكن أن يؤدي القيام بذلك أيضًا إلى تحسين تجربة المستخدم الإجمالية لموقعك على الويب.

تصميم صفوف وأعمدة مفردة حديثة

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

يمكنك عرض الكود الخاص بهذا التمرين في ملفه جيثب ريبو.

  1. في ملف HTML جديد ، أضف بنية كود HTML الأساسية:
    لغة البرمجة>
    <لغة البرمجة>
    <رأس>
    <عنوان>طاولتي البسيطةعنوان>
    رأس>
    <جسم>

    جسم>
    لغة البرمجة>
  2. داخل الجسم ، أضف علامات الجدول:
    <طاولة>

    طاولة>
  3. يجب أن يحتوي عنصر جدول HTML على صف الجدول علامات لكل صف داخل الجدول. يشيع استخدام الصف العلوي للعناوين. يستخدم
    instagram viewer
    رأس الجدول علامات HTML لتمثل كل عمود في الجدول:
    <آر>
    <ذ>العنوان 1ذ>
    <ذ>العنوان 2ذ>
    <ذ>العنوان 3ذ>
    آر>
  4. أضف المزيد من الصفوف أسفل صف الرأس. يستخدم بيانات الجدول علامات HTML لإضافة البيانات إلى كل خلية في الجدول:
    <آر>
    <td>الصف 1 ، العمود 1td>
    <td>الصف 1 ، العمود 2td>
    <td>الصف 1 ، العمود 3td>
    آر>
    <آر>
    <td>الصف 2 ، العمود 1td>
    <td>الصف 2 ، العمود 2td>
    <td>الصف 2 ، العمود 3td>
    آر>
    <آر>
    <td>الصف 3 ، العمود 1td>
    <td>الصف 3 ، العمود 2td>
    <td>الصف 3 ، العمود 3td>
    آر>
    <آر>
    <td>الصف 4 ، العمود 1td>
    <td>الصف 4 ، العمود 2td>
    <td>الصف 4 ، العمود 3td>
    آر>
    <آر>
    <td>الصف 5 ، العمود 1td>
    <td>الصف 5 ، العمود 2td>
    <td>الصف 5 ، العمود 3td>
    آر>
  5. أضف علامة نمط داخل علامة الرأس. أضف بعض الأنماط العامة إلى الجدول ، مثل الظلال وزوايا الجدول المستديرة والخطوط والهوامش:
    <أسلوب>
    طاولة {
    انهيار الحدود: ينهار;
    عرض: 100%;
    لون: #333;
    خط العائلة: اريال, بلا الرقيق;
    حجم الخط: 14مقصف;
    محاذاة النص: غادر;
    نصف قطر الحد: 10مقصف;
    تجاوز: مختفي;
    مربع الظل: 0 0 20مقصفrgba(0, 0, 0, 0.1);
    هامِش: آلي;
    الهامش العلوي: 50مقصف;
    الهامش السفلي: 50مقصف;
     } 
    أسلوب>
  6. صمم رأس الجدول لمنحه لون خلفية ونصًا محاذيًا:
    طاولةذ {
    لون الخلفية: # ff9800;
    لون: #fff;
    وزن الخط: عريض;
    حشوة: 10مقصف;
    تحويل النص: الأحرف الكبيرة;
    تباعد الحروف: 1مقصف;
    أعلى الحد: 1مقصفصلب#fff;
    الحد السفلي: 1مقصفصلب#ccc;
    }
  7. صمم صفوف الجدول للتبديل بين اللونين الرمادي والأبيض ، ولإضافة تأثير عند التمرير فوق الصف:
    طاولةآر: nth-child (زوجي)td {
    لون الخلفية: # f2f2f2;
    }
    طاولةآر:يحومtd {
    لون الخلفية: #ffedcc;
    }
  8. نمط البيانات داخل خلايا الجدول:
    طاولةtd {
    لون الخلفية: #fff;
    حشوة: 10مقصف;
    الحد السفلي: 1مقصفصلب#ccc;
    وزن الخط: عريض;
    }
  9. افتح ملف HTML لعرض الجدول في متصفح الويب:

تصميم جدول الخلايا متعدد الأسطر

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

  1. قم بإزالة جميع صفوف الجدول الحالية ، مع الاحتفاظ بالصفوف العلوية فقط بالعناوين:
    <طاولة>
    <آر>
    <ذ>العنوان 1ذ>
    <ذ>العنوان 2ذ>
    <ذ>العنوان 3ذ>
    آر>
    طاولة>
  2. قم بإنشاء خلية متعددة الأسطر باستخدام سمة rowspan. سيؤدي هذا إلى توسيع تلك الخلية عبر العدد المحدد من الصفوف.
     القسم 1 
    <آر>
    <tdrowspan="2">خلية متعددة الخطوطtd>
    <td>الصف 1 ، العمود 2td>
    <td>الصف 1 ، العمود 3td>
    آر>
    <آر>
    <td>الصف 2 ، العمود 2td>
    <td>الصف 2 ، العمود 3td>
    آر>
  3. عند إضافة سطر متعدد الخلايا آخر بقيمة مختلفة لجدول الصفوف ، أضف الرقم المقابل لـ صفوف الجدول علامات HTML. هذا لمطابقة ارتفاع أو عدد الصفوف التي تمتد الخلية عبرها. على سبيل المثال ، إذا كانت الخلية بها نطاق 3 صفوف ، فستحتاج إلى إضافة ثلاثة صفوف إلى الأعمدة الأخرى لمحاذاة الجدول بشكل صحيح.
     القسم 2 
    <آر>
    <tdrowspan="3">خلية متعددة الخطوطtd>
    <td>الصف 3 ، العمود 2td>
    <td>الصف 3 ، العمود 3td>
    آر>
    <آر>
    <td>الصف 4 ، العمود 2td>
    <td>الصف 4 ، العمود 3td>
    آر>
    <آر>
    <td>الصف 5 ، العمود 2td>
    <td>الصف 5 ، العمود 3td>
    آر>
  4. افتح ملف HTML لعرض الجدول في متصفح الويب:

دمج تصميم جدول الصف

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

  1. قم بإزالة جميع صفوف الجدول الحالية ، مع الاحتفاظ بالصفوف العلوية فقط بالعناوين:
    <طاولة>
    <آر>
    <ذ>العنوان 1ذ>
    <ذ>العنوان 2ذ>
    <ذ>العنوان 3ذ>
    آر>
    طاولة>
  2. أضف المزيد من صفوف الجدول إلى الجدول. استخدم سمة colspan لدمج أحد الصفوف عبر 3 أعمدة:
     القسم 1 
    <آر>
    <tdأسلوب="لون الخلفية: #ffedcc"كولسبان="3">س 1td>
    آر>
    <آر>
    <td>الصف 2 ، العمود 1td>
    <td>الصف 2 ، العمود 2td>
    <td>الصف 2 ، العمود 3td>
    آر>
    <آر>
    <td>الصف 3 ، العمود 1td>
    <td>الصف 3 ، العمود 2td>
    <td>الصف 3 ، العمود 3td>
    آر>
    <آر>
    <td>الصف 4 ، العمود 1td>
    <td>الصف 4 ، العمود 2td>
    <td>الصف 4 ، العمود 3td>
    آر>
  3. أضف صفًا مدمجًا آخر لفصل أقسام الجدول:
     القسم 2 
    <آر>
    <tdأسلوب="لون الخلفية: #ffedcc"كولسبان="3">س 2td>
    آر>
    <آر>
    <td>الصف 6 ، العمود 1td>
    <td>الصف 6 ، العمود 2td>
    <td>الصف 6 ، العمود 3td>
    آر>
    <آر>
    <td>الصف 7 ، العمود 1td>
    <td>الصف 7 ، العمود 2td>
    <td>الصف 7 ، العمود 3td>
    آر>
    <آر>
    <td>الصف 8 ، العمود 1td>
    <td>الصف 8 ، العمود 2td>
    <td>الصف 8 ، العمود 3td>
    آر>
  4. افتح ملف HTML لعرض الجدول في متصفح الويب:

استخدم الجداول الجذابة لتحقيق أقصى استفادة من بياناتك

تعد جداول HTML طريقة رائعة لعرض البيانات المنظمة على موقع الويب الخاص بك. يمكنك تصميمها باستخدام CSS لتحسين المظهر الافتراضي. ومع ذلك ، تأكد من عدم الانشغال واستخدم الجداول للتخطيط - لأسباب تتعلق بإمكانية الوصول ، احتفظ بها بصرامة للبيانات.

قد يكون إنشاء الجداول الأكبر حجمًا أمرًا شاقًا ، خاصة إذا كنت تستخدم الأعمدة والصفوف التي تمتد. يمكنك كتابة التعليمات البرمجية الخاصة بك لإنشاء الترميز أو الاستفادة من الصيغ الأكثر ودية مثل Markdown.