نتيجة:

القيم محددة بالبكسل (بكسل) أو النسبة المئوية (٪)

○ محاذاة المحتوى في جدول HTML

لمحاذاة المحتوى في جدول HTML استخدم لوضع علامة ينسب "محاذاة"و "Valign" :

محاذاة- محاذاة أفقية للمحتوى في الجدول.
قيم:

• اليسار - دفع المحتوى إلى اليسار (إفتراضي);
• المركز – مجموعة في المركز
• حق - دفع المحتوى إلى الجانب الأيمن

VALIGN- محاذاة رأسية للمحتوى في الجدول.
قيم:

• أعلى – اضغط على المحتوى إلى الأعلى ؛
• قاع – ادفع المحتوى إلى الأسفل ؛
• وسط – ضع المحتوى في المنتصف

نتيجة:

○ كيفية توسيط جدول محاذاة HTML

لتوسيط الجدول ، تحتاج إلى لف الجدول بالعلامة

العلامات الإضافية والرئيسية على الجدول

نتيجة:

لذلك انتهينا من الجداول. الآن يمكنك إنشاء جدول بأي تعقيد بنفسك. عزز هذا الدرس. حاول إنشاء أي جدول بنفسك.
إنني أتطلع إلى رؤيتك في الدرس القادم. اشترك في تحديثات مدونتي.

المنشور السابق
آخر بعد

الفصل 4

جداول HTML

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

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

و

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

أرز . 4.1. مثال نموذجي لجدول HTML

أرز . 4.2. مثال على جدول بلا حدود

إنشاء جداول HTML الأساسية

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

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

يبدأ كل سطر بالعلامة (صف الجدول) وينتهي بالعلامة... يتم تأطير خلية واحدة في صف بواسطة زوج من العلامات و(بيانات الجدول) أو و(رأس الجدول). بطاقة شعار يستخدم عادةً لخلايا رأس الجدول ، و - لخلايا البيانات. يكمن الاختلاف في الاستخدام فقط في نوع الخط المستخدم افتراضيًا لعرض محتويات الخلايا ، بالإضافة إلى موقع البيانات داخل الخلية. محتويات خلايا النوع معروض بالخط العريض والوسطى (ALIGN = CENTER، VALIGN = MIDDLE). الخلايا المحددة بعلامة يعرض البيانات بشكل افتراضي محاذاة إلى اليسار (ALIGN = LEFT) وفي المنتصف (VALIGN = MIDDLE) في الاتجاه الرأسي.

العلامات و لا يمكن أن تظهر خارج وصف صف الجدول ... رموز النهاية, ويمكن حذف. في هذه الحالة ، تكون نهاية الصف أو وصف الخلية هي بداية الصف أو الخلية التالية ، أو نهاية الجدول. علامة الجدول النهائيلا يمكن حذفها.

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

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

بشكل افتراضي ، يتم وضع نص رأس الجدول فوقه (ALIGN = TOP) ويتم توسيطه أفقيًا.

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

هذه المعلومات كافية لبناء جداول أولية. دعنا نعطي مثالاً لجدول بسيط يتكون من صفين وعمودين ، يظهر عرضه في الشكل. 4.3

أرز. 4.Z.مثال على أبسط جدول

عرض الجداول على الصفحة

لنلقِ نظرة على الغرض من المعلمات المختلفة التي يمكن استخدامها في العلامات التي تصف الجداول.

رأس الجدول

علامة رأس الجدول يحتوي على معلمة ALIGN الصالحة الوحيدة ، والتي يمكن أن تكون TOP (العنوان أعلى الجدول) أو الأسفل (العنوان أسفل الجدول). يمكن حذف المعلمة ALIGN ، والتي تتوافق مع القيمة ALIGN = TOP. في الاتجاه الأفقي ، يكون عنوان الجدول دائمًا في المنتصف. قد لا يكون للجدول عنوان. كعنوان للجدول ، في معظم الحالات ، يتم استخدام نص عادي ، والذي يتم تنظيمه بواسطة مواصفات HTML ، ولكن في الواقع ، بين العلامات ويجوز كتابة أي عناصر HTML مستخدمة في القسم ... فيما يلي مثال على إدخال رأس الجدول:

العنوان الموجود أسفل الجدول

إذا تمت إضافة وصف الرأس هذا إلى المثال أعلاه ، فسيتم عرض الجدول كما هو موضح في الشكل. 4.4

أرز. 4.4الجدول مع العنوان

يوفر Microsoft Internet Explorer خيارات إضافية لاختيار موقع العنوان. تقبل المعلمة ALIGN القيم LEFT و CENTER و RIGHT للمحاذاة الأفقية ، جنبًا إلى جنب مع القيم الموضحة أعلاه. لاحظ أن هذه إحدى الحالات النادرة حيث يمكن استخدام معلمة ALIGN المستخدمة على نطاق واسع للمحاذاة الأفقية والرأسية. على سبيل المثال ، ستضمن ALIGN = RIGHT وضع الرأس على اليمين وفوق الجدول. إذا كتبت ALIGN = BOTTOM ، فسيكون العنوان موجودًا أسفل الجدول تمامًا كما في المثال أعلاه. ومع ذلك ، لا يمكن استخدام معلمة ALIGN مرتين في نفس الرأس. لذلك ، قمنا أيضًا بإدخال معلمة خاصة للمحاذاة الرأسية - VALIGN ، والتي تأخذ القيم TOP أو BOTTOM. على سبيل المثال ، بالنسبة لعنوان في أسفل الجدول ، محاذي جهة اليسار ، يبدو الوصف كما يلي:

عنوان سفلي محاذاة إلى اليسار

سيتم عرض الجدول الذي يحتوي على هذا الوصف للعنوان في Microsoft Internet Explorer على النحو التالي (الشكل 4.5). عند المشاهدة في Netscape ، سيتم وضع العنوان افتراضيًا ، أي أعلى الجدول وفي المنتصف أفقيًا.

أرز. 4.5المحاذاة الأفقية لرأس الجدول بواسطة Microsoft Internet Explorer

تعد ميزات المحاذاة الأفقية لرأس الجدول امتدادًا لمواصفات HTML ، ولا يدعمها متصفح Netscape Navigator ، وبالتالي يجب استخدامها فقط عند الضرورة القصوى.

معلمات العلامة

العلامة الرئيسية المستخدمة عند إنشاء الجداول هي العلامة

معلمة الحدود

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

لإضافة إطارات إلى الجدول ، يجب عليك تضمينها في الكود

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

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

يظهر مثال لجدول بحد 10 بكسل في الشكل. 4.6

أرز. 4.6جدول بحد 10 بكسل

لم تتضمن مواصفات HTML 3.0 قيمة لمعلمة BORDER. يتم ذلك فقط في HTML 3.2. على سبيل المثال ، لم تسمح الإصدارات السابقة من Microsoft Internet Explorer بتحديد قيمة عددية.

