جدم الجدول HTML بين الخلايا. درس HTML. الجمع بين الخلايا. كيفية العثور على الخلايا المشتركة في Excel

للجمع بين خلايا اثنين وأكثر في واحد يستخدم سمات العلامة colspan و rowowpan وبعد يعين سمة Colspan عدد الخلايا الأفقية. من المحتمل أن تعمل سمة مجموعة الصفوف، مع الفرق الوحيد الذي يجمع بين الخلايا رأسيا. قبل إضافة سمات، تحقق من عدد الخلايا في كل صف حتى تحدث أي أخطاء. وبالتالي، يحل محل ثلاث خلايا، لذلك في السطر التالي يجب أن يكون هناك ثلاث علامة أو تصميم النوع ...... وبعد إذا كان عدد الخلايا الموجودة في كل صف لا يتطابق، فستظهر خلايا فانتوم فارغة. على سبيل المثال 12.3، على الرغم من أن الرمز الصالح، ولكن غير صحيح الذي يتجلى فيه هذا الخطأ فقط.

مثال 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، تحدث جمعية الخلايا مع اثنين من السمات: colspan و rowowpan. يشار إليها ل TD Tag.

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

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

طاولة HTML: جمعية الخلايا رأسيا وأفقيا

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

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

الجوهر هو أنك تحدد الخلية، وكم المساحة التي سيستغرقها. القيمة الافتراضية هي 1.

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

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

• صف - سلسلة.
• العقيد - العمود / العمود.
• سبان - جمعية.

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

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

في الشكل أعلاه، يشار أيضا إلى أنه يمكنك دمج: السلاسل والأعمدة وكلا الأعمدة والصفوف.

أتش تي أم أل: جمعية الخلايا. أمثلة

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

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

إذا كنت ترغب في الجمع بين الخلية بأكملها في السطر إلى واحد، فإننا نقوم بإزالة أربعة TDS وفي الأول تشير إلى Colspan \u003d "5".

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

الجداول كإطار الموقع

في HTML، لا يتم استخدام رابطة الخلايا دائما للجدول العادية مع المعلومات (كلاهما في Word أو Excel). مطورو الموقع في كثير من الأحيان، وقبل استخدامها لتخطيط المواقع.

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

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

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

استنتاج

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

عندما تريد تجربة، يمكنك بسهولة إنتاج هذه العمليات في رأسك.

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

النظر في كيفية دمج الخلايا، على مثال جدول HTML 5x5. أنا استخدم لإنشاء جداول. يبدو الكود الذي تم إنشاؤه بواسطة مصمم الجدول 5x5 مثل هذا:

< div> < table border= "1" cellspacing= "1" cellpadding= "1" width= "100%" > < tbody> < tr> < td align= "left" > C1R1. < td align= "left" > C2R1. < td align= "left" > C3R1. < td align= "left" > C4R1. < td align= "left" > C5R1. < tr> < td align= "left" > C1R2. < td align= "left" > C2R2. < td align= "left" > C3R2. < td align= "left" > C4R2. < td align= "left" > C5R2. < tr> < td align= "left" > C1R3. < td align= "left" > C2R3. < td align= "left" > C3R3. < td align= "left" > C4R3. < td align= "left" > C5R3. < tr> < td align= "left" > C1R4. < td align= "left" > C2R4. < td align= "left" > C3R4. < td align= "left" > C4R4. < td align= "left" > C5R4. < tr> < td align= "left" > C1R5. < td align= "left" > C2R5. < td align= "left" > C3R5. < td align= "left" > C4R5. < td align= "left" > C5R5.

يبدو الجدول نفسه في الأصل هذا:

C1R1.	C2R1.	C3R1.	C4R1.	C5R1.
C1R2.	C2R2.	C3R2.	C4R2.	C5R2.
C1R3.	C2R3.	C3R3.	C4R3.	C5R3.
C1R4.	C2R4.	C3R4.	C4R4.	C5R4.
C1R5.	C2R5.	C3R5.	C4R5.	C5R5.

I. جمعية الخلايا الرأسية
يتم استخدام المعلمة للخلايا الرأسية. مجموعة صفوف.تحديد عدد الخلايا مجتمعة رأسيا.
نحن نجمع من خلية C1R1 و C1R2 في الجدول أعلاه. لهذا تحتاج:

1. للحصول على خلية C1R1 أضف مجموعة صفوف \u003d "2" المعلمة:

C1R2.

الآن يبدو الجدول مثل هذا:

C1R1.	C2R1.	C3R1.	C4R1.	C5R1.
	C2R2.	C3R2.	C4R2.	C5R2.
C1R3.	C2R3.	C3R3.	C4R3.	C5R3.
C1R4.	C2R4.	C3R4.	C4R4.	C5R4.
C1R5.	C2R5.	C3R5.	C4R5.	C5R5.

II. جمعية الخلايا أفقيا
تستخدم المعلمة للجمعية الأفقية للخلايا. كولسبن.تحديد عدد الخلايا مجتمعة أفقيا.
نحن نجمع بين خلية C2R1 و C3R1 و C4R1 المحددة في الجدول أعلاه. لهذا تحتاج:

1. للحصول على خلية C2R1 إضافة المعلمة Colspan \u003d "3":

C3R1. C4R1.

سيتخذ الجدول النموذج التالي:

