استخدام CSS لإضافة الحدود الداخلية في جدول HTML

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

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

CSS جدول الحدود

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

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

قبل ان تبدا

حدد المكان الذي تريد ظهور الخطوط فيه في الجدول. لديك العديد من الخيارات ، بما في ذلك:

• تحيط بجميع الخلايا لتشكيل شبكة
• تحديد الخطوط بين الأعمدة فقط
• فقط بين الصفوف
• بين أعمدة أو صفوف محددة.

يمكنك أيضًا وضع الخطوط حول الخلايا الفردية أو داخل الخلايا الفردية.

كيفية إضافة خطوط حول جميع الخلايا في الجدول

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

td، th {border: solid 1px black؛}

كيفية إضافة خطوط بين فقط الأعمدة في جدول

لإضافة سطور بين الأعمدة لإنشاء سطور عمودية تعمل من أعلى إلى أسفل في أعمدة الجدول ، أضف ما يلي إلى ورقة الأنماط:

td، th {border-left: solid 1px black؛}

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

الطبقة = "لا حدود">

ثم أضف النمط التالي إلى ورقة الأنماط:

.ليس لها حدود {من اليسار إلى اليسار: لا شيء ؛}

كيفية إضافة خطوط بين فقط الصفوف في جدول

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

tr {border-bottom: solid 1px black؛}

لإزالة الحدود من أسفل الجدول ، ستقوم بإضافة فئة إلى ذلك مرة أخرى

العلامة:

الطبقة = "لا حدود">

أضف النمط التالي إلى ورقة الأنماط الخاصة بك:

.ليس لها حدود {الحد السفلي: لا شيء ؛}

كيفية إضافة خطوط بين أعمدة محددة أو صفوف في جدول

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

الطبقة = "جنبا إلى الحدود">

تعد إضافة الأسطر بين الصفوف أسهل لأنه يمكنك إضافة الصف إلى الصف الذي تريد أن يكون الخط فيه.

الطبقة = "الحدود القاع">

ثم ، أضف CSS إلى ورقة الأنماط:

على جانب الحدود {border-left: solid 1px black؛}.border-bottom {border-bottom: solid 1px black؛}

كيفية إضافة خطوط حول الخلايا الفردية في الجدول

لإضافة سطور حول الخلايا الفردية ، يمكنك إضافة فئة إلى الخلايا التي تريد حدودها:

الطبقة = "الحدود">

ثم أضف CSS التالي إلى ورقة الأنماط:

.الحدود {border: solid 1px black؛}

كيفية إضافة خطوط داخل الخلايا الفردية في الجدول

إذا كنت ترغب في إضافة خطوط داخل محتويات خلية ، فإن أسهل طريقة للقيام بذلك هي استخدام علامة القاعدة الأفقية ().

نصائح مفيدة

إذا لاحظت وجود ثغرات في حدودك ، فتأكد من تعيين نمط border-collapse على الجدول. أضف ما يلي إلى ورقة الأنماط:

الطاولة {انهيار الحدود: الانهيار}

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