مولّد جداول HTML
تبقى البيانات الملصقة ومحتويات الخلايا وHTML المنشأ في هذا المتصفح. تستخدم خطوات المسار تخزين الجلسة في علامة التبويب هذه؛ ولا ترسل القيم عبر خوادمنا ولا تضاف إلى عنوان URL.
يدعم حقول CSV الموضوعة بين علامتي اقتباس، وعلامات الجدولة من جداول البيانات، والصفوف المفصولة بفاصلة منقوطة، وفواصل Markdown. الحد الأقصى: 50 صفا و20 عمودا و1,000 محرف في كل خلية.
كتابة <table> و<thead> و<tbody> و<tr> يدويا لمجموعة بيانات من عشرة صفوف أمر ممل. الصق بيانات جدول مفصولة بجدولات أو CSV أو Markdown، وينتج هذا المولّد HTML جيد البنية بوسوم دلالية، و<caption> اختياري، وسمات scope مناسبة، واختيار من تخطيط الزِّبرا أو الحدود أو أصناف Tailwind، جاهزا لإدراجه في مقال أو لوحة معلومات.
كيف تبني جدول HTML
-
1
الصق بياناتك
TSV (انسخ من جدول بيانات) أو CSV أو صيغة جدول Markdown، كلها تُحلَّل صحيحا.
-
2
اختر خيارات الجدول
صف رأس، وعنوان، وتخطيط زِبرا، وصفوف متضامّة أو فسيحة.
-
3
اختر وضع التنسيق
HTML عادي، أو أنماط مضمّنة، أو أصناف Bootstrap، أو أصناف Tailwind.
-
4
انسخ الترميز
الناتج HTML صالح ودلالي: لا شبكة `<div>` تتظاهر بأنها جدول.
بنية الجدول الدلالية
الجداول المبنية بوسوم سليمة متاحة، وملائمة لقارئات الشاشة، وسهلة التنسيق. ينتج المولّد هذه البنية:
<table>
<caption>Q1 sales figures</caption>
<thead>
<tr>
<th scope="col">Region</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 للجداول المعقّدة.
أدوات ذات صلة
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
منسق JSON
الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.
مولد لوحة الألوان
أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.
محول Base64 إلى Hex
حوّل سلسلة Base64 إلى بايتاتها الأساسية معروضة بالنظام الست عشري (hex). مفيد لفحص الرموز المميزة والمفاتيح والشهادات ورموز JWT.
محول ASCII إلى Hex
حوّل نص ASCII إلى قيم bytes بالنظام الست عشري. يستخدم الناتج رقمين hex لكل محرف، جاهزا لملفات memory dumps أو packet traces أو جداول firmware.
محدد ألوان HEX
اختر لون HEX أو أدخله واحصل على RGB وHSL وCMYK تقريبي والسطوع النسبي ونسب التباين مع الأبيض والأسود.