نمط حدود جدول HTML. طريقة سهلة لإنشاء حد حول عنصر

الإطارات (معلمات الكتلة)

يتم استخدام قيم هذه الخصائص لتعيين خصائص المنطقة المحيطة بالعنصر.
يمكن تطبيق ذلك على الرموز والصور وما إلى ذلك.

خيارات	المعنى	وصف
لون أعلى الحدود لون يمين الحدود لون الحدود اليسرى لون الحد السفلي لون الحدود	لون (بلا ​​لون إفتراضي)	يحدد لون الجوانب الأربعة للإطارات. إذا استبدلت عنوان URL للصورة بالألوان ، فسوف تكرر نفسها لتشكل حدًا.
أعلى الحدود نمط يمين الحدود نمط يسار الحد نمط الحد السفلي نمط الحدود	لا شيء (افتراضي) صلب مزدوج أخدود ريدج أقحم البداية	يحدد نمط الجوانب الأربعة للإطارات.
أعلى الحد يمين الحدود يسار الحد الحد السفلي الحدود	عرض الإطار، إطار_نمط ، لون (إفتراضي: متوسط ​​، لا شيء ، لا لون)	يحدد خصائص الجوانب الأربعة للإطارات. يعمل هذا بنفس طريقة خصائص المساحة المتروكة (انظر أدناه) ، باستثناء أن الحد مرئي. عرض الإطاريمكن أن تكون متوسطة أو رفيعة أو سميكة أو في وحدات. إطار_نمطلا يمكن أن تكون صلبة أو لا شيء دعوى اللونتُستخدم لتحديد لون تعبئة خلفية العنصر أثناء تحميله ، وكذلك خلف الأجزاء الشفافة من العنصر. إذا قمت بتمرير عنوان الصورة بدلاً من ذلك ، فسيتم تكرار الرسم لملء مخطط الإطار.
عرض أعلى الحد عرض يمين الحد عرض يسار الحد عرض أسفل الحد عرض الحدود	نحيف متوسط ​​(افتراضي) سميك الطول	يحدد عرض الحد حول العنصر. يمكن تحديد كل جانب بواسطة المعلمة المقابلة. يمكنك استبدال إعداد أربع خصائص فردية عن طريق تعيين خاصية واحدة عرض الحدودنفس الشيء بالنسبة لخصائص المسافة البادئة هامش.
ciip	مستطيل (/ أعلى / يمين / أسفل / يسار /) تلقائي (افتراضي)	يحدد مقدار العنصر المرئي. لا يمكن رؤية أي شيء خارج المنطقة المحددة بواسطة هذه المعلمة.
عرض	""، لا أحد "" (إفتراضي)	تحدد هذه المعلمة ما إذا كان سيتم عرض العنصر أم لا.
تطفو	لا شيء (افتراضي) اليسار حق	يحدد أن العناصر الأخرى تتدفق حول العنصر إلى اليسار أو اليمين ، بدلاً من وضعها تحتها. بدعم من العلامات , ...
ارتفاع	تلقائي (افتراضي) الطول	يتم ضبط ارتفاع العنصر وقياسه ، إذا لزم الأمر. يتم إرجاع القيمة كسلسلة تتضمن الوحدات (px ،٪ ، إلخ). تُستخدم الخاصية posHeight للحصول على القيمة الرقمية.
اليسار	تلقائي (افتراضي) الطول فائدة	يضبط الإحداثيات الأفقية للعنصر ، مما يسمح بوضع العناصر ونقلها بشكل صحيح. يتم إرجاع القيمة كسلسلة تتضمن الوحدات (px ،٪ ، إلخ.). يتم استخدام الخاصية posLeft للحصول على القيمة كرقم.

مثال 1:
هذا الخط مسطر بخط منقط.مثال 2: أنواع مختلفة من الإطارات.

1.لا شيء -بلا حدود (حدود: بلا ؛)

