في صفحات الويب، نستخدم عادةً الجداول لعرض بعض البيانات، مثل جداول الأداء والقوائم المالية وما إلى ذلك. ومع ذلك، بشكل افتراضي، نمط الجداول ليس جميلًا ولا يتطابق حتى مع نمط الصفحة. يوفر CSS خصائص تسمح لك بتعديل نمط الجدول وتحسين مظهره بشكل كبير.
1. حدود جدول HTML
في الجزء التعليمي لـ HTML، استخدمنا سمة الحدود لتعيين الجدول، وكان الكود كما يلي:
<tableborder=1><thead><th>الاسم</th><th>الجنس</th></thead><tbody><tr><td>تشانغ سان</td><td>ذكر</td </tr><tr><td>李思</td><td>أنثى</td></tr></tbody></table>
نتائج التشغيل:
في الواقع، لا ينصح بهذه الطريقة. لأن تصميم الويب يتبع مبدأ أن HTML يمثل المحتوى، بينما يصف CSS النمط.
بالنسبة للجداول، محتوى الجدول هو النص الموجود في الصفوف والأعمدة، والحد هو تجميل لمظهر الجدول وينتمي إلى جزء النمط، لذا فهو أكثر ملاءمة لوصفه باستخدام CSS.
2. حدود جدول تحديد CSS
يمكنك استخدام حدود CSS لتعيين حدود الجدول، ويكون الكود كما يلي:
<!DOCTYPEhtml><html><head><style>الجدول{float:left;}.table_one{border-collapse:separate;}.table_two{margin-left:20px;border-co llapse:collapse;}</style></head><body><tableclass=table_oneborder=1><tr><th>الرقم</th><th>الاسم</th><th>العمر</th> </tr><tr><td>1</td><t d>تشانغ سان</td><td>15</td></tr><tr><td>2</td><td>لي سي</td><td>11</td></ tr></table><tableclass=table_twoborder=1px><tr><th>الرقم</th><th>الاسم الأخير الاسم</th><th>العمر</th></tr><tr><td>1</td><td>تشانغ سان</td><td>15</td></tr>< tr><td>2</td><td>الجدول</td><td>11</td></tr></table></body></html>نتائج التشغيل هي كما يلي:
(1) تخطيط الجدول: قم بتعيين خوارزمية تخطيط الجدول. هناك خوارزميتان للتخطيط، وهما خوارزمية تخطيط الجدول الثابتة وخوارزمية تخطيط الجدول التلقائي؛
(2) طي الحدود: تحديد ما إذا كان سيتم دمج حدود الخلايا في الجدول معًا أو فصلها وفقًا لأنماط HTML القياسية؛
(3) تباعد الحدود: اضبط التباعد الأفقي والرأسي بين حدين متجاورين عند فصل حدود الجدول؛
(4) جانب التسمية التوضيحية: قم بتعيين موضع عنوان الجدول بالنسبة للجدول؛
(5) الخلايا الفارغة: قم بتعيين ما إذا كان سيتم عرض حدود الخلية في حالة عدم وجود محتوى في خلية الجدول.