دمج أعمدة جدول HTML. دمج الخلايا. استخدام الخلايا المدمجة عموديا
والآن انتبه جيدًا ونحن ننتقل إلى الموضوع الأكثر صعوبة على الإطلاق، والذي يتضمن إنشاء الجداول. نحن نتحدث عن كيفية دمج الخلايا في جدول HTML.
عند حل مشاكل مماثلة في بعض محرر النصوص، على سبيل المثال، الأكثر شيوعًا هو Word، ثم يفعل كل شيء تقريبًا بنفسه، ما عليك سوى الضغط على الزر المناسب. ولكن إذا تحدثنا عن حل هذه المشكلة في HTML، فكل شيء مختلف هنا. وإذا كنت منتبهًا، فلن تبدو المهمة مرهقة جدًا.
دمج الخلايا في الصفوف
أولاً، سنخبرك بكيفية دمج الصفوف في جدول بتنسيق HTML. السمة سوف تساعد في هذا colspan، والذي يعمل مع علامات مثل
على سبيل المثال، يمكنك تعيين القيمة لهذه السمة 2 . ونتيجة لذلك، فإن الخلية التي تنتمي إليها العلامة تزداد في الاتجاه الأفقي تمامًا 2 مرات، مما أدى إلى إزاحة المجاورة. لكن الخلية النازحة لا تذهب إلى أي مكان، فهي موجودة في الجدول، فقط في عمود جديد تمامًا يجب إزالته.
دعونا نتدرب على كيفية القيام بذلك. لذلك دعونا نبدأ. دعونا نحاول إنشاء جدول مثل هذا:
وفقًا للقواعد الموضحة أعلاه، نحتاج إلى إنشاء صف، وإضافة خلية بسيطة واحدة، ثم في نفس الصف إضافة خلية تحل محل خليتين بسيطتين.
في السطر التالي نحتاج فقط إلى إضافة ثلاثة خلايا بسيطة. يبدو الأمر سهلاً، فلنضع أفكارنا في الكود:
| 1 | 2 | |
| 3 | 4 | 5 |
هذا كل شيء! لا مشكلة كبيرة على الإطلاق!
دمج الخلايا في الأعمدة
يعد دمج الخلايا في الاتجاه الرأسي أكثر صعوبة قليلاً من دمجها في الاتجاه الأفقي. تم حل هذه المشكلة باستخدام السمة com.rowspan، والتي تم تعيينها للعلامات
إذا تم تعيين هذه السمة على 2 ، ثم يزداد حجم الخلية عموديًا وتمتد إلى الصف التالي. تنتقل الخلية الموجودة أسفل الخلية التي يزداد حجمها إلى اليمين، مما يؤدي مرة أخرى إلى إنشاء عمود إضافي. ولإزالته، تحتاج فقط إلى حذف الخلية.
لنقم الآن بإنشاء الجدول التالي:
دعونا نفكر في ما يتعين علينا القيام به. نحتاج إلى إضافة خلية تشغل مساحة رأسية أكبر بمرتين من الخلية البسيطة. ثم أضف خليتين بسيطتين على نفس السطر.
دعنا ننتقل إلى السطر التالي. هنا لدينا بالفعل مكان مزدحمالخلية في الأعلى. دعنا ننتقل إلى القسم التالي ونرى أن كل ما يتعين علينا القيام به في هذا السطر هو إضافة خليتين بسيطتين. دعنا نضعها في الكود:
| 1 | 2 | 3 |
| 4 | 5 |
مرة أخرى، لا شيء معقد.
الانضمام في وقت واحد عموديا وأفقيا في جدول واحد
في المواقف الحقيقية، يتم العثور على جداول من هذا النوع في كثير من الأحيان. جرب ذلك بنفسك، باستخدام المنطق الذي اقترحناه، لإنشاء الجدول التالي باستخدام كود HTML:
إذا كان لا يزال لا يعمل، فإليك الإجابة:
| منتجات | معدل الضريبة | ||
|---|---|---|---|
| من 01.01 إلى 31.01.2015 | من 01.01 إلى 31.01.2016 | من 01/01/2015 | |
| وقود الديزل | 3450 فرك. ل 1 طن | 4150 فرك. ل 1 طن | 3950 فرك. ل 1 طن |
لدمج خليتين أو أكثر في خلية واحدة، استخدم سمات colspan وrowspan الخاصة بالعلامة
مثال 12.3. دمج الخلايا بشكل غير صحيح
| الخلية 1 | الخلية 2 | |
| الخلية 3 | الخلية 4 | |
نتيجة هذا المثاليظهر في الشكل. 12.5.
أرز. 12.5. ظهور خلية إضافية في الجدول
يحدد السطر الأول من المثال ثلاث خلايا، يتم دمج اثنتين منها باستخدام سمة colspan، لكن السطر الثاني يضيف خليتين فقط. ولهذا السبب، تظهر خلية إضافية يتم عرضها في المتصفح. وهو واضح للعيان في الشكل. 12.5.
تم توضيح الاستخدام الصحيح لخاصيتي colspan وrowspan في المثال 12.4.
مثال 12.4. دمج الخلايا عموديا وأفقيا
| المتصفح | إنترنت إكسبلورر | الأوبرا | فايرفوكس | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| المدعومة | لا | نعم | لا | نعم | نعم | نعم | نعم |
وتظهر نتيجة هذا المثال في الشكل. 12.6.
أرز. 12.6. جدول يحتوي على خلايا مدمجة
يحتوي هذا الجدول على ثمانية أعمدة وثلاثة صفوف. يتم دمج بعض الخلايا التي تحمل نقوش "Internet Explorer" و"Opera" و"Firefox" في بعض الأماكن مع خليتين وفي أماكن أخرى بثلاث خلايا. تحتوي الخلية المسماة "المتصفح" على دمج عمودي مطبق.
يبقى أن نتحدث عن ميزة واحدة مثيرة للاهتمام لغة HTML. هذا هو ما يسمى دمج الخلاياالجداول. من الأفضل أن ننظر إلى مثال - طاولة بسيطة، والذي يظهر كود HTML الخاص به في القائمة 5.10.
القائمة 5.10
هذا جدول عادي، خلاياه مرقمة - وهذا سيسهل علينا الأمر في المستقبل. في الشكل. ويبين الشكل 5.2 مظهره في نافذة متصفح الويب.
الآن دعونا نلقي نظرة على الجدول في الشكل. 5.3.
هنا قمنا بدمج بعض الخلايا. يمكن ملاحظة أن الخلايا المدمجة تبدو وكأنها اندمجت في خلية واحدة. كيف تفعل هذا؟
وخاصة لهذا الغرض العلامات و
أرز. 5.2.الجدول الأصلي الذي سيتم دمج خلاياه
أرز. 5.3.الجدول الموضح في الشكل. 5.2 بعد دمج بعض الخلايا (يتم الإشارة إلى الخلايا المدمجة بإضافة أرقامها)
لدمج خلايا متعددة أفقيًا في خلية واحدة، عليك اتباع الخطوات التالية.
1. ابحث في الكود علامة HTML
لنقم بإنشاء الخلايا المدمجة 4 + 5 و12 + 13 + 14 + 15 بنفس الطريقة.
يعد دمج الخلايا عموديًا أكثر صعوبة قليلاً. فيما يلي الخطوات التي يجب عليك اتباعها للقيام بذلك.
1. ابحث عن السطر (العلامة) في كود HTML الذي يحتوي على أول الخلايا المراد دمجها (إذا قمت بعد السطور من الأعلى إلى الأسفل).
2. ابحث عن العلامة في كود هذا السطر
لاحظ أننا قمنا بإزالة العلامة التي أنشأت الخلية السادسة من الصف الثاني لأنها اندمجت مع الخلية الأولى.
عنصر مناسب للغاية. يمكنك أن تفعل أي شيء معهم. وبطبيعة الحال، فإن الغرض الرئيسي هو وضع المعلومات في شكل جدول. لكن مطوري مواقع الويب ذهبوا إلى أبعد من ذلك. في وقت ما، كان من الشائع جدًا استخدام الجداول لإنشاء إطار عمل لموقع الويب. الآن يحاول المحترفون عدم القيام بذلك.
تستخدم الجداول على نطاق واسع بسبب كمية كبيرةصفات. على سبيل المثال، تبين أن خاصية ربط الصفوف أو الأعمدة مفيدة جدًا.
مقدمة في النظرية
في HTML، يتم دمج الخلايا باستخدام سمتين: colspan وrowspan. تم تحديدها للعلامة td.
دعونا نلقي نظرة أولاً على بنية أي جدول قبل أن نتعمق في الموضوع. يحتوي أي جدول على صف، وفيه خلايا. تذكر أنه في البداية يجب أن تحتوي كافة الجداول على نفس عدد الخلايا.
يوضح الشكل أعلاه صفين، يحتوي كل منهما على ثلاث خلايا. هذا جدول عادي إذا قمت بتحديد عدد أقل من الخلايا في أي صف، فسوف "يترهل" الجدول وسيتم عرض كل شيء بشكل غير صحيح.
جدول HTML: دمج الخلايا عموديًا وأفقيًا
يمكنك فقط تحديد عدد أقل من الخلايا أو الصفوف إذا كنت تقوم بدمج شيء ما. ولكن بدلاً من العنصر الذي تمت إزالته، يجب تحديد سمة إضافية في أقرب جار إلى البداية. إذا كنت تجمع بين الأعمدة، فعندئذٍ colspan، وإذا كنت تجمع بين الصفوف، فعندئذٍ يتم استخدام Rowspan. تحدد قيمة السمة عدد العناصر التي سيتم دمجها.
يرجى ملاحظة أنك بحاجة إلى تحديده في العنصر الأقرب إلى البداية. على سبيل المثال، في الصورة أعلاه، إذا كنت تريد دمج الخليتين 1 و2، فيمكنك تحديد سمة colspan في الخلية 1 بقيمة اثنين. ولم يعد حذف الخلية رقم 2 أو 3 مهمًا بعد الآن.
الفكرة هي أن تخبر الخلية بالمساحة التي ستشغلها. القيمة الافتراضية هي 1.
دمج الخلايا عموديًا في جدول HTML يتبع نفس المبدأ. ببساطة سيتم حساب المساحة المشغولة عموديا. انظر الصورة أدناه.
هنا الخلية ذات الرقم 43 تشغل سطرين. للقيام بذلك، حدد سمةrowspan. من السهل أن نتذكر:
- صف - سلسلة.
- عمود - عمود/عمود.
- سبان - جمعية.
حاول مبدعو اللغة تقريبها قدر الإمكان من اللغة البشرية، بحيث يمكن للمرء أن يفهمها بطريقة أو بأخرى حتى دون معرفتها.
في HTML، يمكن إجراء دمج الخلايا في اتجاهين في وقت واحد: عموديًا وأفقيًا. للقيام بذلك، نحدد كلا السمتين في نفس الوقت.
في الشكل أعلاه، هذا هو بالضبط ما يُشار إليه، أنه يمكنك عمل اتحاد: صفوف، وأعمدة، وأعمدة وصفوف في نفس الوقت.
HTML: دمج الخلايا. أمثلة
دعونا نلقي نظرة على أمثلة أكثر تعقيدًا خطوة بخطوة في جداول كبيرة. يوضح الشكل أدناه على اليسار النسخة الأصلية من الجدول العادي. وعلى اليمين يوجد خيار دمج خليتين في الصف الثاني. وهذا يجعل مقارنة كود HTML أكثر وضوحًا وأسهل.
يمكنك أيضًا الجمع بين ثلاث خلايا في المركز. في الحالة الأولى، تم تحديد سمة colspan في الخلية رقم 1. هنا لن يتغير الأول، والثاني سيحتوي على ثلاثة أعمدة مضافة.
إذا كنت تريد دمج كل خلية في صف واحد، فاحذف أربعة tds وحدد colspan = "5" في الخلية الأولى.
كما ترون، في الواقع كل هذا بسيط. لا يوجد شيء معقد. الشيء الرئيسي هو أن تفهم كل شيء بعناية في المرة الأولى المزالقالجداول، ومن ثم ينبغي أن تنشأ أية مشاكل.
الجداول كإطار للموقع
في HTML، لا يتم استخدام دمج الخلايا دائمًا لجداول المعلومات العادية (كما هو الحال في Word أو Excel). غالبًا ما استخدمها مطورو مواقع الويب في الماضي لتخطيط موقع الويب.
على سبيل المثال، فكر في نموذج موقع الويب هذا. هذا التصميم بسيط للغاية وبدائي. ولكن من الممكن هنا إظهار استخدام الاتحاد بشكل صريح.
كان هناك في الأصل جدول مكون من ثلاثة صفوف، كل صف خليتين. وبعد ذلك، لاستيعاب شعار الموقع، تم دمج الخليتين الموجودتين في الصف الأول. في المحصلة النهائية فعلنا الشيء نفسه لوضع "الطابق السفلي".
بفضل هذا، يمكنك وضع عناصر التصميم في مكانها، ولن يتجاوز أي شيء حدودها. إنها مريحة وبسيطة للغاية. لهذا السبب كانت تحظى بشعبية كبيرة. في الوقت الحاضر، يوصى باستخدام علامة div لإنشاء الكتل.
خاتمة
وتذكر أنه في جدول HTML يمكنك دمج الخلايا بأي طريقة تريدها. كل هذا يتوقف على ما تحتاجه وكيف تريد ترتيبه. الشيء الرئيسي هو عدم الخلط. إذا كنت ترغب في إنشاء جدول كبير باستخدام عدد كبيرالجمعيات، يوصى برسم كل شيء أولاً على قطعة من الورق أو في برنامج الرسام. سيكون الأمر أسهل لمصممي التخطيط المبتدئين.
عندما تكتسب الخبرة، يمكنك بسهولة إجراء مثل هذه العمليات في رأسك.
الجداول في HTML لها وظيفتان. الأول هو الجداول نفسها، أي عرض المعلومات على شكل جدول. والثاني هو تخطيط الصفحات. يتم وضع الأجزاء الفردية من المحتوى في خلايا جدول مختلفة، وبالتالي ينتهي بها الأمر في المكان المناسب على الصفحة.
إنشاء جدول
دعونا نلقي نظرة على كيفية إنشاء جدول في HTML. ويتم ذلك باستخدام العلامة
| يضيف خلية إلى صف. لا تنس أنه يجب إغلاق العلامات. على سبيل المثال، لنقم بإنشاء الجدول التالي:
لكي تكون إطارات الجدول مرئية، قم بوضع علامة
|
