تحويل CSV إلى جدول HTML

orders.csv· بيانات نموذجية15 صفًا · 8 أعمدة

الناتج

تسمية توضيحية (اختيارية)

إضافة تنسيق بسيطحدود وأرقام بمحاذاة إلى اليمين؛ وعند إخراج الجدول فقط تُضاف أسماء أصناف (⁦class⁩) بدلًا من ذلك.

إظهار فواصل الأسطر داخل الخلايا

<table class="csv-table">
  <thead>
    <tr>
      <th scope="col">order_id</th>
      <th scope="col">customer</th>
      <th scope="col">city</th>
      <th scope="col">product</th>
      <th scope="col">quantity</th>
      <th scope="col">unit_price</th>
      <th scope="col">order_date</th>
      <th scope="col">status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td dir="auto">001041</td>
      <td dir="auto">عمر القحطاني</td>
      <td dir="auto">تونس</td>
      <td dir="auto">Chair, ergonomic</td>
      <td class="num" dir="auto">6</td>
      <td class="num" dir="auto">144.56</td>
      <td dir="auto">2026-01-24</td>
      <td dir="auto">refunded</td>
    </tr>
    <tr>
      <td dir="auto">001042</td>
      <td dir="auto">سارة المصري</td>
      <td dir="auto">الدوحة</td>
      <td dir="auto">Monitor 27&quot;</td>
      <td class="num" dir="auto">9</td>
      <td class="num" dir="auto">161.36</td>
      <td dir="auto">2026-02-21</td>
      <td dir="auto">shipped</td>
    </tr>
    <tr>
      <td dir="auto">001043</td>
      <td dir="auto">خالد الخطيب</td>
      <td dir="auto">عمّان</td>
      <td dir="auto">Desk lamp</td>
      <td class="num" dir="auto">5</td>
      <td class="num" dir="auto">170.88</td>
      <td dir="auto">2026-03-27</td>
      <td dir="auto">shipped</td>
    </tr>
    <tr>
      <td dir="auto">001044</td>
      <td dir="auto">فاطمة الحربي</td>
      <td dir="auto">دبي</td>
      <td dir="auto">Desk lamp</td>
      <td class="num" dir="auto">1</td>
      <td class="num" dir="auto">161.16</td>
      <td dir="auto">2026-04-24</td>
      <td dir="auto">pending</td>
    </tr>
    <tr>
      <td dir="auto">001045</td>
      <td dir="auto">نور الزهراني</td>
      <td dir="auto">عمّان</td>
      <td dir="auto">Notebook A5</td>
      <td class="num" dir="auto">1</td>
      <td class="num" dir="auto"></td>
      <td dir="auto">2026-05-02</td>
      <td dir="auto">refunded</td>
    </tr>
    <tr>
      <td dir="auto">001046</td>
      <td dir="auto">هدى الدوسري</td>
      <td dir="auto">الدوحة</td>
      <td dir="auto">Monitor 27&quot;</td>
      <td class="num" dir="auto">2</td>
      <td class="num" dir="auto">211.63</td>
      <td dir="auto">2026-06-17</td>
      <td dir="auto">shipped</td>
    </tr>
    <tr>
      <td dir="auto">001047</td>
      <td dir="auto"> علي القحطاني </td>
      <td dir="auto">عمّان</td>
      <td dir="auto">Coffee beans 1kg</td>
      <td class="num" dir="auto">2</td>
      <td class="num" dir="auto">57.05</td>
      <td dir="auto">2026-07-09</td>
      <td dir="auto">shipped</td>
    </tr>
    <tr>
      <td dir="auto">001048</td>
      <td dir="auto">عمر المصري</td>
      <td dir="auto">الدار البيضاء</td>
      <td dir="auto">Desk lamp</td>
      <td class="num" dir="auto">9</td>
      <td class="num" dir="auto">216.89</td>
      <td dir="auto">2026-08-13</td>
      <td dir="auto">shipped</td>
    </tr>
    <tr>
      <td dir="auto">001049</td>
      <td dir="auto">أحمد الحربي</td>
      <td dir="auto">الرياض</td>
      <td dir="auto">USB-C cable</td>
      <td class="num" dir="auto">5</td>
      <td class="num" dir="auto">133.18</td>
      <td dir="auto">2026-09-01</td>
      <td dir="auto">shipped</td>
    </tr>
    <tr>
      <td dir="auto">001050</td>
      <td dir="auto">يوسف الدوسري</td>
      <td dir="auto">عمّان</td>
      <td dir="auto">USB-C cable</td>
      <td class="num" dir="auto">4</td>
      <td class="num" dir="auto">242.50</td>
      <td dir="auto">2026-01-22</td>
      <td dir="auto">pending</td>
    </tr>
    <tr>
      <td dir="auto">001051</td>
      <td dir="auto">أحمد الشمري</td>
      <td dir="auto">القاهرة</td>
      <td dir="auto">Desk lamp</td>
      <td class="num" dir="auto">2</td>
      <td class="num" dir="auto">217.96</td>
      <td dir="auto">2026-02-06</td>
      <td dir="auto">refunded</td>
    </tr>
    <tr>
      <td dir="auto">001052</td>
      <td dir="auto">عمر الحسن</td>
      <td dir="auto">جدة</td>
      <td dir="auto">Desk lamp</td>
      <td class="num" dir="auto">6</td>
      <td class="num" dir="auto">12.86</td>
      <td dir="auto">2026-03-18</td>
      <td dir="auto">shipped</td>
    </tr>
    <tr>
      <td dir="auto">001053</td>
      <td dir="auto">أحمد السيد</td>
      <td dir="auto">دبي</td>
      <td dir="auto">USB-C cable</td>
      <td class="num" dir="auto">9</td>
      <td class="num" dir="auto">158.31</td>
      <td dir="auto">2026-04-13</td>
      <td dir="auto">pending</td>
    </tr>
    <tr>
      <td dir="auto">001054</td>
      <td dir="auto">عمر الدوسري</td>
      <td dir="auto">الدار البيضاء</td>
      <td dir="auto">Notebook A5</td>
      <td class="num" dir="auto">7</td>
      <td class="num" dir="auto">30.61</td>
      <td dir="auto">2026-05-07</td>
      <td dir="auto">shipped</td>
    </tr>
    <tr>
      <td dir="auto">001043</td>
      <td dir="auto">خالد الخطيب</td>
      <td dir="auto">عمّان</td>
      <td dir="auto">Desk lamp</td>
      <td class="num" dir="auto">5</td>
      <td class="num" dir="auto">170.88</td>
      <td dir="auto">2026-03-27</td>
      <td dir="auto">shipped</td>
    </tr>
  </tbody>