لاحظ أنه في حالة عدم وجود معلمة BORDER ، لا يتم رسم الإطارات ، ولكن يتم ترك مساحة لها (وهذا ينطبق فقط على Netscape). لا يتغير الحجم الإجمالي للجدول في غياب أو وجود معلمة BORDER (الاستثناء هو حالة تعيين BORDER = 0). وبالتالي ، فإن المسافة الدنيا بين خليتين متجاورتين في هذه الحالات ستكون مساوية لضعف سمك الإطار ، أي 2 بكسل. من الممكن ترتيب الخلايا على مقربة من بعضها البعض قدر الإمكان عن طريق تعيين BORDER = 0 ، مما يعني عدم وجود إطارات. قد لا تدعم بعض المتصفحات تعيين قيمة رقمية لمعامل BORDER ، ثم سيتم تجاهل قيمة تساوي الصفر وسيتم رسم الجدول بحدود.

وهنا بعض الأمثلة:

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

معلمة CELLSPACING

شكل ترميز المعلمة: CELLSPACING = num ، حيث num هي القيمة العددية للمعامل بالبكسل ، والتي لا يمكن حذفها. تحدد قيمة num المسافة بين الخلايا المتجاورة (بشكل أكثر دقة ، بين إطارات الخلايا) ، أفقيًا وعموديًا. بشكل افتراضي ، من المفترض أن تكون القيمة اثنين. لاحظ أنه في أنظمة النشر ، يكون لخلايا الجدول المجاورة حد مشترك. في جداول HTML ، بشكل افتراضي ، يتم ترك مسافة بينها ، كما يمكن رؤيته بوضوح في الشكل أعلاه (الشكل 4.6). إذا قمت بتعيين CELLSPACING = 0 ، فسيتم دمج حدود الخلايا المجاورة وإنشاء انطباع بشبكة واحدة من الجدول (الشكل 4.7).

أرز. 4.7طاولة مع CELLSPACING = 0

معلمة CELLPADDING

تدوين المعلمة مشابه لـ CELLSPACING. تحدد قيمة num مقدار المساحة الخالية (المساحة المتروكة) بين حد الخلية والبيانات الموجودة داخل الخلية. بشكل افتراضي ، من المفترض أن تكون القيمة واحدة. يمكن أن يتسبب تعيين معلمة CELLPADDING على الصفر في أن تلمس بعض أجزاء نص الخلية حدودها ، الأمر الذي لا يبدو ممتعًا من الناحية الجمالية.

في التين. يوضح الشكل 4.8 مثال لجدول به CELLPADDING = 10.

أرز. 4.8الجدول مع CELLPADDING = 10

تعمل معلمات CELLPADDING و CELLPACING بشكل مشابه جدًا. بالنسبة لجدول بلا حدود ، يؤدي تغيير معلمة أو أخرى إلى نفس النتيجة. تؤثر كلا المعلمتين على الهوامش المقابلة أفقيًا وعموديًا. لسوء الحظ ، تتم إدارة منفصلة للهوامش الأفقية والعمودية ، على سبيل المثال ، للهوامش من الصور (معلمات HSPACE و VSPACE للعلامة )، غير مزود.

تعمل جميع المعلمات الثلاثة - BORDER و CELLPADDING و CELLPACING بشكل مستقل عن بعضها البعض ، إذا تم حذف أي منها ، فسيتم أخذ قيمتها الافتراضية. على وجه الخصوص ، إذا تم حذف جميع المعلمات المذكورة أعلاه ، فسيكون الحد الأدنى للمسافة بين البيانات من الخلايا المجاورة 6 بكسل (بالنسبة إلى Netscape). تتكون هذه القيمة من وحدتي بكسل لـ CELLSPACING ، وبكسل واحد لـ CELLPADDING ، وبكسل واحد لحد كل خلية. سيتم الحصول على الجدول الأكثر إحكاما بتحديد الوصف التالي:

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

معلمات WIDTH و HEIGHT

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

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

يمكن تعيين معلمات مماثلة للخلايا الفردية. لاحظ أن تحديد قيمة معينة للمعامل ، على سبيل المثال WIDTH = 200 ، لا يعني أن الجدول سيكون له العرض المحدد في أي حال ، ولكنه يحدد فقط العرض الموصى به ، والذي سيتم الحفاظ عليه كلما أمكن ذلك. دعونا نشرح هذا بالأمثلة. يجب ألا يكون هناك جدول ، في ظل الظروف المحددة ، سيكون عرضه أقل من المحدد افتراضيًا. في هذه الحالة ، سيزيد المتصفح عرض الجدول إلى الجدول المطلوب عن طريق توسيع جميع أعمدة الجدول بشكل متناسب. لن يؤدي تضييق منفذ العرض إلى تغيير عرض الجدول وقد يحتاج إلى التمرير أفقيًا لعرضه. إذا كان للجدول عرضًا افتراضيًا أكبر من العرض المحدد ، فسيحاول المتصفح تقليل عرضه ، أولاً ، تقليل عرض الأعمدة الفردية التي يكون العرض المحدد لها أكبر من العرض المطلوب ، وثانيًا ، كسر النص في خلايا منفصلة إلى عدة أسطر مع زيادة ارتفاع الجدول. قد لا توفر هذه الإجراءات الحجم المطلوب للجدول ، وبعد ذلك سيكون لها أصغر عرض ممكن. يتم اتخاذ نفس الإجراءات للجداول التي ليس لها أبعاد عند تضييق إطار العرض.

قد تختلف بعض الخوارزميات المحددة لإعداد الجداول لمختلف المتصفحات.

معلمة محاذاة

معلمة العلامة المحددة

دعنا نعطي مثالاً لجدول به نص ملفوف ، يظهر عرضه في الشكل. 4.9

إن أكثر 43 اسمًا شيوعًا المذكورة تغطي 92٪ من العينة.

أرز. 4.9جدول بلا حدود مع التفاف النص

يتكون هذا المستند من جدول بلا حدود مع معلمة محاذاة ALIGN = LEFT ، والتي تسمح بوضع النص الذي يلي الجدول على يمين الجدول. يتكون الجدول من صف واحد فقط يحتوي على خليتين. تحتوي كل خلية على جزء من قائمة غير مرتبة

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

قرار خاطئ.

دعنا نعطي مثالًا مختلفًا قليلاً لإنشاء مثل هذه الصفحة ، والتي يظهر عرضها في الشكل. 4.10.

أسماء الذكور الأكثر شيوعًا

السكان البالغين من سان بطرسبرج

أبرام الكسندر أليكسي ألبرت اناتولي أندريه أركادي بوريس فاديم عيد الحب فاليري ريحان فيكتور فيتالي فلاديمير فلاديسلاف فياتشيسلاف جينادي جورج هيرمان جريجوري دميتري

يفجيني إفيم إيفان إيغور ايليا جوزيف قسطنطين أسد ليونيد ميخائيل نيكولاي أوليغ بول نفذ رواية سيميون سيرجي ستانيسلاف إدوارد يوري يعقوب

