من CSV إلى تطبيق ويب
من CSV إلى تطبيق ويب
أنت تعرف كيف تستعلم عن البيانات، وتعرف كيف تقطّعها في SQL. الآن حان الوقت لتتعلم كيف تعرضها.
الجدول داخل ملف جداول البيانات غير مرئي للعالم. أما الجدول في المتصفح فهو منتج. في هذا الدرس ستبني لوحة بيانات HTML تفاعلية — برؤوس أعمدة قابلة للفرز، وصفوف ملوّنة حسب الحالة، وصف إجماليات — كل ذلك من الصفر. بدون Python وبدون Pandas. فقط HTML و Tailwind.
التعليمات
أضف عنوان لوحة البيانات داخل <h1> — ما البيانات التي تعرضها هذه اللوحة؟
تلميح: جرّب: `<h1 class="text-2xl font-bold text-white">تحليلات المنتجات</h1>`
أضف <table> يحتوي على <thead> مع 3 رؤوس أعمدة (<th>) على الأقل
أضف <tbody> مع 4 صفوف بيانات (<tr>) على الأقل — واملأها بأرقام تبدو واقعية
أضف صف إجماليات في الأسفل: <tr class="summary-row"> مع إجماليات بخط عريض لكل عمود
الكود الخاص بك
صف ما تريد بناءه في هذه الخطوة وسأكتب الكود — ثم انقر «تطبيق» لإدراجه في محرّرك. هذه الخطوة: أضف عنوان لوحة البيانات داخل <h1> — ما البيانات التي تعرضها هذه اللوحة؟