</table>

15 صفًا · 1 ملف

بعد فتح ملف CSV أو لصقه تحصل على عنصر ⁦<table>⁩ فيه ⁦<thead>⁩ بعناوين ⁦<th scope="col">⁩ وعنصر ⁦<tr>⁩ لكل صف، أو على صفحة HTML كاملة يمكن فتحها مباشرة. تُهرَّب كل قيمة في HTML، فيظهر ⁦<script>⁩ أو ⁦&⁩ في بياناتك نصًا ولا يصبح ترميزًا أبدًا. يُحوَّل الملف في متصفحك ولا يُرفع أبدًا.

طريقة تحويل CSV إلى HTML

اختر فتح ملف، أو أفلت ملف ⁦.csv⁩ أو ⁦.tsv⁩ أو ⁦.txt⁩ على الأداة، أو اختر لصق. وإذا بدت الأعمدة خاطئة فاضبط المحدِّد أو الترميز من إعدادات الاستيراد.
تحت الناتج اختر الجدول فقط للصق الترميز في صفحة موجودة أو نظام إدارة محتوى، أو صفحة HTML كاملة لملف مستقل.
أضِف تسمية توضيحية (اختيارية)، وحدِّد التنسيق وفواصل الأسطر، ثم اختر نسخ أو تنزيل HTML.