تم الحصول على البيانات المقدمة على أساس تحليل عينة تمثيلية تحتوي على معلومات حول 5000 رجل فوق سن 18 يعيشون في سانت بطرسبرغ. إن أكثر 43 اسمًا شيوعًا المذكورة تغطي 92٪ من العينة. - تكرار حدوث كل من الأسماء الأخرى لا يتعدى 0.3٪



أرز. 4.10.جدول بلا حدود بثلاثة أعمدة

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

تنسيق البيانات داخل جدول

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

,
,

---

، رموز الرأس - من

قبل

، علامات تنسيق الأحرف -<В>, , , , , , ، والعلامات إدراج صور بيانية ، روابط النص التشعبي<А>وهكذا ، على الفور ، نؤكد أن نطاق العلامات المحددة داخل خلية واحدة يقتصر على حدود هذه الخلية ، بغض النظر عن وجود علامة لاحقة. على سبيل المثال ، إذا تم تحديد لون النص داخل خلية - ، حتى لو لم يكن هناك رمز إنهاءأو وضعه عبر عدة خلايا أو صفوف من الجدول ، سينعكس نص الخلية التالية باللون الافتراضي.

تتوفر الخيارات التالية لتنسيق البيانات داخل خلايا الجدول.

معلمات المحاذاة لمحتويات الخلية هي ALIGN و VALIGN. يمكن استخدامها في أكواد , و ... يمكن أن تكون معلمة المحاذاة الأفقية ALIGN LEFT و RIGHT و CENTER (الافتراضي هو LEFT لـ و CENTER لـ ). يمكن أن تكون معلمة المحاذاة الرأسية VALIGN أعلى (أعلى) ، وأسفل (أسفل) ، ووسط (وسط) ، وخط أساس (خط أساس). الافتراضي هو MIDDLE. تضمن محاذاة الخط الأساسي أن يكون نص السطر الفردي في كل الخلايا مرتبطًا بسطر واحد. ضبط خيارات المحاذاة على مستوى الكود يحدد المحاذاة لجميع خلايا هذا الصف ، بينما في كل خلية فردية من الصف يمكن تحديد المعلمات الخاصة بها ، مما يؤدي إلى تجاوز تأثير المعلمات المحددة في .

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

الخلية 1	الخلية 2	الخلية 3
الخلية 4	الخلية 5	الخلية 6

يظهر عرض هذا المثال بواسطة المستعرض في الشكل. 4.11.




أرز. 4.11.محاذاة البيانات في خلايا الجدول

تعمل معلمة NOWRAP على تعطيل القدرة على تقسيم نص الخلية إلى أسطر تلقائيًا. يمكن استخدامها في أكواد , و ... يجب تجنب الاستخدام غير المبرر لهذه المعلمة لأنها يمكن أن تقلل بشكل كبير من القدرة على تغيير حجم الجداول ديناميكيًا ويضعف إدراكها. في معظم الحالات ، يكفي تطبيق NOWRAP للخلايا الفردية التي تتطلب حقًا حظر التفاف الكلمات على سطر جديد. يتم تنفيذ التفاف الكلمات فقط من خلال الفواصل بين الكلمات (المسافات) ، وفي بعض الحالات ، لمنع كسر النص في أماكن معينة ، بدلاً من حرف المسافة ، قم بتعيين رمز المسافة غير الفاصلة (NonBreaking Space). تشمل الأمثلة الحالات التي لا يوصى فيها بوجود فجوة - بين قيمة عددية ووحدة قياس قيمة معينة ؛ بين الاسم الأخير والأحرف الأولى. إذن ، النص 650 كم أو يلتسين ب. يوصى بالكتابة في النموذج 650 كم ويلتسين بي.

يمكن استخدام المعلمات WIDTH و HEIGHT في الرموز و ... بناء الجملة الخاص بهم يشبه بناء جملة هذه المعلمات للعلامة

... تحدد قيمتها عرض أو ارتفاع الخلية التي تتم كتابة هذه المعلمات من أجلها. يمكن تحديد القيم بالبكسل أو كنسبة مئوية من حجم الجدول بأكمله. يسمح Microsoft Internet Explorer فقط بتحديد قيمة WIDTH بالبكسل. نظرًا لأن الجدول عبارة عن بنية متماسكة تتكون من صفوف وأعمدة ، فإن تعيين عرض الخلية يؤثر على عرض العمود بأكمله الذي توجد به الخلية ، ويؤثر تعيين الارتفاع على الخط بأكمله. إذا تم تحديد قيمة العرض في عمود في خلية واحدة فقط ، فإن هذه القيمة تصبح عرض العمود بأكمله. إذا كان هناك العديد من هذه المؤشرات ، فسيتم تحديد القيمة القصوى. تنطبق نفس الخصائص على السلاسل.

تتميز الجداول المعقدة بالحاجة إلى دمج عدة خلايا متجاورة أفقياً أو رأسياً في خلية واحدة. يتم تنفيذ هذه الميزة باستخدام المعلمات COLSPAN (COLiimn SPANning) و ROWSPAN (ROW SPANning) ، المحددة في الرموز

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

في التين. يوضح الشكل 4.17 نتيجة تنفيذ الكود أعلاه ، بالإضافة إلى متغير لعرض مثل هذا الجدول مع الإدخال RULES = GROUPS في العلامة

أو

