CSV إلى جدول HTML
عادةً ما يعني إدراج جدول بيانات في منشور مدونة أو موقع ويكي داخلي أو رسالة إخبارية عبر البريد الإلكتروني الصراع مع محرر الجداول في نظام إدارة المحتوى لديك. الصق ملف CSV هنا بدلاً من ذلك: يصبح الصف الأول خلايا <th>، ويصبح كل صف آخر <td>، ويتم تغليف كل شيء في الحد الأدنى من عناصر <table> بدون أنماط مضمنة. ترميز نظيف يأخذ كل ما يوفره موقعك من CSS.
كيفية تشغيل التحويل
-
1
الصق ملف CSV
فواصل الأسطر مقسمة إلى صفوف؛ يقوم `str_getcsv` بتوزيع كل سطر بحيث تتم معالجة الفواصل المقتبسة وعلامات الاقتباس المتجاوزة بشكل صحيح.
-
2
تبديل وضع الرأس
عند التشغيل، ينبعث الصف الأول بخلايا `<th>`؛ عند إيقاف التشغيل، يكون كل صف عاديًا `<td>`.
-
3
يتم تجاوز القيم بترميز HTML
يستدعي المحول دالة Laravel المساعدة e() بحيث يتم تجاوز الأحرف `<` و`>` و`&` بأمان في المخرجات.
-
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، بحيث يصبح < هو <، ولا يمكن للمحتوى الذي يوفره المستخدم إدراج وسوم برمجية أو إغلاق الجدول قبل الأوان.
ليس افتراضيًا - فالإخراج هو <table> واحد مع أبناء <tr> المستقيمين. قم بلف الرأس <tr> في <thead> والباقي في <tbody> إذا كان CSS المستهدف يتطلب ذلك.
يتم عرض الخلايا التي تحتوي على أسطر جديدة مضمنة كما هي. إذا كنت تريد أن تظهر فواصل الأسطر في المتصفح، فاستبدلها بـ <br> قبل التحويل أو قم بتعيين white-space: pre-wrap; على <td> CSS.
نعم. يتم إرسال ملف CSV إلى خادمنا حتى يتمكن المحول من بناء الجدول. لا يتم تخزينه ولا تتم إضافته إلى رابط الصفحة.
أدوات ذات صلة
مستخرج الأرشيفات
افحص حاويات ZIP وJAR وXPI وDOCX وXLSX وPPTX وODT محليًا في المتصفح، ونزّل الملفات منفردة من دون رفع الأرشيف الأصلي.
مقسم أوراق Excel
قسّم دفتر عمل XLSX أو XLS حسب علامة تبويب الورقة أو دفعات صفوف البيانات أو قيمة عمود داخل المتصفح. نزّل ملف XLSX واحدًا أو ZIP محليًا من دون رفع الملف.
محوّل XML إلى CSV
حوّل بنية XML الجدولية المسطحة محليا في المتصفح إلى ملف CSV بترميز UTF-8 وفواصل، ثم انسخه أو نزّله.
تحويل CSV إلى Excel
حوّل بيانات CSV إلى مصنف XLSX من ورقة واحدة داخل متصفحك. راجع الفاصل، وحافظ على المعرّفات، واستنتج الأرقام الآمنة مع إبقاء المحتوى محليا.
دمج أوراق Excel
ادمج ملفات XLSX وXLS وXLSM وXLSB وODS محليًا. احتفظ بالأوراق منفصلة أو أضف الصفوف ذات العناوين المتطابقة ثم نزّل ملف XLSX.
محوّل M4A إلى MP3
حوّل صوت M4A إلى MP3 لدعم تشغيل أوسع. ارفع ملف .m4a ونزّل نسخة .mp3 متوافقة.
الأداة متاحة بلغات أخرى
- CSV에서 HTML 테이블로 변환하기 [KO]
- Chuyển bảng từ CSV sang HTML [VI]
- Van CSV naar HTML-tabel [NL]
- CSV转HTML表格 [ZH]
- CSV in HTML-Tabelle [DE]
- CSV to HTML Table [EN]
- Mengonversi CSV ke Tabel HTML [ID]
- CSV till HTML-tabell [SV]
- Przetwarzanie pliku CSV na tabelę HTML [PL]
- แปลงจาก CSV เป็นตาราง HTML [TH]
- CSV a Tabla HTML [ES]
- CSV en tableau HTML [FR]
- CSV para Tabela HTML [PT]
- CSVからHTMLテーブルへ変換 [JA]
- CSV'den HTML Tablosuna [TR]
- CSV in Tabella HTML [IT]
- Перевод таблицы из CSV в HTML [RU]