CSV إلى جدول HTML

عادةً ما يعني إدراج جدول بيانات في منشور مدونة أو موقع ويكي داخلي أو رسالة إخبارية عبر البريد الإلكتروني الصراع مع محرر الجداول في نظام إدارة المحتوى لديك. الصق ملف CSV هنا بدلاً من ذلك: يصبح الصف الأول خلايا <th>، ويصبح كل صف آخر <td>، ويتم تغليف كل شيء في الحد الأدنى من عناصر <table> بدون أنماط مضمنة. ترميز نظيف يأخذ كل ما يوفره موقعك من CSS.

كيفية تشغيل التحويل

  1. 1

    الصق ملف CSV

    فواصل الأسطر مقسمة إلى صفوف؛ يقوم `str_getcsv` بتوزيع كل سطر بحيث تتم معالجة الفواصل المقتبسة وعلامات الاقتباس المتجاوزة بشكل صحيح.

  2. 2

    تبديل وضع الرأس

    عند التشغيل، ينبعث الصف الأول بخلايا `<th>`؛ عند إيقاف التشغيل، يكون كل صف عاديًا `<td>`.

  3. 3

    يتم تجاوز القيم بترميز HTML

    يستدعي المحول دالة Laravel المساعدة e() بحيث يتم تجاوز الأحرف `<` و`>` و`&` بأمان في المخرجات.

  4. 4

    انسخ العلامة

    يتم وضع مسافة بادئة لـ HTML بمسافتين لسهولة القراءة؛ قم بإسقاطه مباشرة في ملف Blade أو منشور Markdown أو عرض مصدر WYSIWYG.

التصميم وسهولة الوصول إلى الإخراج

يقوم المحول بإصدار HTML بسيط من الناحية الهيكلية - بدون فئات، أو أنماط مضمنة، أو أغلفة <thead> أو <tbody>. يؤدي ذلك إلى إبقاء الإخراج قابلاً للحمل، لكن قد ترغب في تحسينه.

ورقة أنماط بسيطة

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
th { background: #f9fafb; font-weight: 600; }
tr:nth-child(even) td { background: #fafafa; }

المكاسب السريعة لإمكانية الوصول

  • قم بلف الصف الأول في <thead> إذا كانت لديك جداول طويلة؛ فعندئذ تعلن قارئات الشاشة عن أعمدة الرأس أثناء تنقل المستخدمين عبر الصفوف. لا يقوم المحول بذلك تلقائيًا للحفاظ على الحد الأدنى من الإخراج.
  • أضف عنصر <caption> أعلى الجدول مع وصف بلغة واضحة وبسيطة لما تمثله البيانات.
  • استخدم scope="col" على خلايا <th> إذا كان صف الرأس الخاص بك يصف الأعمدة، وscope="row" إذا كان العمود الأول يحدد الصفوف.

عندما لا يكون HTML بالتنسيق الصحيح

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

الأسئلة الشائعة

نعم. يتم تجاوز القيم باستخدام دالة e() المساعدة الخاصة بـ Laravel، بحيث يصبح < هو &lt;، ولا يمكن للمحتوى الذي يوفره المستخدم إدراج وسوم برمجية أو إغلاق الجدول قبل الأوان.

ليس افتراضيًا - فالإخراج هو <table> واحد مع أبناء <tr> المستقيمين. قم بلف الرأس <tr> في <thead> والباقي في <tbody> إذا كان CSS المستهدف يتطلب ذلك.

يتم عرض الخلايا التي تحتوي على أسطر جديدة مضمنة كما هي. إذا كنت تريد أن تظهر فواصل الأسطر في المتصفح، فاستبدلها بـ <br> قبل التحويل أو قم بتعيين white-space: pre-wrap; على <td> CSS.

نعم. يتم إرسال ملف CSV إلى خادمنا حتى يتمكن المحول من بناء الجدول. لا يتم تخزينه ولا تتم إضافته إلى رابط الصفحة.

أدوات ذات صلة

الأداة متاحة بلغات أخرى