تعد الجداول بلا شك أهم عنصر في إنتاج صفحات الويب، لأن صفحات الويب تعتمد عادةً على الجداول لتخطيط وتنظيم العناصر المختلفة، فهي تحدد بشكل مباشر ما إذا كانت صفحة الويب جميلة وما إذا كان تنظيم المحتوى واضحًا. ومع ذلك، غالبًا ما يهمل العديد من الأصدقاء دراسة الجداول ويركزون على الطبقات الأخرى والصور والمؤثرات الخاصة وما إلى ذلك. في الواقع، يمكن أن يؤدي الاستخدام المعقول للجداول إلى تجميل صفحتك بسهولة، وكثيرًا ما نسمع أيضًا أصدقاء يشكون من أن الصفحة التي تم إنشاؤها بواسطة الجداول رتيبة ، خشنة، وقلة التنوع، وكثيرًا ما أسمع الناس يسألون عن كيفية إنشاء حدود جدول بحجم 1 بكسل. في الواقع، في Dreamweaver يمكننا تحسين الجدول الخاص بك بشكل مريح للغاية، وبالتالي جعل صفحة الويب الخاصة بك أكثر جمالًا وصقلًا. سنقدم لك كيفية تحسين الجدول الخاص بك في Dreamweaver في الجوانب الثلاثة التالية.
1. استخدم لوحة الخصائص.
الشكل 1 نحتاج أولاً إلى فهم المعلمات الموجودة في لوحتي خصائص الجدول: CellPad وCellSpace. كما هو موضح في الشكل 1، يشير CellPad إلى المسافة بين خليتين في الجدول، ويشير CellSpace إلى المسافة بين كل خلية والمحتوى الموجود في المنتصف. من خلال تغيير هاتين المعلمتين ومطابقة لون الخلفية، يمكنك بسهولة إنشاء حدود جدول بحجم 1 بكسل.
1. استخدم لوحة Object لإدراج جدول وتحديد عرض الجدول وارتفاعه وصفوفه وأعمدته. لاحظ أن قيم CellPad وCellSpace وBorder الافتراضية للجدول المدرج في Dreamweaver كلها 0 في هذا الوقت. كما هو مبين في الشكل 2؛
الشكل 2
2. حدد حدود الجدول في لوحة الخصائص على أنها 0، وCellPad على أنها 5 (سيؤدي هذا إلى الاحتفاظ بـ 5 بكسل بين المحتوى الموجود في الخلية وحافة الخلية على أنها 1) (سيحتفظ هذا بـ 5 بكسل بين الخلايا)؛ ) 1 تباعد العناصر). كما هو مبين في الشكل 3؛
الشكل 3
3. اضبط لون خلفية الجدول على #999999، كما هو موضح في الشكل 4؛
4. اضبط لون خلفية الخلية على #FFFFFF، كما هو موضح في الشكل 5؛
الشكل 5
5. قم بمعاينة التأثير في المتصفح، يمكننا أن نرى أن الجدول يحتوي على حدود بكسل، كما هو موضح في الشكل 6؛
الشكل 62
: استخدام تداخل الطاولة.
لا يزال المبدأ الرئيسي أعلاه هو أنه يمكننا تحقيق المزيد من التأثيرات باستخدام تداخل الجداول.
1. أولاً نقوم برسم جدول وتحديد قيم وألوان CellPad وCellSpace لهذا الجدول من خلال الرجوع إلى المثال السابق. يظهر التأثير المحدد في الشكل 7؛
الشكل 7 2. بعد ذلك، ارسم جدولًا بصف واحد وعمود واحد آخر، واضبط CellPad=2، وCellSpace=1، كما هو موضح في الشكل 8؛
الشكل 8
3. انقل الجدول الذي تم إنشاؤه في الخطوة الأولى إلى الجدول في الخطوة الثانية. يبدو الجدول الآن بالشكل 9؛
في الشكل 9، نرى أن هذا الجدول يحتوي على إطار خارجي ذو خطين وإطار داخلي ذو خط واحد.
4. قم بتعديل الجدول في الخطوة الثانية إلى صف واحد وعمودين، ثم ضع جدولاً في الخطوة الأولى في كل خلية، وسيبدو الجدول النهائي بالشكل 10؛
أعد تعريف
الشكل 10
، وحدد نمط .tdstyle بشكل منفصل، وتكون المعلمات المحددة كما هو موضح في الشكل 13؛
لاحظ هنا أننا نحدد عرض الحد العلوي والسفلي بـ 1 بكسل، وعرض الحد الأيسر والأيمن بـ 0.
4. يظهر تأثير الجدول النهائي في الشكل 14؛
(صورة 15)
في هذا الوقت، يعرض الجدول تأثيرًا ثلاثي الأبعاد.
6. لا يبدو الجدول أعلاه مثاليًا، ولا توجد حدود على يمين الجدول بأكمله وأسفله. يمكننا تحديد style.table1 آخر، وتحديد الجوانب الأربعة لهذا النمط لتكون 1 بكسل، وإرفاقها