... شكل الترميز: COLSPAN = num ، حيث num هي قيمة رقمية تحدد عدد الأعمدة لتوسيع الخلية الحالية أفقيًا. يتشابه استخدام المعلمة ROWSPAN ، هنا فقط تحدد عدد الصفوف التي يجب أن تلتقطها الخلية الحالية عموديًا. بشكل افتراضي ، يتم تعيين هذه المعلمات على واحد. الإعداد المتزامن لقيم كلا المعلمتين لخلية واحدة ممكن. قد لا يكون تعيين قيم هذه المعلمات بشكل صحيح مهمة بسيطة للغاية ، خاصة وأن معظم برامج تحرير HTML تسمح لك بالبناء المرئي مع الجيل اللاحق من أكواد HTML فقط لأبسط الجداول. في التين. يوضح الشكل 4.12 مثالاً لعرض جدول ، تم الحصول عليه من كود HTML التالي: خلية تمتد على سطرين خلية تمتد على عمودين الخلية 3 الخلية 4 الخلية 5 الخلية 6 الخلية 7 أرز. 4.12.جدول يحتوي على خلايا تمتد عبر عدة صفوف أو أعمدة يمكن أن يؤدي الإعداد الغامض لقيم معلمات انزلاق الخلايا إلى تداخلها وتعارضها المتبادل ، حيث لا يمكن التنبؤ بالنتيجة. يعد الاستخدام المعتاد للخلايا الممتدة عنوانًا شائعًا لعدة أعمدة أو صفوف متجاورة. فيما يلي مثال على كود HTML (يظهر عرضه في الشكل 4.13) ، حيث يتم تشكيل الخلايا الممتدة بشكل غير صحيح. الخلية 1 الخلية 2 الخلية 3 (مشترك ها ثلاثة خطوط) الخلية 4 الخلية 5 الخلية 6 الخلية 7 (موزعة على عمودين) أرز. 4.13.نتيجة التعريف غير الصحيح للخلايا الموسعة (تراكب النص) تحدد المعلمة BGCOLOR لون الخلفية للجدول بأكمله أو الصفوف أو الخلايا الفردية. قد تحدث في العلامات , , لا يحتوي على أي معلومات أو مسافة واحدة أو أكثر لا يتم التعامل معها على أنها بيانات. يمكن أن تحتوي الخلايا التي تحتوي على بيانات غير مرئية ، على سبيل المثال ، على رمز أو رمز تغذية سطر ، أو أي نص يطابق لون خلفية الخلية. إذا تم عرض الخلايا التي تحتوي على بيانات (حتى لو كانت غير مرئية) بنفس الطريقة بواسطة جميع المتصفحات ، فسيتم عرض الخلايا الفارغة بشكل مختلف. لا يُظهر متصفح Netscape خلية فارغة ، أي أن المكان الذي توجد فيه هذه الخلية سيتم طلاؤه بلون خلفية الصفحة ، وليس بلون خلفية الخلية ، على عكس الخلايا التي تحتوي على بيانات. لم يتم رسم حدود حول الخلايا الفارغة. يظهر مثال لجدول به خلية فارغة في الشكل. 4.15. أرز. 4.15.يتم عرض خلية الجدول الفارغة بشكل مختلف حسب المستعرضات المختلفة يعرض Microsoft Internet Explorer كلتا الخليتين بلون خلفية الخلايا. يوفر مستعرض مثل NSCA Mosaic للمستخدم القدرة على تحديد طبيعة إخراج خلايا الجدول الفارغة عن طريق اختيار الخيارات المناسبة. تتيح لك معرفة هذه الميزات تصميم الجداول التي سيتم عرضها بطريقة مناسبة ، بغض النظر عن المتصفح الذي يختاره المستخدم. في بعض الحالات ، يكفي أن يتم إنشاء خلايا تحتوي على رمز واحد بدلاً من بعض الخلايا الفارغة. محاذاة البيانات في أعمدة الجدول من المشاكل الشائعة عند إنشاء الجداول تعيين خيارات المحاذاة لصفوف أو أعمدة فردية. لمحاذاة محتويات جميع خلايا السطر الحالي ، ما عليك سوى تعيين المعلمات المطلوبة في الكود ... ومع ذلك ، في أغلب الأحيان ، من الضروري ضمان نفس المحاذاة لجميع العناصر في نفس العمود ، لأنه في معظم الحالات ، يحتوي العمود على بيانات متجانسة. في الإصدارات السابقة من HTML ، تم اقتراح استخدام معلمة COLSPEC (مواصفات العمود) لهذا الغرض ، والتي تم تحديدها في العلامة و ... لا تدعم مواصفات HTML هذه الميزة ، لكنها مدعومة من قبل كل من Netscape و Microsoft Internet Explorer. نموذج التسجيل هو نفسه للعلامة ، وهي: BGCOLOR = القيمة ، حيث تكون القيمة هي محتوى اللون بتنسيق RGB أو اسمه. مثال: أو . الجداول المتداخلة يمكن أن تحتوي خلايا الجدول الفردية على أي علامات وبيانات لغة مسموح بها في القسم تقريبًا وثيقة. على وجه الخصوص ، يمكن وضع جدول آخر داخل خلية في الجدول. تسمى هذه الجداول بالجداول المتداخلة. لا تختلف قواعد بنائها عن بناء الجداول ولا تحتاج إلى وصف منفصل. فقط لاحظ أن ليست كل المتصفحات التي تدعم الجداول تعكس بشكل صحيح الجداول المعقدة ذات المستويات المتعددة من التداخل ، لذا يجب توخي الحذر عند استخدامها. فيما يلي مثال لجدول يستخدم مستوى تداخل واحد. مدن منطقة لينينغراد ح - عدد سكان المدينة (ألف نسمة ، 1992) P - المسافة من سانت بطرسبرغ (كم) مدن تابعة لسانت بطرسبرغ مدينة ح ص زيلينجوبسك 13.6 50 كولبينو 144.6 26 كرونستادت 45.2 48 لومونوسوف 42.0 40 بافلوفسك 25.4 30 بترودفوريتس 83.8 29 بوشكين 95.1 24 سسترورتسك 34.9 35 كل المدن التابعة الادارة بطرسبورغ ، ديك مدينة مباشرة أرقام الهاتف. المدن الإقليمية مدينة ح ص بوكسيتوغورسك 21.6 محاذاة = يمين> 245 بلخوف 50.3 محاذاة = اليمين> 122 بسيفولوزك 32.9 24 فيبورغ 80.9 130 فيسوتسك 1.0 محاذاة = يمين> 159 غاتشينا 80.9 46 ايفانجورود 11.9 محاذاة = اليمين> 147 كامينوجورسك 5.9 157 Kingisepp 51.5 محاذاة = يمين> 138 كيريشي 53.8 محاذاة = يمين> 115 كيروفسك 23.8 55 لودينوي بول 27.3 محاذاة = يمين> 244 ليجا 41.8 139 (استمرار الجدول) مدينة ح ص ليوبان 4.7 85 لادوجا الجديدة 11.2 محاذاة = يمين> 141 مما يثلج الصدر 22. 9 محاذاة = اليمين> 40 بيكاليفو 25.1 محاذاة = يمين> 246 الدعم 23.1 285 بريمورسك 6.7 137 بريوزيرسك 20.5 محاذاة = اليمين> 145 سفيتوغورسك 15.8 محاذاة = يمين> 201 الأردواز 42.6 محاذاة = يمين> 192 دفيئة الأناناس 57.6 81 تيخفين 72.0 محاذاة = يمين> 200 توسنو 33.8 53 W liscelbypg 12.5 64 أرز. 4.14.مثال على الجداول المتداخلة تظهر نتيجة عرض هذا المثال في الشكل. 4.14. للوهلة الأولى ، يبدو أن المثال لا يحتوي على جدول تداخل. في الواقع ، المستند بأكمله عبارة عن جدول بلا حدود يتكون من عنوان وصف واحد فقط يحتوي على خمس خلايا. يخدم تنظيم مثل هذا الجدول الغرض الوحيد من ترتيب البيانات على الصفحة. يوجد داخل الخلية الأولى جدول آخر ، له عنوان خاص به ويتكون من ثلاثة أعمدة ، متبوعًا بنص محاذي في المنتصف. تحتوي الخليتان الثالثة والخامسة أيضًا على جداول منفصلة. الخليتان الثانية والرابعة فارغتان ، ولا تحتويان على أي بيانات ولديهما معلمة WIDTH واحدة تحدد عرضها. والغرض منها هو تعيين المسافة البادئة بين الخليتين الأولى والثالثة وكذلك الخليتين الثالثة والخامسة التي توجد بها الجداول. هذا هو أحد الخيارات الممكنة لتعيين مثل هذه المسافة البادئة. خيار آخر هو استخدام المعلمة CELLSPACING ، والتي تحدد المسافة بين الخلايا ، ولكن هذه المعلمة تحدد المسافات البادئة الأفقية والعمودية ، وهو أمر غير مطلوب في الوقت الحالي. بالإضافة إلى ذلك ، ستتقلص الخلية الفارغة بالعرض المحدد عندما يتم تضييق منفذ العرض ، على عكس المساحة المحددة بواسطة معلمة CELLSPACING (كما هو الحال مع CELLPADDING). حاول استخدام هذا المثال لتقليل عرض إطار العرض في المتصفح ، أو لزيادة حجم الخط المستخدم لعرض النص ، مما سيؤدي إلى نفس النتائج. سيتم تقليل المسافة بين الجداول إلى الصفر ، مما يجعل من الممكن رؤية جميع المعلومات في نفس الوقت لأطول فترة ممكنة ، ومع ذلك ، لن تؤدي التغييرات الإضافية إلى إتلاف الجدول ، ولكنها ستوفر القدرة على التمرير أفقيًا. وفقًا لمخطط مشابه ، يمكنك تنظيم وضع المعلومات ، الذي لا يتكون من جداول فحسب ، بل يشمل أيضًا صورًا ، وأجزاء من النص ، وما إلى ذلك. ملامح طاولات البناء يناقش هذا القسم بعض الإمكانات المحددة للمتصفحات الفردية ، بالإضافة إلى بعض التفاصيل الدقيقة لبناء الجداول وعرضها. عرض الخلايا الفارغة في الجداول تتمثل إحدى ميزات عرض الجداول بواسطة المستعرضات المختلفة في عرض الخلايا الفارغة. وفقًا لوصف اللغة ، يجب على جميع المتصفحات حشو الأسطر بخلايا فارغة إذا تم تعيين رقمها في أي سطر أقل من باقي الأسطر. بالإضافة إلى ذلك ، يمكن العثور على الخلايا التي لا تحتوي على بيانات في أي مكان في الجدول. يوجد تمييز بين الخلايا الفارغة والخلايا التي تحتوي على بيانات غير مرئية. في الخلايا الفارغة داخل زوج من العلامات و وحدد محاذاة وعرض كل عمود في الجدول. على سبيل المثال ، حدد إعداد colspec = "L40 R50 C80" محاذاة البيانات في الخلايا لثلاثة أعمدة من الجدول: للعمود الأول - LEFT ، وللعمود الثاني - RIGHT وللثالث - CENTER ، بالإضافة إلى عرض كل عمود. مع تطور HTML ، تم إسقاط هذا الخيار ولا يعد حاليًا جزءًا من مواصفات اللغة ولا تدعمه معظم المتصفحات. نتيجة لذلك ، ليس لدى Netscape Navigator أدوات خاصة لحل هذه المشكلة ، والخيار الوحيد هو إما استخدام المحاذاة الافتراضية ، أو تعيين القيم المناسبة في كل خلية ، عند الضرورة. يوفر Microsoft Internet Explorer علامات خاصة - و ... يجب أن تظهر هذه العلامات مباشرة بعد الوصف. قبل أول ظهور للعلامة . معلمات العلامة و يمكن أن يكون هناك SPAN ، الذي يحدد عدد الأعمدة المجاورة التي تتأثر بقيم المعلمات ، و ALIGN ، الذي يحدد المحاذاة الأفقية للبيانات في جميع خلايا العمود المقابل (أو الأعمدة). القيم الصالحة لمعلمة ALIGN هي LEFT و RIGHT و CENTER. القيمة الافتراضية لمعلمة SPAN هي واحدة. بطاقة شعار بالإضافة إلى ذلك ، يسمح لك بتعيين معلمة VALIGN ، التي تحدد المحاذاة الرأسية للبيانات في الخلايا. القيم الصالحة لمعلمة VALIGN هي MIDDLE و TOP و BOTTOM. الفرق بين العلامات و يكمن في حقيقة أن أولهم ، بالإضافة إلى تعيين معلمات محاذاة البيانات للأعمدة ، يدمج أيضًا عدة أعمدة في مجموعة بشكل شرطي. يظهر تأثير هذه المجموعة عند استخدام معلمة RULES الموضحة أدناه. بشكل افتراضي ، تعتبر كافة الأعمدة في الجدول مجموعة واحدة. بطاقة شعار يجب أن تستخدم فقط لتحديد محاذاة البيانات في الأعمدة الفردية في مجموعة. دعنا نعطي مثالا. لنفترض أنك تريد إنشاء جدول يحتوي على 6 أعمدة ، مع محاذاة البيانات الموجودة في الثلاثة أعمدة الأولى إلى اليمين ، والثلاثة التالية في المنتصف. لحل هذه المشكلة ، يجب عليك كتابة الجزء التالي من كود HTML: (بيانات الجدول) تظهر نتيجة عرض هذا الرمز في الشكل. 4.16. أرز. 4.16.جدول بخيارات محاذاة مختلفة للبيانات في مجموعات من الخلايا مثال آخر. افترض أنه في الجدول السابق ، يجب محاذاة العمودين الأولين إلى اليمين ، والثالث - في المنتصف ، ويجب تجميع الأعمدة الثلاثة. يجب أيضًا تجميع الأعمدة الثلاثة التالية معًا ولها نفس محاذاة المجموعة الأولى. لحل هذه المشكلة ، يجب عليك كتابة الجزء التالي من كود HTML: (بيانات الجدول) في هذا المثال ، بعد العلامة

