تطوير الشبكة يتطور باستمرار ، واحدة من الأدوات الأكثر شعبية لخلق تخطيطات مرنة والتكيف هو كس الشبكة. باستخدام شبكة كس ، يمكنك بسهولة إنشاء شبكات ، والتحكم في موقع العناصر وسلوكها على أجهزة مختلفة.
واحدة من السمات الأكثر فائدة من شبكة المغلق هو القدرة على الجمع بين الخلايا في جدول. بفضل هذه الوظيفة ، يمكننا إنشاء تخطيطات أكثر تعقيدا وكفاءة من خلال دمج عدة خلايا في خلية واحدة كبيرة وإدارة خصائصها.
لدمج الخلايا في جدول باستخدام شبكة كس ، يجب عليك استخدام خاصية مناطق قالب الشبكة. باستخدام هذه الخاصية ، يمكننا تحديد الخلايا التي يجب دمجها في خلية واحدة وأيها يجب تركها منفصلة.
- مشكلة الجمع بين الخلايا في جدول كس
- ميزات الشبكة المغلق عند الجمع بين الخلايا
- استخدام صف الشبكة وعمود الشبكة عند دمج الخلايا
- أمثلة على استخدام صف الشبكة وعمود الشبكة عند دمج الخلايا
- الجمع بين صف الشبكة وعمود الشبكة لدمج الخلايا بطريقة معقدة
- التوافق عبر المتصفح عند استخدام صف الشبكة وعمود الشبكة
- سؤال وجواب
- كيف يمكنني الجمع بين خليتين في جدول باستخدام شبكة?
- هل يمكنني دمج الخلايا الأفقية فقط?
- ماذا يحدث إذا قمت بدمج الخلايا بأنماط أو بيانات مختلفة?
- كيف يمكنني تعيين عرض الخلية المدمجة في الشبكة?
مشكلة الجمع بين الخلايا في جدول كس
عند إنشاء جداول في كس ، نواجه أحيانا الحاجة إلى دمج خليتين أو أكثر في خلية واحدة. على سبيل المثال ، نريد إنشاء رأس جدول يحتوي على خلية واحدة ، ولكنه سيشغل عدة أعمدة أو صفوف.
تنشأ المشكلة لأنه في جدول هتمل العادي يمكننا استخدام سمات روسبان وكولسبان لدمج الخلايا. ومع ذلك ، لا تحتوي جداول كس على مثل هذه السمات. بدلا من ذلك ، يجب أن نستخدم خصائص وقيم كس لتحقيق تأثير الجمع بين الخلايا.
هناك عدة طرق مختلفة لدمج الخلايا في جداول كس ، والتي يمكن تطبيقها اعتمادا على الوضع المحدد:
- باستخدام محدد نث-الطفل-باستخدام محدد نث-الطفل ، يمكننا تحديد خلايا جدول معينة وإخفائها باستخدام خاصية العرض: لا شيء. وبالتالي ، يمكننا دمج عدة خلايا في خلية واحدة.
- استخدام العناصر الزائفة:: قبل و:: بعد-استخدام العناصر الزائفة:: قبل و ::بعد أن نتمكن من إدراج المحتويات في الخلايا الفردية ثم دمجها باستخدام خاصية عمود الشبكة.
- باستخدام خاصية مناطق قالب الشبكة-باستخدام خاصية مناطق قالب الشبكة ، يمكننا تحديد مناطق الجدول ودمج الخلايا داخل هذه المناطق. للقيام بذلك ، نحتاج إلى تحديد أسماء المناطق في كس ثم تطبيقها على الخلايا المقابلة.
يعتمد اختيار طريقة محددة لدمج الخلايا على مدى تعقيد الجدول ومتطلبات التصميم. قد تكون بعض الطرق أكثر ملاءمة في مواقف معينة ، لذلك من المهم التعرف على الخيارات المختلفة واختيار الأنسب لدمج الخلايا في جدول كس.
من المهم أن تتذكر أنه عند استخدام جداول كس ، من الضروري التحقق من التوافق مع المتصفحات المختلفة ، حيث قد لا تعمل بعض الطرق في الإصدارات القديمة من المتصفحات. يوصى أيضا بإجراء اختبار على العديد من الأجهزة ودقة الشاشة للتأكد من عرض الجدول بشكل صحيح.
| الطريقة | الوصف |
|---|---|
| باستخدام محدد الطفل ن | اختيار الخلايا باستخدام محدد نث الطفل وإخفائها باستخدام العرض: لا شيء. |
| باستخدام العناصر الزائفة:: قبل و:: بعد | إدراج المحتوى في الخلايا الفردية ودمجها باستخدام خاصية عمود الشبكة. |
| استخدام خاصية مناطق قالب الشبكة | تحديد مناطق الجدول والجمع بين الخلايا داخلها باستخدام أسماء المناطق. |
ميزات الشبكة المغلق عند الجمع بين الخلايا
واحدة من المزايا الرئيسية لشبكة كس هي القدرة على الجمع بين الخلايا في الجداول. يتيح لك ذلك إنشاء تخطيطات مرنة وقابلة للتكيف ببضعة أسطر من التعليمات البرمجية.
بناء الجملة الأساسي لدمج الخلايا في شبكة كس هو خاصية منطقة الشبكة. يمكنك استخدامه لتحديد اسم منطقة (أو عدة أسماء) ، ثم دمج الخلايا مع هذه الأسماء.
مثال على استخدام خاصية منطقة الشبكة:
.شبكة الحاويات {
عرض: الشبكة;
شبكة-قالب-أعمدة: 1 فر 1 فر 1 فر;
}
.البند-1 {
منطقة الشبكة: رأس;
}
.البند-2 {
منطقة الشبكة: رئيسي;
}
.البند-3 {
منطقة الشبكة: الشريط الجانبي;
}
.البند-4 {
منطقة الشبكة: تذييل الصفحة;
}
.شبكة الحاويات {
عرض: الشبكة;
مناطق قالب الشبكة:
'رأس رأس رأس'
'الشريط الجانبي الرئيسي الرئيسي'
'تذييل تذييل تذييل';
}
في المثال أعلاه ، نقوم بإنشاء شبكة بثلاثة أعمدة وثلاثة صفوف. ثم نستخدم خاصية منطقة الشبكة لتحديد المنطقة لكل خلية.
تتيح لك خاصية مناطق قالب الشبكة تحديد موقع الخلايا المدمجة داخل الشبكة. في هذه الحالة ، نستخدم قالبا يتكون من ثلاثة صفوف وثلاثة أعمدة ، ونقوم بتعيين أسماء لكل منطقة.
ميزة هذا النهج هو أن لدينا السيطرة الكاملة على وضع وترتيب العناصر داخل الشبكة. يمكننا نقل الخلايا ودمجها بحرية لتحقيق المظهر المطلوب ووضع العناصر على الصفحة.
ومن الجدير بالذكر أيضا أن شبكة كس يوفر أساليب أخرى للجمع بين الخلايا ، بما في ذلك الشبكة الصف بداية ، الشبكة الصف نهاية ، الشبكة العمود بداية و الشبكة العمود نهاية الخصائص. يمكن استخدامها لتحديد بداية ونهاية صف أو عمود للخلية وبالتالي دمج عدة خلايا في خلية واحدة.
في الختام ، تجدر الإشارة إلى أن شبكة كس هي أداة قوية لإنشاء تخطيطات معقدة باستخدام الجداول. يوفر العديد من الميزات للتحكم في وضع العناصر والجمع بين الخلايا ، مما يجعله مفيدا بشكل خاص عند إنشاء صفحات ويب سريعة الاستجابة.
استخدام صف الشبكة وعمود الشبكة عند دمج الخلايا
شبكة المغلق لديه القدرة على الجمع بين خلايا الجدول باستخدام خصائص الشبكة الصف والعمود الشبكة. يعد هذا مناسبا جدا عندما تحتاج إلى إنشاء بنية جدول معقدة تتضمن دمج الخلايا.
تتيح لك خاصية صف الشبكة تحديد صفوف الجدول التي يجب وضع الخلايا المدمجة عليها. على سبيل المثال ، إذا كان سيتم دمج الخلايا في الصفين الأول والثاني من الجدول ، فيمكنك تعيين القيمة "1/3" — وبهذه الطريقة ستشغل الخلية المدمجة صفين.
وبالمثل ، تسمح لك خاصية عمود الشبكة بتحديد أعمدة الجدول التي يجب وضع الخلايا المدمجة عليها. على سبيل المثال ، إذا كان سيتم دمج الخلايا في العمودين الأول والثاني من الجدول ، فيمكنك تعيين القيمة "1/3" — وبهذه الطريقة ستشغل الخلية المدمجة عمودين.
لدمج الخلايا ، يجب تحديد صف شبكة وعمود شبكة لكل خلية لدمجها. على سبيل المثال:
- إنشاء جدول باستخدام علامة
- نحدد خلايا الجدول باستخدام
- إضافة أنماط إلى الجدول باستخدام كس.
- لدمج الخلايا ، حدد قيم صف الشبكة وعمود الشبكة.
مثال على استخدام صف الشبكة وعمود الشبكة عند دمج الخلايا:
في هذا المثال ، يتم الجمع بين الخلية الأولى من الجدول في 2 الصفوف و 2 الأعمدة ، والخلايا الثانية والثالثة تحتل صف واحد وعمود واحد لكل منهما.
أمثلة على استخدام صف الشبكة وعمود الشبكة عند دمج الخلايا
شبكة المغلق لديه القدرة على الجمع بين خلايا الجدول باستخدام خصائص الشبكة الصف والعمود الشبكة. هذا مريح للغاية عندما تحتاج إلى إنشاء بنية جدول معقدة مع الخلايا المدمجة. لنلق نظرة على بعض الأمثلة على استخدام هذه الخصائص.
مثال 1:
| لا | . الاسم الأول | اسم العائلة | المهنة |
|---|---|---|---|
| 1 | إيفان | إيفانوف | دكتور |
| 2 | ماريا | إيفانوفا |
في هذا المثال ، نجمع الخلايا مع مهنة لشخصين. للقيام بذلك ، قمنا بتعيين عدد الخلايا المدمجة باستخدام خاصية روسبان من واحدة من الخلايا. وبالتالي ، سيتم عرض خلية واحدة فقط مع مهنة في الصف الأول ، وسيتم عرض خليتين مجتمعتين في الصف الثاني.
المثال 2:
| تاريخ لا. | الوصف | الحالة | |
|---|---|---|---|
| 1 | 02/01/2022 | تحضير الغداء | تم |
| 2 | إصلاح السيارة | في العملية |
في هذا المثال ، نقوم بدمج الخلايا مع التواريخ لمهمتين مختلفتين. للقيام بذلك ، قمنا بتعيين عدد الخلايا المدمجة باستخدام خاصية روسبان من واحدة من الخلايا. وبالتالي ، سيتم عرض خلية واحدة فقط مع التاريخ في كل صف ، وسيتم نقل الخلايا المتبقية إلى اليمين.
المثال 3:
| اسم لا. | الدورة | التخصص | |
|---|---|---|---|
| 1 | أليكسي | تطوير الويب | الواجهة الأمامية |
| 2 | مارينا | برمجة بايثون |
في هذا المثال ، نجمع الخلايا مع دورة وتخصص لشخص واحد. للقيام بذلك ، قمنا بتعيين عدد الخلايا المدمجة باستخدام خاصية كولسبان من واحدة من الخلايا. وبالتالي ، سيتم عرض خلية واحدة فقط في الصف الثاني ، والتي تجمع بين العمودين مع الدورة والتخصص.
هذه ليست سوى بعض الأمثلة على استخدام خصائص صف الشبكة وعمود الشبكة لدمج الخلايا في جداول كس. بفضل هذه الخصائص ، يمكنك إنشاء مجموعة متنوعة من تخطيطات الجداول التي ستساعدك على تنظيم البيانات بشكل أفضل وجعل الجداول أكثر إفادة.
الجمع بين صف الشبكة وعمود الشبكة لدمج الخلايا بطريقة معقدة
شبكة المغلق لديه القدرة على الجمع بين خصائص الشبكة الصف والعمود الشبكة لإنشاء خلية معقدة ينضم. يكون هذا مفيدا عندما تحتاج إلى إنشاء بنية جدول مع خلايا مدمجة بتنسيق غير قياسي.
لدمج الخلايا أفقيا ، نستخدم خاصية عمود الشبكة. يسمح لك بتحديد عدد الأعمدة التي تشغلها الخلية. على سبيل المثال ، إذا أردنا دمج خليتين في خلية واحدة ، فإننا نضبط القيمة عمود الشبكة: الامتداد 2. هذا يعني أن الخلية المدمجة ستشغل عمودين.
لدمج الخلايا عموديا ، نستخدم خاصية صف الشبكة. يسمح لك بتحديد عدد الصفوف التي تحتلها الخلية. على سبيل المثال ، إذا أردنا دمج خليتين في خلية واحدة ، فإننا نضبط القيمة شبكة-صف: سبان 2. هذا يعني أن الخلية المدمجة ستشغل صفين.
ومع ذلك ، عندما يكون من الضروري الجمع بين الخلايا بطريقة معقدة ، يمكننا الجمع بين كلتا الخاصيتين. على سبيل المثال ، إذا كان لدينا جدول يحتوي على 4 خلايا ، ونحتاج إلى الجمع بين الأول والثالث أفقيا ، والثاني والرابع عموديا ، فيمكننا تطبيق الأنماط التالية:
- ضع علامة على الخلية المراد دمجها على النحو التالي: صف الشبكة: 1 / امتداد 2;
- ضع علامة على الخلية لدمج الخلية الأولى كما يلي: عمود الشبكة: 2;
- ضع الخلايا المتبقية في الأماكن المناسبة في الجدول.
وبالتالي ، سوف نحصل على هيكل جدول يحتوي على خليتين مدمجتين: يتم دمج الأول والثالث أفقيا ، ويتم دمج الثاني والرابع عموديا.
| الخلية 1 | الخلية 2 |
| الخلية 3 | الخلية 4 |
من المهم أن تتذكر أن الجمع بين صف الشبكة وعمود الشبكة يمكن أن يؤدي إلى حسابات معقدة لفهارس الخلايا ، لذا خطط بعناية وقم بتسمية بنية الجدول لتجنب الالتباس. تجدر الإشارة أيضا إلى أنه لا تدعم جميع المتصفحات هذه الخصائص بشكل كامل ، لذلك من الأفضل اختبارها في متصفحات مختلفة قبل الاستخدام.
التوافق عبر المتصفح عند استخدام صف الشبكة وعمود الشبكة
في كس ، هناك العديد من الخصائص التي تسمح لك بدمج الخلايا في جدول باستخدام شبكة. اثنان منهم عبارة عن صف شبكي وعمود شبكي. إنها تسمح لك بتعيين عرض أو ارتفاع خلايا الجدول ودمجها معا لإنشاء هياكل أكثر تعقيدا.
ومع ذلك ، عند استخدام هذه الخصائص ، يجب مراعاة التوافق عبر المتصفحات حتى يعمل موقعك بشكل صحيح في جميع متصفحات الويب الحديثة.
بعض الإصدارات القديمة من المتصفحات ، بما في ذلك إنترنت إكسبلورر ، لا تدعم بشكل كامل معايير شبكة كس وقد لا تكون قادرة على تفسير الأنماط بشكل صحيح باستخدام صف الشبكة وعمود الشبكة. لذلك ، عند تطوير موقع ويب ، من المهم استخدام طرق بديلة أو حشوات متعددة لدعم المتصفحات القديمة.
تتمثل إحدى طرق جعل الجدول متوافقا مع معظم المتصفحات في استخدام علامة جدول هتمل القياسية لإنشاء جدول ، وتطبيق أنماط صف الشبكة وعمود الشبكة فقط للمتصفحات الحديثة حيث يتم تنفيذ دعم الشبكة بالكامل.
على سبيل المثال ، يمكنك إنشاء جدول عادي باستخدام علامات الجدول ، تر ، و تد ، ومن ثم نمط باستخدام شبكة كس:
بعد ذلك ، في ملف كس ، يمكنك تحديد نمط لفئة "خلية الشبكة" ، والتي ستطبق خصائص صف الشبكة وعمود الشبكة فقط للمتصفحات المدعومة:
.شبكة خلية {
/ * أنماط للمتصفحات القديمة */
لون الخلفية: # سك;
}
@يدعم (العرض: الشبكة) {
.شبكة خلية {
/ * أنماط للمتصفحات مع دعم الشبكة */
شبكة الصف: سبان 2;
شبكة العمود: سبان 2;
لون الخلفية: # 00;
}
}
في هذا المثال ، إذا كان المتصفح يدعم خصائص صف الشبكة وعمود الشبكة ، فسيتم دمج خلايا الجدول والحصول على خلفية حمراء. إذا كان المتصفح لا يدعم الشبكة ، فستحتفظ الخلايا بعرضها وارتفاعها الأصلي ، وستكون لها خلفية رمادية.
وبالتالي ، عند استخدام صف الشبكة وعمود الشبكة في جداول كس ، ينبغي أن تؤخذ التوافق عبر المتصفح في الاعتبار وينبغي توفير أنماط بديلة أو بوليفيلز لدعم إصدارات المتصفح القديمة.
سؤال وجواب
كيف يمكنني الجمع بين خليتين في جدول باستخدام شبكة?
لدمج خليتين أو أكثر في جدول باستخدام الشبكة ، يتم استخدام خاصية عمود الشبكة أو صف الشبكة. على سبيل المثال ، لدمج خليتين في صف واحد ، تحتاج إلى تعيين القيمة شبكة العمود: سبان 2 ؛ لكل خلية.
هل يمكنني دمج الخلايا الأفقية فقط?
لا ، مع الشبكة يمكنك الجمع بين كل من الخلايا الرأسية والأفقية. يتم استخدام خاصية عمود الشبكة للدمج الأفقي ، ويتم استخدام خاصية صف الشبكة للدمج الرأسي.
ماذا يحدث إذا قمت بدمج الخلايا بأنماط أو بيانات مختلفة?
إذا قمت بدمج خلايا بأنماط أو بيانات مختلفة ، فسيتم تطبيق النمط أو البيانات من الخلية الأولى على الخلية المدمجة بأكملها. إذا كنت ترغب في تطبيق أنماط أو بيانات مختلفة ، فستحتاج إلى استخدام عناصر إضافية داخل الخلية المدمجة.
كيف يمكنني تعيين عرض الخلية المدمجة في الشبكة?
بشكل افتراضي ، عندما يتم دمج الخلايا ، يتم توزيع العرض بالتساوي بينهما. ومع ذلك ، إذا كنت ترغب في تعيين عروض مختلفة للخلايا المدمجة ، فستحتاج إلى استخدام خاصية أعمدة قالب الشبكة وتعيين عرض كل عمود ، بما في ذلك الخلايا المدمجة.