2.الصلبة -يوجد حد (حد: 1 بكسل متصل ؛)

مثال 4: إطار بزوايا دائرية.

... في الإقرارات الضريبية ؛
... الشهادات 2-NDFL ؛

تشير جميع المستندات المدرجة إلى رمز OKTMO المكون من 11 رقمًا بدلاً من رموز OKATO المستخدمة مسبقًا.

# اورج { العرض: 80٪؛ الهامش العلوي: 2em ؛ الهامش الأيسر: تلقائي ؛ الهامش الأيمن: تلقائي ؛ نصف قطر الحدود: 10 بكسل 10 بكسل ؛ -موز حدود نصف قطرها: 10 بكسل 10 بكسل ؛ -webkit-border-radius: 10px 10px؛ الحشو: 15 بكسل 20 بكسل 15 بكسل 80 بكسل ؛ الهامش: 0px 0px 0px 0px ؛ -webkit-box-shadow: 2px 2px 3px # 999 ؛ -moz-box-shadow: 2px 2px 3px # 999 ؛ / * اختراق IE min-height * / الحد الأدنى للارتفاع: 40 بكسل ؛ الارتفاع: تلقائي! مهم ؛ الارتفاع: 40 بكسل ؛ الفائض: مرئي ؛ الموقف: نسبي. أسفل: 6 بكسل ؛ اليمين: 6 بكسل ؛ الحدود: 1 بكسل صلب # 7e5a25 ؛ / * اضبط موضع ملف الصورة الخلفية*/ موضع الخلفية: 20 بكسل 50٪ ؛ تكرار الخلفية: لا تكرار ؛ محاذاة النص: ضبط ؛ حجم الخط: 0.9em ؛ لون الخلفية: # e8e3d4 ؛ صورة الخلفية: url (baba.gif) ؛ }

بدءًا من 1 يناير 2014 ، تتم الإشارة إلى رموز OKTMO الجديدة في: ... في الإقرارات الضريبية ؛ ... الشهادات 2-NDFL ؛ ... أوامر الدفع (الحقل 105) ؛ ... إيصال دفع الضرائب والرسوم والرسوم ، نموذج PD-4 ضريبة. تشير جميع المستندات المدرجة إلى رمز OKTMO المكون من 11 رقمًا بدلاً من رموز OKATO المستخدمة مسبقًا.

مثال 5: إطار مؤطر بجداول متداخلة.

AV سوفوروف

الجداول المتداخلة

صورة الجدول 1 حدود سوداء ضيقة (5 بكسل) خيارات الجدول: الجدول -> bgcolor = # 000000 style = "border: 2px solid # a3852f" td -> style = "المساحة المتروكة: 5 بكسل"

مثال 6: حد عمودي.

عرض وارتفاع عناصر الكتلة

خصائص CSS العرضو ارتفاع- ضبط عرض وارتفاع عناصر الكتلة.
يمكن ضبط عرض العنصر وارتفاعه بالطرق التالية:

• تلقاءي- يتم تحديد حجم العنصر من خلال محتواه. (إفتراضي)
• % - يتم تعيين حجم العنصر كنسبة مئوية من ارتفاع / عرض العنصر الأصل.
• مقصف- يتم تعيين حجم العنصر بالبكسل أو أي وحدات قياس أخرى مقبولة في CSS.

مثال:

التحكم في محتوى العنصر

ماذا تفعل بمحتوى عنصر إذا تجاوز حجمه؟

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

ملكية تجاوزيمكن أن يكون لها المعاني التالية:

• مرئي- يتم شد العنصر إلى الحجم المطلوب. (إفتراضي)
• مختفي- محتوى العنصر "مقطوع" ؛ فقط الجزء منه الذي يتم وضعه في العنصر يكون مرئيًا.
• التمرير- يتم إضافة أشرطة التمرير (دائمًا! حتى إذا كان المحتوى مناسبًا للعنصر).
• تلقاءي- يتم إضافة أشرطة التمرير حسب الحاجة.

