درس HTML. دمج الخلايا. دمج الخلايا دمج خلايا الجدول css
سأخبرك بالتفصيل وبالتفصيل عن كيفية دمج الخلايا عموديًا وأفقيًا في الجداول.
في هذه المقالة لن نشرح المبادئ إنشاء لغة تأشير النص الفائقالجداول ، لهذه المعرفة ، خذ دورتنا التدريبية على HTML.
لدمج الخلايا داخل جدول ، هناك سمتان تم تعيينهما للعلامة
يواجه بعض الأشخاص صعوبة في استخدام هذه السمات ودمج الخلايا.
تأخذ سمات colspan و rowspan قيمًا صحيحة من 0 إلى 1000 كمعلمات. فيما يلي مثال صغير لكيفية دمج الخلايا في جدول.
للوهلة الأولى ، يتم تنفيذ هيكل غير معقد للغاية ، ولكن بالنظر إلى الوفرة
نحن نقدم لك عالمية جدا طريقة ملائمةدمج الخلايا.
للبدء ، قم بإعداد فراغ لجدولك المستقبلي ، مع تقديمه مع جميع الخلايا المنفصلة. يمكن أن تكون طاولة 3 × 3, 6 × 10وما إلى ذلك وهلم جرا. سنعطي كل خلية رقمها الخاص ، بدءًا من العد من اليسار إلى اليمين ومن أعلى إلى أسفل.
دعنا نحلل إنشاء الجدول الموضح أعلاه باستخدام هذه الطريقة.
إليك كيف سيبدو رمز قطعة العمل لدينا وقطعة العمل نفسها:
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
من الضروري دمج الخلايا بأرقام 1،2،3 أفقيًا. للقيام بذلك ، في الكود ، الخلية رقم 1 ، أضف سمة colspan بقيمة 3. وحذف
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
نحتاج الآن إلى دمج الخليتين 9 و 13 عموديًا. نقوم بإجراء مماثل - بالنسبة للخلية رقم 9 ، قمنا بتعيين سمة rowspan بقيمة 2 ، ونحذف الخلية بالرقم 13 ، ونكتب أرقام الخلايا التي تتكون منها في الخلية المدمجة.
سيؤدي هذا إلى تغيير رمزنا و مظهرالجداول:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
يبقى دمج 11 ، 12 ، 15 ، 16 خلية في خلية واحدة. للقيام بذلك ، في الخلية ذات الرقم 11 ، نكتب السمات colspan = "2" rowspan = "2". تتم إزالة الخلايا 12 ، 15 ، 16 من التعليمات البرمجية. نكتب في الخلية المدمجة الأرقام 11،12،13،14.
هذه هي الطريقة التي سيتغير بها كودنا ومظهر الجدول:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
هذا كل شيء ، لقد حصلنا على الجدول الأصلي ، والآن يمكن ملء الخلايا بالمعلومات التي ستكون مناسبة لك.
نأمل أن تفهم مبدأ إنشاء جداول معقدة باستخدام دمج الخلايا.
الجداولأفضل مثال هو الجدول البسيط الموضح في القائمة 5-10 بتنسيق HTML.
هذا جدول منتظم ، خلايا منه مرقمة - لذا سيكون الأمر أسهل بالنسبة لنا في المستقبل. على التين. 5.2 يظهر مظهره في نافذة مستعرض الويب.
الآن ضع في اعتبارك الجدول في الشكل. 5.3
هنا يتم دمج بعض الخلايا. يمكن ملاحظة أن الخلايا المدمجة تبدو وكأنها اندمجت في خلية واحدة. كيف افعلها؟
خاصة بالنسبة لهذه العلامات و
لدمج عدة خلايا أفقيًا في خلية واحدة ، اتبع هذه الخطوات.
1. ابحث في الكود علامة HTML (
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 ، من الضروري أحيانًا دمج الخلايا أفقيًا.
في جدول HTML ، يتم تحديد كل خلية بمجموعة من العلامات
بالنسبة لخلايا دمج HTML ، تحتاج إلى إضافة عدد أقل من الخلايا إلى الصف مقارنة بباقي الصفوف وإضافة سمة colspan = "" داخل العلامة
ضع في اعتبارك مثالًا بسيطًا لجدول HTML يتكون من صفين وعمودين (أربع خلايا). يبدو كود HTML الخاص به كما يلي:
| محتوى | محتوى |
| محتوى | محتوى |
| محتوى | |
| محتوى | محتوى |
تمتد الخلية الموجودة في الصف العلوي الآن إلى عمودين. نظرًا لأنه يشغل مساحة خليتين ، فلا يوجد سوى عنصر td واحد في الصف الأول.
يمكنك دمج الخلايا جداول HTMLفي أي من مناطقها مع أي عدد من الأعمدة. أحد أكثر الاستخدامات المفيدة لدمج الخلايا أفقيًا هو إنشاء رؤوس الجدول. إذا كان الجدول يحتوي على n من الأعمدة ، فضع السمة colspan = "n" في الخلية الأولى من الصف العلوي وقم بإزالة الخلايا الأخرى من هذا الصف.
كيفية دمج الخلايا في جدول html عموديًا: rowspan
تسمح لك السمة rowspan = "" بتمديد الخلايا عموديًا
إذا كنت تريد أن تمتد الخلية على عدة صفوف ، أضف rowspan = "" السمة داخل العلامة
ضع في اعتبارك مثالًا بسيطًا لجدول HTML مكون من أربع خلايا مقسمة إلى صفين وعمودين. كود HTML:
| محتوى | محتوى |
| محتوى | محتوى |
لتمديد الخلايا عموديًا في جدول HTML ، أضف rowspan = "2" إلى الخلية الأولى في الصف العلوي ، ثم احذف إحدى الخلايا الموجودة في الصف السفلي. سيبدو رمز HTML الآن كما يلي:
| أشياء | محتوى |
| محتوى |
يمكنك الجمع بين الدمج الأفقي والرأسي للخلايا في نفس الجدول ، كما هو موضح في الشكل على اليسار. يمكن لخلية واحدة أن تمتد على عدة صفوف وأعمدة ، كما هو موضح في الصورة على اليمين. فيما يلي رمز HTML لكل جدول:
طرق لدمج rowspan و colspan لإنشاء جداول HTML مخصصة مع الخلايا التي تمتد على عدة صفوف وأعمدة
| تمتد 3 صفوف | تمتد على 3 أعمدة | ||
| ح | تي | تمتد 2 صفوف | |
| م | إل | ||
| تمتد على 4 أعمدة | |||
| تمتد على صفين وعمودين | تي | |
| أ | ||
| ه | إل | ب |
استخدام الخلايا المدمجة عموديًا
يمكن استخدام دمج خلايا HTML عموديًا في عمود واحد إذا كنت تريد إنشاء رأس لمجموعة من الصفوف المجاورة لهذا العمود. يمكن أن يساعد أيضًا في فصل مجموعات السلاسل حسب النوع.
عند تقديم البيانات على موقع بتنسيق جدولي ، كلما كنت تنظم بياناتك بشكل أفضل في مجموعات فرعية ، كان ذلك أفضل أسهل للمستخدمينتحليل ومعالجة هذه البيانات. تساعدنا فواصل الفضاء في تحليل الأشياء بشكل أكثر كفاءة. يمكنك أيضًا ترميز الأعمدة بالألوان لتسهيل التعرف عليها بصريًا:
ترجمة المقالات « كيفية دمج الخلايا أفقيًا في جدول HTML Colspan», « كيفية دمج الخلايا عموديًا في جدول HTML: Rowspan»أعده فريق مشروع ودود
مرحبًا ، سأخبرك اليوم بكيفية دمج الخلايا في جدول أفقيًا وعموديًا في لغة تأشير النص الفائق.
لن نهتم كثيرًا ، سأبتكر طاولة بسيطةمن ثلاثة صفوف وأربع خلايا في كل صف. يتم تعيين أبسط الأنماط لهم بحيث يتم عرض كل شيء بشكل صحيح.
طاولة(
انهيار الحدود: انهيار.
}
td (
الحدود: 1 بكسل أسود صلب ؛
العرض: 60 بكسل
الارتفاع: 50 بكسل ؛
}
دمج الخلايا أفقيًا
لنبدأ بهذا ، لأن هذه التقنية أسهل. لنفترض أنك تريد دمج أربع خلايا في واحدة في الصف الأول. يمكن القيام بذلك باستخدام سمة colspan:
- نصف السمة colspan = للخلية المرغوبة "عدد الخلايا المراد دمجها"
- احذف جميع الخلايا الإضافية
على سبيل المثال:
انظر إلى هذه القطعة من الكود. نظرًا لأن الخلية الأولى في الصف مضبوطة على colspan 4 ، فإنها ستحل محل أربع خلايا بشكل فعال ، مما يعني أنه يجب إزالة الخلايا الثلاثة التالية في الصف ، فهي ليست ضرورية الآن.
إذا لم تتم إزالتها ، فسيتم تكوين ما يصل إلى 7 خلايا في الصف وبالطبع ستصبح أوسع بكثير من الخليتين التاليتين.
الآن نقوم بإزالتها ونرى أن كل شيء يتم عرضه بشكل مثالي.
الدمج عموديًا
يعد هذا الأمر أكثر تعقيدًا ويتم تنفيذه وفقًا لنفس التقنية ، ولا يتم استخدام سوى سمة تسمى rowspan وتحتاج إلى حذف الخلايا الضرورية في عمود ، وليس صف ، مما يعقد المهمة قليلاً ، ولكن في الواقع كل شيء بسيط إذا فهمت الجوهر بسرعة.
دعنا ندمج الخلايا الأخيرة في الصفين 2 و 3. للقيام بذلك ، اكتب الخلية الأخيرة في الصف 2 rowspan = "2". أنت الآن بحاجة إلى حذف الخلية الأخيرة في الصف 3. إذا لم يتم ذلك ، فستخرج خلايا إضافية مرة أخرى ، مما يفسد مظهر طاولتنا بشكل كبير.
الدمج على الجانبين
يمكن تعيين كلتا السمتين في خلية واحدة. لنرى أيضًا كيف يعمل. نقوم بدمج الخلايا الأولى من الصف 2 في خلية واحدة ، وأول خليتين من الصف 3. في المجموع ، نقوم بدمج 4 خلايا في خلية واحدة.
في هذه الحالة ، ستتلقى الخلية الموجودة في الصف الثاني هاتين السمتين ، في الصف الثاني يتم حذف الخلية التي تليها ، في الصف الثالث - الأول والثاني.
وبالتالي ، يمكنك إنشاء جداول من أي تعقيد ، لقد تحدثت بالفعل قليلاً عن تصميمها في هذه المقالة ، لكن هدفي اليوم كان أن أوضح لك خدعة الانضمام وآمل أن أكون قد فعلت ذلك وفهمت شيئًا ما. إذا كان لديك أسئلة ، اسأل في التعليقات.
دقيقة من انتباهك:نريد جميعًا وضع مواقعنا على استضافة موثوقة. لقد قمت بتحليل المئات من المضيفين ووجدت أفضلهم - هوست آي كيوهناك المئات من المراجعات الإيجابية حوله في الشبكة ، متوسط تقييم المستخدم هو 4.8 من 5. اجعل مواقعك جيدة.
يبقى الحديث عن ميزة واحدة مثيرة للاهتمام لغة 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. ابحث عن العلامة في رمز هذا السطر
لاحظ أننا أزلنا العلامة من الصف الثاني ، مما أدى إلى إنشاء الخلية السادسة ، حيث تم دمجها مع الخلية الأولى.
لا يتم استخدام دمج الخلايا كثيرًا هذه الأيام. ومع ذلك ، في وقت سابق ، خلال ذروة تصميم الويب الجدولي (لتصميم الويب الجدولي ، انظر الفصل 10) ، كان من الصعب العثور على جدول بدون خلايا مدمجة. في كلتا الحالتين ، لا يضر معرفة ذلك.