CSS: تصميم الجدول. أمثلة من التسجيل

جعل الجداول مع CSS - الدرس اهتمام ومسؤولة. نهج لهذه الأعمال تحتاج إلى بكفاءة، مع معرفة كل الأنماط الممكنة. وبالإضافة إلى ذلك، فمن الضروري أن تمتلك الإحساس بالجمال من أجل عدم تخويف زوار إبداعهم.

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

حدود الجدول

CSS تصميم نمط الجدول ينطوي دائما لعبة مع الحدود (الإطار). جميع الجداول الافتراضية غير إطار المخططات. أي أنه يساوي 0 بكسل. ولكن هذا يمكن تصحيحها عن طريق الحدود الممتلكات.

يمكنك تحديد الإطار الخارجي للجدول بأكمله:

الجدول {الحدود: 3PX أسود خالص. }

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

ال، ت {الحدود: أسود خالص 3PX؛}

سمك واللون، يمكنك تحديد أي. نضع في اعتبارنا أن لا تضاعف الحدود عند الربط الخلايا.

لفظة تدل على التسجيل المستمر الصلبة. يمكنك تحديد قيم أخرى.

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

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

الجدول {الحدود بين كبار: 1PX الصلبة الحمراء. }

حتى تتمكن من تحديد إطار لأعلى الجدول فقط. وعلى غرار أي أطراف أخرى، بدلا من مجرد كبار الكتابة: اليمين، اليسار أو أسفل.

رأس الجدول

يمكن تحديد رأس جدول باستخدام علامة <شرح>. هذه العلامة يمكن أن يكون في CSS لتسجيل الكثير من العقارات المعروضة للصقل. تصميم الجدول CSS هو جيد لأنه من الممكن للمناورة العناصر بالطريقة التي تريدها.

يتم عرض هذا اللقب بالطريقة نفسها كمعيار في الكتب (مثل "الجدول 1").

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

الجداول الخلفية

خلفية الجدول يمكن أن يكون أي لون أو نمط. يحدد لون خاصية لون الخلفية. أسماء خصائص تتسق تماما مع الاستخدامات في الكلام. فإنه يسهل تخزين عدة مرات.

اللون يمكن تحديد كاسم، وترميزات مختلفة. وبالإضافة إلى ذلك، يمكنك تحديد ما يلي:

• شفافية - الشفافية.
• وراثة - اللون هو نفسه كما ان من العنصر الأصلي.
• الأولي - الافتراضي.

الخيار مع الشفافية يمكن أن تستخدم في الحالات التي يتم إجراء كافة الجداول في النص في ملف CSS في لون واحد، ولكن في هذه الحالة ليست هناك حاجة.

وبالإضافة إلى ذلك، قد تكون خلفية الصورة. للقيام بذلك، في أسلوب وصفه الممتلكات خلفية الصورة. المسار هو من هذا القبيل:

رابط ( 'URL')

المسار إلى الملف قد يكون إما النسبي أو المطلق.

ويمكن أن يتم ملء أكثر تعقيدا مع التدرج:

• الخطية التدرج ()؛
• شعاعي الانحدار ()؛
• تكرار الخطية التدرج () وتكرار، شعاعي الانحدار () - التدرج المتكررة.

خلية الخلفية

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

بالإضافة إلى التناوب، ويمكنك تحديد عدد من عمود أو صف معين. على سبيل المثال مثل هذا:

• طارق رمضان: الألف الطفل (حتى) {...} - تحديد المتداخلة.
• طارق رمضان: الألف الطفل (1) {...} - دلالة على خصائص صف معين.
• الدفتيريا: الألف الطفل (حتى) {...} - مؤشرا بالتناوب الأعمدة.
• الدفتيريا: الألف الطفل (1) {...} - مؤشرا على خصائص عمود معين.

وعلاوة على ذلك يمكن تحديد تسلسل وأرقام - أول (الدفتيريا: أولا الطفل) أو آخر (الدفتيريا: الماضي والطفل).

الفجوة بين الخلايا

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

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

الحدود انهيار: انهيار

ولكنه يحدث أيضا أن المسافة، على العكس من ذلك، ينبغي زيادة. وعلاوة على ذلك، فإن حجم الفجوات يمكن تحديد فيما بين الأعمدة وبين السطور. للإشارة إلى أن قيمة (تنهار بدلا من ذلك):

الحدود الانهيار: منفصلة

ولكن مثل هذا العمل سوف تشير إلى أنه من الضروري فصل الخلايا. كما كان نصيبهم، أشار خاصية إضافية:

الحدود تباعد: 20px.

إذا كنت ترغب في تحديد مسافة مختلفة بين الصفوف والأعمدة، فإنه يشير إلى أمرين:

الحدود تباعد: 10px20px.

الفرق في المتصفحات

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

ما سبق هو مثال سمك الإطار إلى القيم الرقمية.

على سبيل المثال، سمك إطارات للثوابت.

كما تختلف أنماط الحدود إلى حد كبير.

ولذلك، فإن تطوير نرى دائما نتيجة في متصفحات مختلفة.

في CSS أوصت تصميم الجداول للتحقق من نوع المتصفح. ولا سيما مشكلة كبيرة تستخدم ليكون للمستخدمين مع الإصدارات القديمة من إنترنت إكسبلورر.

يمكن للمطورين متقدمة جدا، وهذا يتوقف على المتصفح للاتصال ملفات CSS مختلفة تماما. وشخص يجعل الاختيار في كل أو بعض نمط معين (الطبقة).

تنشأ معظم المشاكل من الظلال.

CSS: أمثلة تنسيق جدول

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

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

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

حواف يمكن إجراء مدورة. يبدو لطيفا جدا.

استنتاج

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

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

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