مثال:

نتيجة

CSS

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

1. عندما تكون ورقة الأنماط بتنسيق ملف منفصل، يمكن توصيله بمستند ويب باستخدام العلامة الموجود في هذا المستند بين العلامات و.
   (بطاقة شعار سيتم تعيين سمة href على عنوان ورقة الأنماط هذه). جميع قواعد هذا الجدول صالحة في جميع أنحاء الوثيقة بأكملها ؛

   
   .....
   
   

2. عندما تكون ورقة الأنماط في ملف منفصل ، يمكن ربطها بمستند ويب باستخدام التوجيهimport ، الموجود في هذا المستند بين العلامات و) مباشرة بعد العلامة
   

3. عندما يتم وصف ورقة الأنماط في المستند نفسه ، يمكن وضعها بين العلامات(والتي بدورها تقع في هذا المستند بين العلامات و). جميع قواعد هذا الجدول صالحة في جميع أنحاء الوثيقة بأكملها ؛

   
   .....
   
   

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

   شراء فيل

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

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

داخل العلامة

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

محاذاة محتويات العمود باستخدام علامة

يعمل في المتصفح متصفح الانترنتولا يعمل فيها متصفح Firefoxوالبعض الآخر.

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

قم بإنشاء فئة نمط ، على سبيل المثال ، تسمى جوهرة وتطبيقها على الخلايا في العمود الأيسر (المثال 3).

مثال 3. التوافق مع الأنماط

أو

