Softonic

مولّد جداول HTML

خطوة 1 / 4

يدعم حقول CSV الموضوعة بين علامتي اقتباس، وعلامات الجدولة من جداول البيانات، والصفوف المفصولة بفاصلة منقوطة، وفواصل Markdown. الحد الأقصى: 50 صفا و20 عمودا و1,000 محرف في كل خلية.

بيانات الجدول
بيانات الجدول

كتابة <table> و<thead> و<tbody> و<tr> يدويا لمجموعة بيانات من عشرة صفوف أمر ممل. الصق بيانات جدول مفصولة بجدولات أو CSV أو Markdown، وينتج هذا المولّد HTML جيد البنية بوسوم دلالية، و<caption> اختياري، وسمات scope مناسبة، واختيار من تخطيط الزِّبرا أو الحدود أو أصناف Tailwind، جاهزا لإدراجه في مقال أو لوحة معلومات.

كيف تبني جدول HTML

  1. 1

    الصق بياناتك

    TSV (انسخ من جدول بيانات) أو CSV أو صيغة جدول Markdown، كلها تُحلَّل صحيحا.

  2. 2

    اختر خيارات الجدول

    صف رأس، وعنوان، وتخطيط زِبرا، وصفوف متضامّة أو فسيحة.

  3. 3

    اختر وضع التنسيق

    HTML عادي، أو أنماط مضمّنة، أو أصناف Bootstrap، أو أصناف Tailwind.

  4. 4

    انسخ الترميز

    الناتج HTML صالح ودلالي: لا شبكة `<div>` تتظاهر بأنها جدول.

بنية الجدول الدلالية

الجداول المبنية بوسوم سليمة متاحة، وملائمة لقارئات الشاشة، وسهلة التنسيق. ينتج المولّد هذه البنية:

<table>
  <caption>أرقام مبيعات الربع الأول</caption>
  <thead>
    <tr>
      <th scope="col">المنطقة</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">EU</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

العناصر وأدوارها

العنصر الغرض
<caption> ملخص الجدول، تقرأه قارئات الشاشة أولا
<thead> رؤوس الأعمدة، تُعرَض منفصلة عن الجسم
<tbody> صفوف البيانات
<tfoot> المجاميع والحواشي، توضَع في الأسفل بغض النظر عن موضع الشيفرة
<th scope="col"> رأس عمود
<th scope="row"> رأس صف (مثل أول خلية في كل صف)
<td> خلية بيانات

أنماط التجاوب

  • التمرير الأفقي: غلّف الجدول في <div style="overflow-x:auto"> كي تستطيع النوافذ الضيقة التمرير بدل كسر التخطيط.
  • التكديس على الجوال: كرّر الرؤوس كسمات data-label واقلب الصفوف إلى بطاقات رأسية عبر CSS، جيد لمجموعات البيانات الصغيرة.
  • إعادة التدفق بالشبكة: يمكن إعادة بناء الجداول المعقّدة بـ CSS Grid، لكنها تفقد التنقل الأصلي بلوحة المفاتيح؛ يستحق ذلك للوحات المعلومات فقط.

قائمة تحقق إتاحة الوصول

  • لكل <th> سمة scope.
  • تستخدم الامتدادات المعقّدة headers="..." لربط خلايا البيانات بمعرّفات الرؤوس.
  • يلخّص العنوان غرض الجدول.
  • لا تستخدم الجداول للتخطيط البصري، استخدم CSS Grid أو Flexbox.

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

نعم. بيانات حافظة جدول البيانات هي TSV (مفصولة بجدولات)، يحلّلها المولّد أصليا. تصبح الصفوف <tr> والخلايا المفصولة بجدولات تصبح <td>.

أصناف CSS لأي شيء تتحكم فيه؛ والأنماط المضمّنة للبريد الإلكتروني (حيث تُحجَب أوراق الأنماط الخارجية غالبا). ينتج وضعا Bootstrap وTailwind ترميز أصناف جاهز الاستخدام لتلك الأطر.

ليس تلقائيا. تصبح كل قيمة مستوردة خلية منفصلة. بعد نسخ HTML، أضف colspan أو rowspan بنفسك وراجع ارتباطات الرؤوس، إذ قد تتطلب الخلايا المدمجة سمتي id وheaders.

نعم، تُضاف سمتا scope="col" وscope="row"، ويُنتَج <caption> حين توفّر واحدا. تحقق بقارئة شاشة أو امتداد axe DevTools للجداول المعقّدة.

أدوات ذات صلة

مولّد إعدادات Webpack

أنشئ ملف webpack.config.js لـ webpack 5 لمشاريع JavaScript الخالصة أو React أو Vue: مع TypeScript وBabel وCSS أو Sass والصور وHtmlWebpackPlugin وخادم التطوير وسطر npm install.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مدقّق OpenAPI

الصق مستند OpenAPI أو Swagger بصيغة JSON أو YAML وافحص بنيته الأساسية: حقل الإصدار وكائن info والمسارات، مع أخطاء وتحذيرات واضحة.

منسّق PHP

أضف فواصل أسطر ومسافات بادئة من مسافتين أو 4 مسافات إلى مقطع PHP بسيط. راجع النتيجة: فهذه الأداة ليست محلّل PHP ولا تطبّق PSR-12.

مولّد مؤشرات التحميل بلغة CSS

أنشئ دوّارًا دائريًا بـ CSS خالص: اضبط القطر وسماكة الحدود واللون وسرعة الدوران، وشاهد المعاينة المباشرة، وانسخ كود CSS جاهزًا للاستخدام. بلا SVG وبلا JavaScript.

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