، والتي يمكنك من خلالها رؤية معنى التجمع.

النصيحة

منذ نطاق العلامات

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




أرز. 4.17.جدول مجمعة

ضبط لون حدود الجدول

تتيح لك بعض الخيارات الإضافية ، المخصصة فقط لبرنامج Microsoft Internet Explorer ، تحديد لون حدود الجدول - BORDERCOLOR و BORDERCOLORLIGHT و BORDERCOLORDARK. يمكن تعيين هذه المعلمات في العلامات

, ... يمكن استخدام اسم اللون أو قيمته السداسية العشرية كقيمة لهذه المعلمات. تحدد معلمة BORDERCOLOR لون جميع عناصر حدود الجدول ، وتحدد المعلمتان الأخريان لون حدود المكونات الفردية ، وتتجاوز قيمة BORDERCOLOR. ترسم المعلمة BORDERCOLORLIGHT الحواف اليسرى والعلوية للجدول بأكمله ، وبالتالي ، الحواف اليمنى والسفلى لكل خلية باللون المحدد. تحدد المعلمة الثانية BORDERCOLORDARK ألوان الحواف المعاكسة. نظرًا للجمع بين عمل هذه المعلمات ، سيبدو الجدول مرتفعًا إلى حد ما فوق سطح الصفحة أو متعمقًا. كل هذا يتوقف على مجموعة الألوان المختارة.

