تحرير جداول HTML باستخدام CSS

من الواضح أنك تعمل على مشروع HTML/CSS لمدرستك وواجهت مشكلة في أحد صفحاتك حيث تحتوي على 3 جداول تريد تحريرها بشكل منفصل باستخدام CSS. لكنك واجهت صعوبة في تطبيق التحريرات على الجداول بشكل منفصل. عند تطبيق فئة CSS على الجداول، وجدت أن التحريرات تُطبَّق فقط على الجدول الثاني ولم تُطبَّق على الآخرين. السبب في ذلك يرجع إلى طريقة كتابة الكود وتحديد العناصر.

في CSS، عندما تستخدم فاصلة من النقاط . لتحديد العنصر، يُفترض أن هذا العنصر يكون اسم الفئة. لكنك استخدمت فاصلة مع اسم العنصر tabel1 وهو غير صحيح. يجب أن تكون فاصلة النقاط مع الفاصلة قبل اسم الفئة لكل جدول، مثل .tabel1، .tabel2، و.tabel3.

علاوة على ذلك، عند تحديد التحريرات العامة التي تريد تطبيقها على جميع الجداول مثل العرض واللون وأسلوب الحدود، يمكنك استخدام الفاصلة من النقاط لتحديد العناصر التي تُريد تطبيق التحريرات عليها. ولكن عندما تريد تطبيق تحريرات محددة على جدول معين، يجب عليك استخدام اسم الفئة الخاصة بهذا الجدول داخل قوسين مربعين [ ] مع اسم العنصر، مثل .tabel2 tr لتطبيق التحريرات على جميع صفوف الجدول الثاني، و.tabel2 td لتطبيق التحريرات على جميع خلايا الجدول الثاني.

إليك مثالاً على كيفية تنظيم CSS الخاص بك بشكل صحيح:

cssCopy code
body {
    background-color: lightgrey;
}

.tabel1 {
    border-color: purple;
    width: 400px;
    text-align: center;
    height: 100px;
}

.tabel2 {
    width: 350px;
    border-color: grey;
    border-style: solid;
    border-collapse: collapse;
}

.tabel2 tr,
.tabel2 td {
    border-color: grey;
    border-style: solid;
    border-collapse: collapse;
}

.tabel3 {
    border-radius: 25px;
    background: purple;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 4%;
    padding-top: 4%;
    width: 400px;
    border-color: purple;
    box-shadow: 15px 6px 10px purple;
}

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

بالطبع، إليك المتابعة:

بعد تنظيم CSS الخاص بك بشكل صحيح، يمكنك الآن تطبيق التحريرات بشكل فعال على جميع جداولك بشكل منفصل. باستخدام فئات CSS المناسبة، يمكنك تخصيص تصميم كل جدول وفقًا لاحتياجاتك ومتطلبات تصميم الصفحة.

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

cssCopy code
.tabel2 tr {
    background-color: lightblue;
}

هذا سيطبق خلفية زرقاء فاتحة على جميع صفوف الجدول الثاني فقط.

من الجيد أيضًا أن تلاحظ أن استخدام border-collapse: collapse; يقوم بدمج حدود الخلايا معًا، مما يخلق تأثيرًا أكثر نظافة وتنظيمًا للجدول. وإذا كنت تريد فصل الحدود بين الخلايا، يمكنك استخدام القيمة separate بدلاً من collapse.

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

بهذا، يمكنك الآن تحرير جداولك بشكل فعال ومنظم باستخدام CSS بما يتناسب مع متطلبات مشروعك وتصميم الصفحة الخاص بك.