تعرف على كيفية إنشاء حد جدول CSS في خمس دقائق فقط
ربما سمعت أن جداول CSS و HTML لا تختلطان. هذا ببساطة غير صحيح. نعم ، لم يعد استخدام جداول HTML للتخطيط يعد أفضل ممارسات تصميم الويب ، بعد أن تم استبدالها بأنماط تخطيط CSS ، ولكن لا تزال الجداول هي الترميز الصحيح لاستخدامه لإضافة بيانات جدولة إلى صفحة ويب.
لسوء الحظ ، نظرًا لأن العديد من محترفي الويب قد ابتعدوا عن الطاولات وهم يفكرون في أنهم سم ، فإن العديد من هؤلاء المحترفين لديهم خبرة قليلة في العمل مع عنصر HTML المشترك هذا والنضال عندما يتعين عليهم التعامل معهم على صفحة ويب. على سبيل المثال ، إذا كان لديك جدول في إحدى الصفحات وتريد إضافة خطوط داخلية إلى خلايا الجدول.
CSS جدول الحدود
عندما تستخدم CSS لإضافة حدود إلى الجداول ، فإنها تضيف فقط الحد المحيط بالخارج للجدول. إذا كنت ترغب في إضافة خطوط داخلية إلى الخلايا الفردية في هذا الجدول ، فستحتاج إلى إضافة حدود إلى عناصر CSS الداخلية. يمكنك أيضًا استخدام علامة الموارد البشرية لإضافة خطوط داخل خلايا فردية.
من أجل تطبيق الأنماط المغطاة في هذه المقالة ، يجب أن يكون لديك جدول على صفحة الويب الخاصة بك. يجب عليك بعد ذلك إنشاء ورقة أنماط كصفحة أنماط داخلية في رأس المستند (من المحتمل أن تفعل ذلك فقط إذا كان "الموقع" الخاص بك هو صفحة واحدة) أو تعلق على المستند كصورة نمط خارجية (هذا هو ما إذا كان موقعك عبارة عن صفحات متعددة - مما يتيح لك تصميم جميع الصفحات من ورقة خارجية واحدة). ستضع الأنماط لإضافة خطوط داخلية في ورقة الأنماط تلك.
قبل ان تبدا
عليك أولاً تحديد المكان الذي تريد ظهور الخطوط فيه في جدولك. لديك العديد من الخيارات ، بما في ذلك:
- تحيط بجميع الخلايا لتشكيل شبكة ؛
- تحديد الخطوط بين الأعمدة فقط ؛
- فقط بين الصفوف أو
- بين أعمدة أو صفوف محددة.
يمكنك أيضًا وضع الخطوط حول الخلايا الفردية أو داخل الخلايا الفردية.
كيفية إضافة خطوط حول جميع الخلايا في الجدول
لإضافة سطور حول جميع الخلايا في جدولك ، مما يؤدي إلى إنشاء هذا التأثير الشبيه بالشبكة ، أضف ما يلي إلى ورقة الأنماط:
td، th {
border: solid 1px black؛
}
كيفية إضافة خطوط بين فقط الأعمدة في جدول
لإضافة خطوط بين الأعمدة (يؤدي هذا إلى إنشاء خطوط رأسية تعمل من أعلى إلى أسفل في أعمدة الجدول) ، أضف ما يلي إلى ورقة الأنماط:
td، th {
border-left: solid 1px black؛
}
بعد ذلك ، إذا كنت لا ترغب في ظهورها في العمود الأول ، فستحتاج إلى إضافة فصل دراسي إلى تلك الخاليتين t و td . في هذا المثال ، نفترض أن لدينا فئة بلا حدود على هذه الخلايا ونزيل الحدود باستخدام قاعدة CSS الأكثر تحديدًا هذه. إذاً ، هنا طبقة HTML التي نستخدمها:
الطبقة = "لا حدود">
وبعد ذلك يمكننا إضافة النمط التالي إلى ورقة الأنماط الخاصة بنا:
.ليس لها حدود {
من اليسار إلى اليسار: لا شيء ؛
}
كيفية إضافة خطوط بين فقط الصفوف في جدول
كما هو الحال مع إضافة الأسطر بين الأعمدة ، يمكنك القيام بذلك بمجرد إضافة نمط واحد بسيط إلى ورقة الأنماط الخاصة بك. ستضيف CSS أدناه خطوطًا عمودية بين كل صف من طاولتنا:
tr {
border-bottom: solid 1px black؛
}
ولإزالة الحدود من أسفل الجدول ، يمكنك إضافة فئة إلى علامة tr مرة أخرى:
الطبقة = "لا حدود">
أضف النمط التالي إلى ورقة الأنماط الخاصة بك:
.ليس لها حدود {
الحد السفلي: لا شيء ؛
}
كيفية إضافة خطوط بين أعمدة محددة أو صفوف في جدول
إذا كنت لا تريد سوى الخطوط بين صفوف أو أعمدة محددة ، فستحتاج إلى استخدام فصل دراسي في هذه الخلايا أو الصفوف. تعد إضافة خط بين الأعمدة أكثر صعوبة قليلاً من بين الصفوف لأنك تحتاج إلى إضافة الفصل إلى كل خلية في هذا العمود. إذا تم إنشاء الجدول تلقائيًا من نظام إدارة المحتوى CMS من نوع ما ، فقد لا يكون ذلك ممكنًا ، ولكن إذا كنت ترمز يدويًا للصفحة ، فيمكنك إضافة فئات مناسبة حسب الحاجة لتحقيق هذا التأثير.
الطبقة = "جنبا إلى الحدود">
تعد إضافة الأسطر بين الصفوف أسهل بكثير ، حيث يمكنك فقط إضافة الصف إلى الصف الذي تريد تشغيل الخط عليه.
الطبقة = "الحدود القاع">
ثم أضف CSS إلى ورقة الأنماط الخاصة بك:
على جانب الحدود {
border-left: solid 1px black؛
}
.border-bottom {
border-bottom: solid 1px black؛
}
كيفية إضافة خطوط حول الخلايا الفردية في الجدول
لإضافة سطور حول الخلايا الفردية ، يمكنك إضافة فئة إلى الخلايا التي تريد حدودها:
الطبقة = "الحدود">
ثم أضف CSS التالي إلى ورقة الأنماط الخاصة بك:
.الحدود {
border: solid 1px black؛
}
كيفية إضافة خطوط داخل الخلايا الفردية في الجدول
إذا كنت ترغب في إضافة خطوط داخل محتويات الخلية ، فإن أسهل طريقة للقيام بذلك هي استخدام علامة القاعدة الأفقية (
).
نصائح مفيدة
إذا لاحظت وجود فجوات في حدودك ، يجب عليك التأكد من تعيين نمط تقليص الحد على الجدول. أضف ما يلي إلى ورقة الأنماط الخاصة بك:
الطاولة {
انهيار الحدود: الانهيار
}
يمكنك تجنب كل CSS الموجود أعلاه واستخدام سمة الحدود في علامة الجدول. ومع ذلك ، فعليك أن تدرك أن صفته ، في حين لم يتم إهمالها ، أقل مرونة بكثير من CSS ، حيث يمكنك فقط تحديد عرض الحد ويمكن أن يكون فقط حول جميع خلايا الجدول أو لا شيء.