ملحوظة

يدعم مستعرض Netscape 4.x أيضًا معلمة BORDERCOLOR.

ضبط صورة الخلفية للجدول

يسمح Microsoft Internet Explorer (و Netscape 4.x) للمعامل BACKGROUND بتعريف صورة الخلفية للجدول بنفس الطريقة التي يستطيع بها مستند HTML بأكمله. يمكن تعيين هذه المعلمة في العلامات

,	و

, , ث

يتيح لك Microsoft Internet Explorer استخدام عدد من العلامات الجديدة لهيكلة الجداول والتحكم بمرونة في عرض الإطارات وخطوط الشبكة.

العلامات

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

و	. علامات هيكلة الجدول

و.

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

بطاقة شعار يمكن العثور عليها عدة مرات في وصف الجدول ، بينما يلزم استخدام علامة النهاية... تؤدي هذه العلامة تجميعًا منطقيًا للبيانات بنفس طريقة العلامة تجميع الأعمدة المتجاورة.

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

يتم التحكم في رسم الإطارات حول الجدول بواسطة معلمة FRAME الخاصة بالعلامة

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

يمكن أن تأخذ معلمة FRAME القيم التالية:

• الصندوق أو الحدود - الإطار مرسوم من الجوانب الأربعة
• فوق - فقط من الجانب العلوي
• أدناه - فقط في الجانب السفلي
• HSIDES - يتم رسم الجانبين السفلي والعلوي
• VSIDES - يتم رسم الجانبين الأيمن والأيسر
• LHS - فقط على الجانب الأيسر
• RHS - فقط على الجانب الأيمن
• فارغ - طاولة بدون إطارات خارجية

تتحكم المعلمة RULES في رسم خطوط الشبكة الداخلية للجدول ويمكن أن تأخذ القيم التالية:

• الكل - جميع الخطوط الداخلية مرسومة
• مجموعات - يتم رسم خطوط فقط تفصل بين المجموعات
• الصفوف - يتم رسم خطوط تفصل بين الخطوط
• COLS - ترسم خطوط تفصل بين الأعمدة
• لا أحد - عدم رسم الخطوط الداخلية

مثال:

.

ملحوظة

لن يتم رسم خطوط الشبكة للجدول والإطارات إلا في حالة وجود معلمة BORDER للعلامة

... إذا كانت هذه المعلمة غائبة أو كانت قيمتها صفرًا ، فستتغيب خطوط الشبكة والإطارات عن أي قيم لمعلمات FRAME و RULES.

فيما يلي مثال على كود HTML كامل يقوم بإنشاء جدول باستخدام القدرات الموصوفة:

مثال على التحكم في الخط المرن
جدول الشبكة

عنوان العمود 1	عنوان العمود 2	عنوان العمود 3
البيانات	البيانات	البيانات
البيانات	البيانات	البيانات
البيانات	البيانات	البيانات
البيانات	البيانات	البيانات
البيانات	البيانات	البيانات
البيانات	البيانات	البيانات
حصيلة	حصيلة	حصيلة




أرز. 4.18رسم مرن لخطوط شبكة الجدول باستخدام متصفح Microsoft Internet Explorer

في هذا المثال ، يتم عرض الشاشة بواسطة المتصفح في الشكل. 4.18 ، يتم عرض أحد الخيارات الممكنة للتحكم في خطوط الشبكة والحدود حول الجدول. يتم رسم حد 5 بكسل حول الجدول (الحدود = S) فقط في الجزء العلوي والسفلي (الإطار = HSIDES). يتم رسم خطوط الشبكة داخل الجدول لفصل مجموعات البيانات (القواعد = المجموعات). يتم تعريف مجموعات البيانات ، أولاً ، من خلال وجود ثلاث علامات ، كل واحدة منها يعلن عمود جدول منفصلمجموعة. الثانية ، العلامات , و<тгоот>قسّم أيضًا بيانات الجدول إلى مجموعات ، والتي تحدد رسم الخطوط الأفقية الداخلية.

تحديد عدد الأعمدة في الجدول

يتيح لك Microsoft Internet Explorer (بالإضافة إلى مستعرض Netscape 4.x) التحديد في العلامة

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

المحاذاة الرأسية للجداول

معلمة العلامة الأخيرة

خاص بـ Microsoft Internet Explorer فقط ، إنه VALIGN ، الذي يحدد المحاذاة الرأسية للجدول بالنسبة للنص. عملها مشابه لتلك الخاصة بالصور.

ملحوظة

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

• للعلامة

يمكن أن تأخذ المعلمة ALIGN القيم LEFT أو RIGHT ، وتعني موقع الجدول ، المحاذاة إلى الحافة اليسرى أو اليمنى ، على التوالي ؛

للعلامة

, ... يعني هذا الزوج أننا أنشأنا صفًا واحدًا في الجدول ، وعدد العلامات التي ستتم كتابتها ، مثل عدد الصفوف.



حسنًا ، في الداخل

نضع الآن زوجًا آخر - ... يعني هذا الزوج أننا أنشأنا عمودًا واحدًا في هذا السطر ، وإذا تمت كتابة عدة td في كل tr ، فسيكون لهذا السطر عدة أعمدة. واضح؟ إذا لم يكن الأمر كذلك ، فلنلقِ نظرة على مثال لكيفية عمل كل شيء هنا ... لنفترض أنني أريد إنشاء جدول للطلاب والدرجات. ثم نكتب ما يلي داخل العلامة :

تأخذ المعلمة ALIGN القيم TOP أو BOTTOM ، وتعني موقع رأس الجدول أعلى أو أسفل الجدول ؛

للعلامات