لملف README أو ويكي يكون جدول Markdown عادةً أسهل تعديلًا؛ وللملف القابل للطباعة استخدم CSV إلى PDF.

ما يفعله كل خيار

الجدول فقط	الخيار الافتراضي. عنصر ⁦`<table>`⁩ وحده، جاهز للصق في صفحة أو قالب بريد إلكتروني أو كتلة HTML في نظام إدارة المحتوى.
صفحة HTML كاملة	يضيف ⁦`<!doctype html>`⁩ و⁦`<html lang="en">`⁩ (برمز لغة الموقع؛ وفي هذه الصفحة ⁦`ar`⁩) و⁦`<meta charset="utf-8">`⁩ وعنصر ⁦`<title>`⁩ (التسمية التوضيحية، أو ⁦`Table`⁩ إن لم توجد)، فيُفتح الملف بشكل صحيح في أي متصفح.
تسمية توضيحية (اختيارية)	تكتب ⁦`<caption>`⁩ أولَ عنصر فرعي في الجدول: وهو الاسم الذي تعلنه قارئات الشاشة للجدول.
إضافة تنسيق بسيط	مفعّل افتراضيًا. في الصفحة الكاملة يضمّن ورقة أنماط صغيرة: حدود، وصف عناوين مظلَّل، وأرقام بمحاذاة إلى اليمين. ومع الجدول فقط يضيف بدلًا من ذلك ⁦`class="csv-table"`⁩ إلى الجدول و⁦`class="num"`⁩ إلى خلايا الأرقام، فتحدد أنماط CSS الخاصة بك المظهر.
إظهار فواصل الأسطر داخل الخلايا	مفعّل افتراضيًا. يصبح فاصل السطر داخل القيمة ⁦`<br>`⁩. وعند تعطيله يبقى الفاصل في المصدر، فتعرضه المتصفحات مسافة.

كيف تُعالَج البيانات الصعبة

تُكتب ⁦&⁩ و⁦<⁩ و⁦>⁩ و⁦"⁩ و⁦'⁩ بصيغة ⁦&⁩ و⁦<⁩ و⁦>⁩ و⁦"⁩ و⁦'⁩ في كل خلية وعنوان وتسمية توضيحية. وتظهر الوسوم في بياناتك نصًا، وهذا يعني أيضًا أن HTML الموجود في ملف CSV لا يُعرض منسَّقًا.
لكل خلية السمة ⁦dir="auto"⁩، فتُعرض القيم العربية أو العبرية من اليمين إلى اليسار حتى داخل صفحة من اليسار إلى اليمين.
لا يُعدّ العمود رقميًا إلا إذا كانت كل قيمه غير الفارغة أرقامًا بسيطة؛ فعمود معرّفات مثل ⁦0042⁩ يبقى نصًا ولا يُحاذى إلى اليمين. ولا يُعاد تنسيق القيم نفسها أبدًا.
تُقرأ الفواصل وعلامات الاقتباس وفواصل الأسطر داخل علامات الاقتباس وفق RFC 4180. ويصبح العنوان الفارغ ⁦Column 3⁩ والمكرر ⁦name (2)⁩.
الناتج بترميز ⁦UTF-8⁩. تعلن الصفحة الكاملة ذلك بالعنصر ⁦<meta charset="utf-8">⁩؛ وعند لصق الجدول فقط في صفحة أخرى يجب أن تكون تلك الصفحة بترميز ⁦UTF-8⁩ أيضًا.

حل المشكلات