C1R1.	C2R1.			C5R1.
	C2R2.	C3R2.	C4R2.	C5R2.
C1R3.	C2R3.	C3R3.	C4R3.	C5R3.
C1R4.	C2R4.	C3R4.	C4R4.	C5R4.
C1R5.	C2R5.	C3R5.	C4R5.	C5R5.

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

الجداول من الأفضل أن تنظر في مثال جدول بسيط، ويظهر كود HTML في القائمة 5.10.

هذا طاولة منتظمة ترقيم خلاياها - لذلك سيكون من الأسهل بالنسبة لنا في وقت لاحق. في التين. 5.2 يظهر وجهة نظرها في نافذة متصفح الويب.

والآن النظر في الجدول في الشكل. 5.3.

هنا هو مزيج من بعض الخلايا. يمكن أن نرى أن الخلايا المشتركة كما لو اندمجت في واحدة. كيف افعلها؟

خاصة لهذه العلامات و دعم اثنين من السمات الاختيارية البارزة للغاية. First - Colspan - يجمع بين الخلايا أفقيا، الثانية -rowspan- عمودي.

للجمع بين العديد من الخلايا أفقيا في واحد، تحتاج إلى تنفيذ الخطوات التالية.

1. البحث في التعليمات البرمجية TAG. ()، المقابلة لأول الخلايا المشتركة (إذا قمت بحساب الخلايا من اليسار إلى اليمين).

2. لدخول سمة Colspan إلى ذلك وتعيينه عدد الخلايا المتحدة، بالنظر إلى ذلك أولا منهم.

3. حذف العلامات ( )، وخلق خلايا مشتركة أخرى لهذه السلسلة.

دعنا نجمع بين الخلايا 2 و 3 طاولات (انظر القائمة 5.10). يتم عرض جزء رمز تصحيح يخلق السلسلة الأولى من هذا الجدول في القائمة 5.11.

وبالمثل، نخلق الخلايا المشتركة 4 + 5 و 12 + 13 + 14 + 15.

الجمع بين الخلايا عموديا أصعب قليلا. فيما يلي خطوات القيام بذلك.

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

2. ابحث في رمز علامة الصف هذه ( ) المقابلة لأول الخلايا المشتركة.

3. قم بتضمين السمة Rowspan وتعيينه الخلايا المتكاملة، النظر في الأول منهم.

4. عرض الخطوط اللاحقة وإزالة العلامات منها ( )، وخلق خلايا مشتركة أخرى.

غادرنا الجمع بين الخلايا 1 و 6 من طاولتنا. تحتوي القائمة 5.12 على جزء تصحيح من رمز HTML الخاص به (سيؤثر التصحيحات على الأسطر الأولى والثانية).

نلاحظ أننا أزلنا العلامة من الصف الثاني، مما يخلق خلية سادسة لأنه تم دمجه بالخلية الأولى.

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

مرحبا، اليوم سأخبرك كيف تتجمع في HTML الجمع بين الخلايا في الجدول أفقيا وعموديا.

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

الطاولة (
انهيار الحدود: انهيار؛
}
TD (
الحدود: 1px الصلبة الأسود؛
العرض: 60px؛
الارتفاع: 50 بكسل
}

جمعية الخلايا أفقيا

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

1. نصف السمة colspan المطلوبة \u003d "عدد الخلايا التي تحتاج إلى الجمع بين"
2. إزالة جميع الخلايا الإضافية

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

انظر إلى هذه القطعة من التعليمات البرمجية. نظرا لأن الخلية الأولى في عدد يحدد Colspan 4، في الواقع، فإنه سيعقد أربع خلايا، وبالتالي، يجب إزالتها 3 في بعضها، فهي ببساطة لا تحتاج الآن.

إذا لم يحذفها، فسيتم تشكيل عدد من 7 خلايا وبالطبع، فسيصبح الأمر أوسع بكثير من الاثنين التاليين.

الآن نحذفها ورؤية أن كل شيء يتم عرضه تماما.

جمعية رأسية

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

دعونا نوحد الخلايا الأخيرة في عدد من 2 و 3. على ذلك، القفص الأخير في مجموعة كتب شخصية رقم 2 \u003d "2". الآن تحتاج إلى إزالة الخلية الأخيرة في حوالي 3. إذا لم يتم ذلك، فهذا مرة أخرى، ستخرج الخلايا الإضافية، ما سيذكر بقوة مظهر خارجي طاولتنا.

تركيبة على كلا الطرفين

يمكن طرح خلية واحدة كلا السمات. دعونا نرى كيف يعمل أيضا. نجمع بين الخلايا الأولى من السلسلة 2 في خلية واحدة، والصفوف الأولى - يتم دمج 4 خلايا الإجمالية في واحدة.

في هذه الحالة، ستتلقى الخلية الموجودة في الصف الثاني كلتا السمات، يتم حذف الخلية التالية في الصف الثاني، في الثالث - أول اثنين.

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

رفع انتباهكم: نريد جميعا نشر مواقعهم على استضافة موثوقة. قمت بتحليل مئات العروض ووجدت الأفضل - Hostiq. على الإنترنت مئات تعليقات إيجابية حول هذا الموضوع، فإن متوسط \u200b\u200bتقييم المستخدم هو 4.8 من 5. دع مواقعك تكون جيدة.