... إنها الخلايا التي تحتوي على جميع محتويات الجدول المعروضة على صفحة الويب. إطار الجدول بشكل افتراضي ، يتم تقديم جدول HTML على صفحة الويب بدون حدود ؛ لإضافة حد إلى الجدول ، كما هو الحال بالنسبة لجميع العناصر الأخرى ، يتم استخدام خاصية CSS الحدود. لكن يجب الانتباه إلى حقيقة أنك إذا أضفت حدًا فقط إلى العنصر ، ثم سيتم عرضه حول الجدول بأكمله. لكي يكون لخلايا الجدول حد أيضًا ، ستحتاج إلى تعيين خاصية الحدود للعناصر ، يتم إضافته إلى الحاوية و . الجدول ، th ، td (الحد: 1 بكسل أسود خالص ؛) جربه " الآن كل من الجدول والخلايا لها حدود ، بينما لكل خلية وجدول حدودها الخاصة. نتيجة لذلك ، ظهرت مسافة فارغة بين الإطارات ؛ تتيح لك خاصية تباعد الحدود التحكم في حجم هذه المساحة التي تم تعيينها للجدول بأكمله. بمعنى آخر ، لا يمكنك التحكم في الفجوات بين الخلايا المختلفة بشكل فردي. حتى إذا أزلنا الفجوات بين الخلايا باستخدام القيمة 0 لخاصية تباعد الحدود ، فإن حدود الخلايا ستتلامس مع بعضها البعض ، وتتضاعف. يتم استخدام خاصية طي الحدود لدمج حدود الخلية. يمكن أن يستغرق الأمر قيمتين: منفصل: هو الافتراضي. يتم تعيين الخلايا إلى مسافة قصيرةوبصرف النظر ، كل خلية لها حدودها الخاصة. الانهيار: يربط الإطارات المتجاورة في إطار واحد ، ويتم تجاهل جميع الفجوات بين الخلايا ، وكذلك بين الخلايا وإطار الجدول. اسم اسم العائلة هوميروس عائلة سمبسون زبدة نباتية عائلة سمبسون اسم اسم العائلة هوميروس عائلة سمبسون زبدة نباتية عائلة سمبسون محاولة " حجم الجدول بعد إضافة الإطارات إلى خلايا الجدول ، أصبح من الملاحظ أن محتويات الخلايا كانت قريبة جدًا من الحواف. يمكنك استخدام خاصية المساحة المتروكة لإضافة مسافة بيضاء بين حواف الخلايا ومحتوياتها: Th، td (المساحة المتروكة: 7 بكسل؛) جربها " يعتمد حجم الجدول على محتوياته ، ولكن غالبًا ما تظهر المواقف عندما يكون الجدول ضيقًا جدًا ويصبح من الضروري تمديده. يمكن تغيير عرض الجدول وارتفاعه باستخدام خصائص العرض والارتفاع ، وتعيين الأبعاد المطلوبة إما على الجدول نفسه أو على الخلايا: الجدول (العرض: 70٪ ؛) th (الارتفاع: 50 بكسل ؛) جربه " محاذاة النص بشكل افتراضي ، يكون النص في خلايا رأس الجدول محاذيًا للوسط ، والنص الموجود في الخلايا العادية يكون محاذيًا إلى اليسار ، باستخدام خاصية محاذاة النص ، يمكنك التحكم في المحاذاة الأفقية للنص. تتيح لك خاصية المحاذاة الرأسية CSS التحكم في المحاذاة الرأسية لمحتوى النص. بشكل افتراضي ، يتم محاذاة النص عموديًا لمركز الخلايا. يمكن تجاوز المحاذاة العمودية بإحدى قيم خاصية المحاذاة الرأسية: أعلى: تتم محاذاة النص إلى أعلى الخلية منتصف: محاذاة النص إلى المركز (افتراضي) أسفل: تتم محاذاة النص إلى أسفل الخلية اسم اسم العائلة هوميروس عائلة سمبسون زبدة نباتية عائلة سمبسون محاولة " تبديل لون خلفية صفوف الجدول عند النظر إلى جداول كبيرة تحتوي على العديد من الصفوف التي تحتوي على الكثير من المعلومات ، قد يكون من الصعب تعقب البيانات التي تنتمي إلى صف معين. لمساعدة المستخدمين على التنقل ، يمكنك استخدام لونين مختلفين للخلفية بالتناوب. لإنشاء التأثير الموصوف ، يمكنك استخدام محدد الفئة ، وإضافته إلى كل صف ثاني من الجدول: اسم اسم العائلة موقع هوميروس عائلة سمبسون الآب زبدة نباتية عائلة سمبسون أم بارت عائلة سمبسون ابن ليزا عائلة سمبسون بنت محاولة " يضيف سمة الطبقةلكل سطر ثاني مهمة شاقة إلى حد ما. تمت إضافة الفئة الزائفة nth-child إلى CSS3 لمعالجة هذه المشكلة بطريقة بديلة. يمكن الآن تحقيق تأثير التناوب حصريًا باستخدام CSSدون الحاجة إلى تغيير ترميز HTML للمستند. مع الفئة الزائفة: nth-child ، من الممكن تحديد جميع صفوف الجدول الفردية أو الزوجية باستخدام أحد الكلمات الدالة: زوجي (زوجي) أو فردي (فردي): Tr: nth-child (فردي) (لون الخلفية: # EAF2D3 ؛) جربه " تغيير خلفية الخط عند التمرير هناك طريقة أخرى لتحسين إمكانية قراءة البيانات الجدولية وهي تغيير لون خلفية الصف عند التمرير فوقه. سيساعد هذا في إبراز محتوى الجدول المطلوب وتعزيز الإدراك المرئي للبيانات. تنفيذ هذا التأثير بسيط للغاية ، لذلك تحتاج إلى إضافة: hover pseudo-class إلى محدد صف الجدول وتعيين لون الخلفية المطلوب: Tr: hover (background-color: # E0E0FF؛) جربه " مركز محاذاة الجدول لا يمكن محاذاة جدول HTML مع المركز إلا إذا كان عرض الجدول أقل من عرض العنصر الأصلي. لمحاذاة الجدول في المركز ، تحتاج إلى استخدام خاصية الهامش ، وتعيين قيمتين على الأقل: ستكون القيمة الأولى مسؤولة عن الهامش الخارجي للجدول في الأعلى والأسفل ، والثاني - عن محاذاة تلقائيةتتمحور: الجدول (margin: 10px auto؛) جربه " إذا كنت بحاجة إلى هوامش مختلفة في أعلى وأسفل الجدول ، فيمكنك تعيين خاصية الهامش إلى ثلاث قيم: الأولى ستكون مسؤولة عن الهامش العلوي ، والثانية عن المحاذاة الأفقية ، والثالثة للهامش السفلي: الجدول (الهامش: 10 بكسل تلقائي 30 بكسل ؛) بينما تجعل الخطوط بين الخلايا من السهل تمييز بعض البيانات عن الأخرى ، فإن المسافة البيضاء حول النص تخدم نفس الغرض. ولجعل الجدول بارزًا على صفحات الويب ، قم بإعداده لون محددمعرفتي. في هذه الحالة ، يمكن تعيين العنوان بلون مختلف ، كما هو موضح في الشكل. 1. لتغيير لون خلفية الجدول ، استخدم خاصية background عن طريق إضافتها إلى محدد TABLE. للجمال ، ارسم خطًا في أسفل الجدول باستخدام خاصية border-bottom (مثال 1). مثال 1. إنشاء جدول بدون حدود 2004 2005 2006 الياقوت 43 51 79 الزمرد 28 34 48 ياقوت أزرق 29 57 36 منذ محتوى الوسم يتم محاذاة في البداية مع المركز ، ثم لتغيير هذه الخاصية في هذا المثاليتم تطبيق محاذاة نص خاصية النمط مع قيمة يسار. يمكنك القيام بالعكس وتعيين المحاذاة المركزية للخلايا ... ولكن من الأفضل ترك محتويات العمود الأول الذي يحتوي على أسماء الأحجار بمحاذاة اليسار. لتعيين محاذاة محتوى مختلفة لأعمدة مختلفة ، ضع في اعتبارك طريقتين. الطريقة الأولى هي استخدام العلامة ويعين ، على وجه الخصوص ، محاذاة الأعمدة الفردية (المثال 2). مثال 2. محاذاة مع علامة 2004 2005 2006 الياقوت 43 51 79 الزمرد 28 34 48 ياقوت أزرق 29 57 36 سمة محاذاة العلامة

	2004	2005	2006
الياقوت	43	51	79
الزمرد	28	34	48
ياقوت أزرق	29	57	36

يغير هذا المثال لون الخلفية والمحاذاة لجميع الخلايا حيث تم تعيين سمة class = "jewel". تظهر نتيجة المثال في الشكل. 2.

يتعين على أي مشرف موقع ، نظرًا لنشاطه المهني ، إنشاء عناصر معقدة معينة على الموقع
(على سبيل المثال: التفاف الرسومات بالنص ، وإنشاء أعمدة بنص ، وإصلاح عناصر الموقع).
ومع ذلك ، يحتوي معيار html على عدد صغير من عناصر تخطيط الصفحة القياسية ، ولا يتم عرض جميع العناصر بشكل متساوٍ متصفحات مختلفة... تحاول كل شركة تطوير لغة تأشير النص الفائق الخاصة بها ، وتبتعد أحيانًا عن مفهوم لغة تأشير النص الفائق الأساسي الذي طوره اتحاد WWW.
لذلك ، يجب على مشرف الموقع تجربة العناصر المشتركة بين جميع المتصفحات.
تعد الجداول أكثر ملاءمة لأنها ملائمة لوضع المعلومات في خلايا الجدول.
بالإضافة إلى ذلك ، تحتوي الجداول في html على سمة "border =" 0 "- هذه السمة ذات القيمة" 0 "تخفي حدود الجدول ، أي أن محتويات الخلية تظل مرئية والإطار نفسه غير مرئي.
دعنا الآن نلقي نظرة على مثال لتطوير تصميم جدولي.

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

يجب أن تكون سمة "الحدود" "0". يساوي تباعد الخلايا "2" (كلما زاد الرقم ، كان إطار الجدول أوسع).
تُستخدم سمة "تباعد الخلايا" للإشارة إلى المسافة بين خليتين. في هذه الحالة ، ستشير إلى المسافة بين الجدولين.
املأ الجدول باللون الأسود باستخدام خاصية "bgcolor". بشكل عام ، يمكنك اختيار أي لون آخر ، اعتمادًا على لون إطارك.

تحدد هذه العلامة المكان الذي يجب أن توجد منه المعلومات. في هذا المثال ، نحتاج إلى ترتيب المعلومات بدءًا من أعلى الجدول.

نقوم بإدخال جدول آخر في خلية طاولتنا.

نص

حدد لون خلفية الجدول. في هذه الحالة ، نحتاج إلى خلفية بيضاء.

هذا كل شئ. طاولتنا جاهزة. لدينا الآن جدول بإطار سيعرض نفسه عبر جميع المتصفحات.

أخيرًا ، سأقدم لك كل الكود الذي أنشأناه.

نص

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

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

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

كيف تصنع جدولاً في لغة تأشير النص الفائق

دعنا نعطي مثالا ، كود أتش تي أم أل:

مثال على الجدول

العمود 1

العمود 2

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

الآن دعونا نلقي نظرة فاحصة على جميع سمات العلامة.

.

سمات وخصائص العلامات

إلى علامة الافتتاح

يمكنك كتابة سمات مختلفة.

1. محاذاة الخاصية = "معلمة" - تحدد محاذاة الجدول. يمكن أن يأخذ القيم التالية:

في المثال أعلاه ، قمنا بمحاذاة الجدول في المحاذاة المركزية = "center".

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

... وهكذا ، في خلايا مختلفةستكون المحاذاة مختلفة.

على سبيل المثال

, , , أو

cols - يتم عرض الخط بين الأعمدة

لا شيء - كل الحدود مخفية

الصفوف - يتم رسم الحد بين صفوف الجدول التي تم إنشاؤها من خلال العلامة

12. عرض الخاصية = "رقم" - يحدد عرض الجدول: إما بالبكسل أو بالنسبة المئوية.

13. فئة الخاصية = "class_name" - يمكنك تحديد اسم الفئة التي ينتمي إليها الجدول.

14. نمط الخاصية = "الأنماط" - يمكن تعيين الأنماط بشكل فردي لكل جدول.

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

و نفس الخيارات متاحة بالنسبة لـ سيتم تطبيقه بشكل هرمي على الجميع

أو سلاسل
...		...	... 2. خلفية الخاصية = "URL" - مجموعات صورة الخلفية... بدلاً من عنوان URL ، يجب كتابة عنوان صورة الخلفية. مثال مثال على الجدول العمود 1 العمود 2 تحول في الصفحة إلى ما يلي: في المثال أعلاه ، توجد صورة الخلفية الخاصة بنا في المجلد img (الموجود في نفس الدليل مثل صفحة html) ، وتسمى الصورة fon.gif. لاحظ أنه في العلامة أضفنا style = "color: white؛" ... نظرًا لأن الخلفية سوداء تقريبًا ، بحيث لا يندمج النص مع الخلفية ، فقد جعلنا النص أبيض. 3. الخاصية bgcolor = "color" - تحدد لون خلفية الجدول. كلون ، يمكنك اختيار أي لوحة كاملة (انظر رموز وأسماء ألوان html) 4. حد الخاصية = "رقم" - يحدد سمك حد الجدول. في الأمثلة السابقة ، حددنا الحد = "1" ، مما يعني أن عرض الحد هو 1 بكسل. 5. لون حدود الخاصية = "اللون" - يحدد لون الحدود. إذا كانت الحدود = "0" ، فلن يكون هناك حد ولن يكون لون الحد منطقيًا. 6. خاصية الحشو الخلوي = "رقم" - المسافة البادئة من الإطار إلى محتوى الخلية بالبكسل. 7. تباعد خلايا الخاصية = "رقم" - المسافة بين الخلايا بالبكسل. 8. أعمدة الخاصية = "العدد" - عدد الأعمدة. إذا لم تحدده ، فسيقوم المتصفح بتحديد عدد الأعمدة بنفسه. الاختلاف الوحيد هو أن تحديد هذه المعلمة من المرجح أن يؤدي إلى تسريع تحميل الجدول. 9. إطار الخاصية = "معلمة" - كيفية عرض الحدود حول الجدول. يمكن أن يأخذ القيم التالية: باطل - لا ترسم الحدود الحدود - الحدود حول الطاولة أعلاه - الحد الموجود أعلى الجدول أدناه - الحد الموجود أسفل الجدول hsides - أضف حدودًا أفقية فقط (أعلى وأسفل الجدول) vsides - ارسم حدودًا عمودية فقط (يسار ويمين الجدول) rhs - الحدود الموجودة على الجانب الأيمن من الجدول فقط lhs - الحد فقط على الجانب الأيسر من الجدول 10. ارتفاع الخاصية = "رقم" - يحدد ارتفاع الجدول: إما بالبكسل أو بالنسبة المئوية. 11. قواعد الخاصية = "معلمة" - مكان عرض الحدود بين الخلايا. يمكن أن يأخذ القيم التالية: الكل - يتم رسم خط حول كل خلية في الجدول المجموعات - يتم عرض الخط بين المجموعات التي تم تشكيلها بواسطة العلامات
. السمات والخصائص
1. محاذاة الخاصية = "معلمة" - تحدد محاذاة خلية فردية في الجدول. يمكن أن يأخذ القيم التالية: اليسار - محاذاة اليسار وسط - محاذاة مركزية حق - محاذاة صحيحة 2. خلفية الخاصية = "URL" - يحدد صورة الخلفية للخلية. بدلاً من عنوان URL ، يجب كتابة عنوان صورة الخلفية. 3. الخاصية bgcolor = "color" - تحدد لون خلفية الخلية. 4. لون حدود الخاصية = "اللون" - يحدد لون حدود الخلية. 5. خاصية char = "letter" - تحدد الحرف الذي يجب إجراء المحاذاة منه. يجب تعيين قيمة سمة المحاذاة على حرف. 6. الخاصية colspan = "number" - تحدد عدد الخلايا الأفقية المراد دمجها. 7. ارتفاع الخاصية = "رقم" - يحدد ارتفاع الجدول: إما بالبكسل أو بالنسبة المئوية٪. 8. عرض الخاصية = "رقم" - يحدد عرض الجدول: إما بالبكسل أو بالنسبة المئوية٪. 9. الخاصية rowspan = "number" - تحدد عدد الخلايا العمودية المدمجة. 10. قيمة الخاصية = "معلمة" - محاذاة رأسية لمحتويات الخلية. أعلى - محاذاة محتويات الخلية لأعلى السطر وسط - وسط المحاذاة أسفل - محاذاة إلى أسفل خط الأساس - محاذاة خط الأساس ملاحظة 1 للعلامة
... معلمات لعلامة واحدة
داخله كيفية منع خلايا الجدول من الالتصاق ببعضها البعض في حالة استخدام حد (حدود الخلايا) وعدم ترك مساحة فارغة بين الخلايا ، فإنها لا تزال ملتصقة ببعضها البعض وتحصل على حد مزدوج. لتجنب ذلك ، تحتاج إلى تسجيل طي الحدود: طي الجدول في ورقة الأنماط: ... عزيزي القارئ ، لقد تعلمت الآن الكثير عن علامة htmlطاولة. الآن أنصحك بالانتقال إلى الدرس التالي.