تظهر الحروف العربية أو ذات العلامات رموزًا مثل Ã© في الملف المصدر. ملف CSV ليس بترميز ⁦UTF-8⁩. اختر ترميزه (غالبًا ⁦Windows-1252⁩ في ملفات Excel القديمة، و⁦Windows-1256⁩ في الملفات العربية القديمة) من «إعدادات الاستيراد» وافتحه من جديد.
تظهر الوسوم من بياناتي نصًا. هُرّب HTML الموجود في خلاياك عمدًا كي لا يعمل كترميز. عدّل النتيجة إذا كنت تثق بالمحتوى وتريد عرضه منسَّقًا.
الجدول الملصوق بلا حدود. يضيف الجدول فقط أسماء أصناف (مع تفعيل التنسيق) لا أنماط CSS. نسّق ⁦.csv-table⁩ و⁦td.num⁩ في ورقة أنماط موقعك، أو اختر صفحة HTML كاملة للحصول على الأنماط المضمّنة.
عمود واحد يحمل كل القيم. خُمِّن المحدِّد خطأً؛ اضبطه من «إعدادات الاستيراد».

الحدود والخصوصية

الملفات حتى 25 ميغابايت أو 100 ألف صف أو مليوني خلية تُفتح مع معاينة مباشرة لأول 200 صف. أما الملفات الأكبر فتُحوَّل تدفقيًا: يُقرأ الملف مرتين على أجزاء (مرة لقياس الأعمدة ومعرفة الرقمية منها، ومرة للكتابة)، وتذكر ملاحظة أن الملف المنزَّل يشمل الملف كله، ولا يتوفر نسخ. والحد الأقصى لملف الناتج الواحد 4 غيغابايت.

يجري التحويل في عامل خلفي داخل علامة التبويب هذه، فتبقى الصفحة مستجيبة ويوقفه زر إلغاء. ولا يُرسل ملف CSV أبدًا إلى أي خادم.

مثال

قائمة طلبات فيها علامة &، وفاصلة عليا، وعلامات اقتباس، وHTML داخل تعليق من سطرين، حُوّلت بالإعدادات الافتراضية (الجدول فقط، مع التنسيق، وإظهار فواصل الأسطر). كل قيم qty أرقام، فتحصل خلاياه على ⁦class="num"⁩.

CSV

id,product,qty,comment
0042,Fish & Chips,2,"<b>Extra</b> vinegar
no salt"
0043,"O'Brien's ""Stout""",12,

HTML

<table class="csv-table">
  <thead>
    <tr>
      <th scope="col">id</th>
      <th scope="col">product</th>
      <th scope="col">qty</th>
      <th scope="col">comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td dir="auto">0042</td>
      <td dir="auto">Fish &amp; Chips</td>
      <td class="num" dir="auto">2</td>
      <td dir="auto">&lt;b&gt;Extra&lt;/b&gt; vinegar<br>no salt</td>
    </tr>
    <tr>
      <td dir="auto">0043</td>
      <td dir="auto">O&#39;Brien&#39;s &quot;Stout&quot;</td>
      <td class="num" dir="auto">12</td>
      <td dir="auto"></td>
    </tr>
  </tbody>
</table>

أسئلة وأجوبة

هل لصق الناتج في موقعي آمن؟

لا يمكن للبيانات حقن ترميز: كل قيمة وعنوان والتسمية التوضيحية مُهرَّبة في HTML، ولا توضع أي قيمة داخل سمة أبدًا. والوسوم الوحيدة في الناتج هي عناصر الجدول التي يكتبها المحوّل نفسه.

لماذا تحمل الصفحة الكاملة رمز لغة الموقع في السمة lang؟

تأخذ الصفحة الكاملة رمز لغتها من لغة الموقع الذي تستخدمه، وهو هنا العربية. غيّر السمة ⁦lang⁩ بعد التنزيل إذا كانت بياناتك بلغة أخرى.

هل يمكن فرز جدول HTML أو تصفيته؟

الناتج جدول ثابت بلا برامج نصية. افرز البيانات أو صفِّها أولًا بأداة فرز CSV أو تصفية صفوف CSV، ثم حوّلها.