و	تأخذ المعلمة ALIGN القيم LEFT أو RIGHT أو CENTER ، وتعني محاذاة محتويات الخلية (أو الخلايا) المقابلة في الجدول أفقياً. بديل لعرض الجدول أصبح دعم الجداول سمة شائعة في متصفحات الويب ، لذلك لا يوجد سبب أو لا يوجد سبب لتجنب استخدامها. ومع ذلك ، سننظر في الخيارات الممكنة لتمثيلات البيانات البديلة التي يمكن استخدامها بدلاً من الجداول أو بالإضافة إليها. بعض الطرق الأخرى التي لا تستخدم مفهوم الجداول: استخدام نص منسق مسبقًا. تم استخدام هذه التقنية بشكل تقليدي في الإصدارات المبكرة من HTML ، عندما لم يكن دعم الجدول متاحًا بعد. لم يفقد استخدامه أهميته حتى يومنا هذا ، حيث سيتم عرض هذه النصوص بشكل صحيح بواسطة أي متصفحات ، بما في ذلك النصوص البحتة. باستخدام صورة تحتوي على جدول. يمكن إنشاء الجدول باستخدام أي محرر نصوص أو حتى عرضه بواسطة مستعرض ويب ثم حفظه كصورة بأحد تنسيقات الرسوم. هذا ليس الخيار الأفضل ، لأنه يفقد كل المرونة في تخصيص عرض الجداول ديناميكيًا. بالإضافة إلى ذلك ، يصبح من الضروري تخزين ملف إضافي مع صورة يكون حجمها ، علاوة على ذلك ، أكبر بكثير من حجم النص الذي يصف جدول HTML. من المجالات المحتملة للتطبيق جداول ذات أحجام محددة بدقة ، والتي من غير المقبول اعتماد عرضها على أي عوامل خارجية (الخطوط ، وأنماط تشغيل المتصفح ، وما إلى ذلك). استخدام القوائم بدلا من الجداول. لأبسط الحالات ، بدلاً من تنظيم الجداول ، من الممكن تمامًا التعامل مع أحد أنواع القوائم المتوفرة في HTML. تحضير الطاولات يمكن استخدام أي برامج تحرير لإعداد جداول HTML ، ومعظمها يحتوي على أدوات لإنشاء الجداول بشكل مرئي. دعنا نعطي مثالاً على إعداد جدول في محرر HotDog Professional. لإنشاء جدول ، ما عليك سوى تحديد عنصر الجداول من قائمة "إدراج" ، وبعد ذلك يظهر مربع الحوار في الشكل. 4.19 يتكون إنشاء الجدول من ملء الحقول المناسبة في النافذة. بعد تحديد عدد الصفوف والأعمدة في الجدول ، يمكنك المتابعة مباشرة لملء الخلايا الفردية في الجدول ، والتي ستظهر في نفس مربع الحوار. يحتوي مربع الحوار على زر معاينة ، يتيح لك النقر فوقه عرض الجدول الناتج باستخدام المستعرض المدمج (الشكل 4.20). أرز. 4.19مربع حوار لإنشاء الجداول أرز. 4.20.يظهر الجدول باستخدام المتصفح المدمج بعد الانتهاء من تجهيز البيانات الخاصة بالجدول ، انقر فوق الزر "موافق". ثم سيتم إدراج كود وصف الجدول الذي تم إنشاؤه في مستند HTML المحرر. للمثال الموضح في الشكل. 4.19 ، سيتم إنشاء الكود التالي: (تم حذف جزء من التعليمات البرمجية) رأس الطاولة العمود 1 العمود 2 العمود 3 العمود 4 1 2 3 4 وبالمثل ، يتم حل هذه المشكلة باستخدام مكون Netscape Composer في برنامج Netscape Communicator. في التين. يظهر الشكل 4.21 مربع حوار تحتاج فيه إلى ملء الحقول المطلوبة. لإدخال معلمات علامة إضافية يتم توفير زر HTML إضافي. بعد ملء الحقول في مربع الحوار ، يجب النقر فوق الزر "تطبيق" ومن ثم ستتاح لك الفرصة لملء خلايا الجدول (الشكل 4.22). أرز. 4.21.مربع حوار لتحديد خيارات جدول مؤلف Netscape أرز. 4.22.الموضع الأولي لمؤشر الإدخال في جدول فارغ هو جسم الطاولة. يتكون الجسم من صفوف وأعمدة. يتم تعبئة الجدول سطرا سطرا. كل علامة يخلق خطا جديدا. كذلك في متداخلة تستخدم لاحتواء رأس المجموعة في الجدول ("رأس الجدول" ، لا تخلط بينه وبين الرؤوس). بطاقة شعار تستخدم لتحتوي على "تذييل" الجدول (التذييل). بطاقة شعار تستخدم لاحتواء "جسم" الجدول (الجسم). عنصر يجب استخدامه مرة واحدة فقط في جدول واحد في السياق التالي: كجزء من عنصر يتم إنشاء الأعمدة. يمكن إنشاء أعمدة متعددة. في هذه الحالة ، تحتاج إلى تتبع عدد الأعمدة في كل صف. على سبيل المثال ، إذا كان الصف الأول يحتوي على 5 أعمدة ، فيجب أن تحتوي الصفوف التالية أيضًا على 5 أعمدة. خلاف ذلك ، سوف يطفو الجدول. من الممكن الجمع بين الخلايا. كيف تصنع جدولاً في لغة تأشير النص الفائق دعنا نعطي مثالا ، كود html: مثال على الجدول العمود 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. الآن أنصحك بالانتقال إلى الدرس التالي. . يتم وضع كل صف من الجدول في عنصر ... . يتم وضع خلية رأس الجدول في العنصر (يعرض هذا المحتوى بخط عريض ومتوسط). يتم وضع كل خلية من بيانات الجدول في عنصر . يتم وضع اسم الجدول ، إذا لزم الأمر ، داخل العنصر (عنصر جدول اختياري). أوجه انتباهك إلى حقيقة أنه إذا كنت تخطط لاستخدام هذا العنصر في الجدول الخاص بك ، فيجب أن يتبعه في المستند بعد العنصر مباشرةً ... ... ... .. . دعنا ننتقل إلى الجزء العملي من عمل جدول البيانات: الحدود = "1"> الجدول الابتدائي خلية الرأس 1 خلية الرأس 2 خلية الرأس 3 خلية البيانات 1 سطر 2 خلية البيانات 2 سطر 2 خلية البيانات 3 سطر 2 خلية البيانات 1 سطر 3 خلية البيانات 2 سطر 3 خلية البيانات 3 سطر 3 للتوضيح ، أضفنا سمة حد إلى هذا الجدول بقيمة "1" ، والتي تحدد أنه يجب عرض الحد حول خلايا الجدول. لا يتم استخدام سمة الحدود مطلقًا في HTML ، وفي هذه الحالة يكون استخدام CSS هو الأفضل وسيوفر المزيد من المرونة. كجزء من دراسة HTML ، سوف نتعلم كيفية تكوين الجداول نحويًا ، وعند الدراسة CSS 3في المقال "" سنتعلم كيف نصممهم بطريقة احترافية. نتيجة مثالنا: أعمدة متسلسلة ربط الأعمدة في العناصر (خلية بيانات) أو (خلية العنوان) يمكن إجراؤها باستخدام سمة colspan (يتم تمديد الخلية إلى اليمين بواسطة العدد المحدد من الخلايا). الحدود = "1"> الجدول الابتدائي خلية الرأس 1 خلية الرأس 2 خلية البيانات 1 سطر 2 خلية البيانات 2 سطر 2 خلية البيانات 3 سطر 2 خلية البيانات 1 سطر 3 خلية البيانات 2 سطر 3 خلية البيانات 3 سطر 3 نتيجة مثالنا: سلاسل متسلسلة سلاسل متسلسلة في العناصر أو يُسمح باستخدام سمة rowspan (نطاق الخلايا من أعلى إلى أسفل ويمتد إلى صفوف متعددة - تمدد الخلية لأسفل). الحدود = "1"> الجدول الابتدائي خلية الرأس 1 خلية الرأس 2 rowspan = "2">خلية البيانات 1 سطر 2 خلية البيانات 2 سطر 2 خلية البيانات 2 سطر 3 خلية البيانات 2 سطر 3 خلية البيانات 3 سطر 3 نتيجة مثالنا: خصائص العمود مثال على استخدام السمة span في الأعمدة الفردية للجدول: span = "2" style = "background-color: khaki"> رقم الطلب خدمة السعر ، فرك. المجموع 31337 القراءة عن طريق الأذن 1 000 1 000 نتيجة مثالنا: إذا كنت بحاجة إلى تصميم عمود واحد فقط ، فيكفي تحديد سمة النطاق داخل العنصر رقم الطلب خدمة السعر ، فرك. اللجنة ، فرك. 31337 القراءة عن طريق الأذن 1 000 150 نتيجة مثالنا: تقسيم الجدول إلى أجزاء تُستخدم علامات HTML التالية لتقسيم الجدول إلى أجزاء: بطاقة شعار (كعنصر فرعي (متداخل)) ، إذا تم وضع علامة عليه (يعرّف مجموعة من الأعمدة في جدول) يجب أن يتبع بعد، بعدماهذه العناصر ، ولكن قبلمن أي علامة , و ... بالإضافة إلى العنصر يجب أن يحتوي على علامة واحدة أو أكثر داخل (حاوية لإنشاء سلسلة). العناصر , و لا تؤثر على تخطيط الجدول الافتراضي. ومع ذلك ، باستخدام CSS ، يمكنك تصميم هذه العناصر كيفما تشاء. (اسم الجدول) و style = "background-color: silver"> style = "background-color: coral"> style = "background-color: khaki"> خدمة سعر مجموع 3 000 القراءة عن طريق الأذن 1 000 لعب الناخس 2 000 نتيجة مثالنا. يوم سعيد للجميع ، أصدقائي الأعزاء. كيف يسير الصيف؟ آمل أن يكون الجميع بخير. حسنًا ، سنواصل اليوم تعلم أساسيات لغة تأشير النص الفائق واليوم من المحتمل أن يكون الدرس الأخير حول هذا الموضوع ، لأننا سنغوص بعد ذلك في CSS. لذا ، عند الحديث عن html ، لا يسعني إلا التحدث عن الجداول ، لأنها أيضًا موضوع مهم إلى حد ما. خذ على الأقل نفس WordPress. بشكل افتراضي ، لا يمكن لهذا المحرك إنشاء جدول. تحتاج إما إلى إضافة خاصة (مكون إضافي) أو رمز برنامج خاص (نص برمجي). ولكن يمكننا أن نفعل ما نريد بعلامات بسيطة. بشكل عام ، سأخبرك اليوم بكيفية إنشاء جدول بلغة html ، لأن هذا يمكن أن يساعدك كثيرًا حقًا. أتذكر كيف أنشأت مواقعي الأولى باستخدام تخطيط الجدول ، أي كان الرأس والأشرطة الجانبية والتذييل وكتلة المحتوى مجرد عناصر في الجدول. ذكرت هذا في مقالتي حول. صحيح ، لم يعد من المعتاد اليوم إنشاء مواقع باستخدام الجداول ، لكن هذا لا يعني عدم الحاجة إليها. بل العكس هو الصحيح. الأمر الرائع أيضًا هو أنك لست مضطرًا حتى لرسم أي شيء. كل شيء يتم في مفكرة عادية (بشكل جيد ، أو آخر ، مثل Notepad ++) ، وبسهولة تامة. بشكل عام ، دعنا نستعد للعمل. العلامات الترميز هنا أكثر تعقيدًا قليلاً من العلامات الأخرى ، ولكن من السهل تذكرها. لذلك نحن نشاهد ولا يشتت انتباهنا. يكون أي جدول دائمًا محاطًا بعلامة زوج ... أولئك. تعطي هذه العلامات أمرًا بأن الجدول سيكون موجودًا هنا. يتم وضع علامة مقترنة داخل الجدول

	رياضيات	اللغة الروسية	تاريخ
