يساعد تفريق الجداول من الخلفيات على التأكيد على محتوى الجدول بالنسبة إلى أي شيء آخر على صفحة الويب. لإضافة خلفية جدول ، ستحتاج إلى تعديل ورقة الأنماط المتتالية (CSS) التي تدعم صفحة الويب الخاصة بك.
ابدء
أفضل طريقة لإضافة صورة خلفية إلى جدول هي استخدام CSS
خلفية
خاصية. لتحضير نفسك لكتابة CSS بفاعلية ولتجنب الأخطاء العرضية غير المتوقعة ، افتح صورة الخلفية وقم بتدوين الارتفاع والعرض. ثم قم بتحميل صورتك إلى موفر الاستضافة الخاص بك. اختبر عنوان URL للصورة ؛ أحد الأسباب الأكثر شيوعًا لعدم عرض الصور هو وجود خطأ مطبعي في عنوان URL. بعد الانتهاء من هذه الخطوة ، ضع كتلة نمط CSS في رأس المستند:
table {background: url (" عنوان URL للصورة ") لا تكرار ؛} قم بتعيين عرض وارتفاع الجدول لمطابقة عرض الصورة وارتفاعها. إذا كانت محتويات الجدول أكبر من ارتفاع الصورة وعرضها ، فسيتم عرض صورة الخلفية مرة واحدة فقط. سوف تحدد التعليمات المذكورة أعلاه صورة الخلفية نفسها على كل جدول على الصفحة. إذا كنت ترغب في وضع خلفية على جداول محددة فقط ، فإنك تحتاج إلى استخدام صف دراسي
table.background {background: url (" عنوان URL للصورة ") لا تكرار ؛} قد تحتاج جداول أكبر ، أو جداول تحتوي على مزيد من المحتوى ، إلى تكرار الخلفية حتى يتم ملء الجدول بأكمله. غيّر القيمة في CSS بحيث تتكرر الصورة على المحور الصادي أو المحور السيني أو تكون مبلطة على كليهما. background: url ("URL to image") repeat؛
بشكل افتراضي ، سيتم ترقيم قيمة التكرار ، ولكن يمكنك أيضًا تعيين قيمة التكرار أكرر-X
أو تكرار ذ ستتجاوز أية ألوان خلفية تم تعيينها على خلايا الجدول صورة الخلفية في الجدول. لذلك كن حذرا عند استخدام ألوان الخلفية على الخلايا الخاصة بك جنبا إلى جنب مع صور خلفية الجدول. ستقوم خلفيات الجدول بتعيين جداولك بشكل منفصل عن الصفحة الأساسية. ومع ذلك ، فكر مرتين قبل استخدام هذه التقنية. قد لا يؤدي إدخال صورة محايدة إلى تشتيت الانتباه ، ولكن الصور المعقدة التي تهدف إلى أن تكون جذابة (على سبيل المثال ، إدراج صورة لقط صغير خلف طاولة تشير إلى عمليات تبني الحيوانات الأليفة) قد تبدو غير محترفة ويمكن أن تؤثر على إمكانية قراءة البيانات المجدولة. يجب أن تكون أي صورة تستخدمها مرخصة بشكل صحيح ؛ فقط لأنك تستطيع العثور على صورة على الويب لا يعني أنه يمكنك أن تلائمها لاستخدامك الخاص. احترام حقوق التأليف والنشر!
الخلية 1 الخلية 2 الخلية 1 الخلية 2 …
ضع خلفية على جدول واحد فقط
الطبقة = "الخلفية" style = "width: 400px؛ height: 500px؛>…
السماح للطاولة خلفية الصورة كرر
للبلاط أفقيا أو عموديا ، على التوالي.
ألوان خلفية الخلية منع صورة خلفية الجدول
الاعتبارات