ميدفيديف	3	5	5
سميرنوف	5	5	5
سوكولوف	3	2	3

ماذا فعلنا هنا؟ وقمنا بعمل أربعة صفوف (tr) ، يحتوي كل منها على أربعة جداول (td). في أول كتلة tr ، كتبنا اسم التخصصات الأكاديمية ، مع ترك العمود الأول فارغًا حتى لا يخالف الجدول.

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



لكن بالذهاب إلى المستند ، نرى أن الجدول ليس مشابهًا تمامًا لما خططنا له. وماذا ينقص هنا؟ هذا صحيح - الحدود. لكن لا تقلق. سأخبرك عن هذا أدناه.

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



ودعونا نرى ما نحصل عليه بفضل هذا. كما قلت ، يتم الآن توسيط هذه الأسماء وتمييزها. هذا هو ما أردنا.



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

صفات

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

الحدود

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

... افعل كما أوضحت لك في المثال أدناه ، أي ، قم بتعيين قيمة حد السمة = "1".



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



الحشو والتباعد (الحشو والتباعد بين الخلايا)

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

Cellpadding = "" - يغير المسافة من الإطار نفسه إلى المحتوى في الخلية. وبالتالي ، تصبح جميع الخلايا في الجدول أكبر. دعنا نكتب هذه السمة في الجدول ، ونضبط القيمة على 5 ، ونرى كيف ستختلف من النسخة الأصلية.

قفزة. ارى؟ زادت المسافة. بهذه الطريقة يمكنك استبدال القيم المرغوبة بنفسك ، وبالتالي توسيع الخلايا.

Cellspacing = "" - يغير المسافة بين خلايا الجدول ويتم قياس قيمها أيضًا بالبكسل. دعنا نحاول تعيين هذه السمة بقيمة 5 أيضًا ونرى ما سيحدث.



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



محاذاة

حسنًا ، أين نحن بدون هذه السمة الرائعة التي تسمح لنا بترتيب كل شيء في أماكن مختلفة؟ تعمل المحاذاة بنفس الطريقة التي تعمل بها مع العلامات الأخرى التي تناولناها سابقًا ولها ثلاثة معاني:

• مركز
• حق

دعنا نكتب كل قيمة ونرى كيف سيتم توزيع الجدول.



حسنا؟ يبدو أن كل شيء يعمل وأعتقد أنه يجب أن يكون واضحًا. ولكن إذا كان لديك أي أسئلة ، فلا تتردد في طرحها.



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

حسنًا ، أنا أنهي درسي لهذا اليوم. لا تنس الاشتراك في تحديثات مدونتي حتى لا تفوتك أي معلومات أو أخبار مهمة. وسنراكم في مقالات أخرى. حظا سعيدا وداعا!

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