ما هو منشئ جدول HTML؟
يقوم منشئ جدول HTML بتحويل صفوف البيانات إلى علامات HTML التي تعرضها كجدول في المتصفح. يمكنك لصق قيم مفصولة بفواصل أو مفصولة بعلامات تبويب، واختيار الشكل الذي يجب أن يبدو عليه الجدول، وتكتب الأداة عنصر <table> كاملاً مع <thead>، و<tbody>، وصفوف وخلايا الجدول. بدلاً من الكتابة اليدوية لكل <tr> و<th> و<td> وخلايا العد للحفاظ على محاذاة الأعمدة، يمكنك لصق البيانات مرة واحدة ونسخ العلامات الاحتياطية الجاهزة للنسخ في صفحة ويب أو قالب بريد إلكتروني أو ملف وثائق.
إنه موجود لأن كتابة جدول HTML يدويًا أمر متكرر وعرضة للخطأ. يحتاج الجدول الذي يحتوي على عشرة صفوف وخمسة أعمدة إلى أكثر من خمسين علامة خلية، جميعها مفتوحة ومغلقة بشكل صحيح، ويفقد </td> واحد التخطيط. تضيف إمكانية الوصول مزيدًا من التفاصيل: يجب أن تكون خلايا الرأس <th> مع سمة نطاق حتى تعلن عنها قارئات الشاشة، وغالبًا ما يحتاج الجدول إلى <caption> يصف محتوياته. يطبق هذا المولد هذه القواعد عليك. يمكن أن يصبح الصف الأول رأسًا مناسبًا، ويمكن أن يصبح العمود الأول من كل صف رأس صف، ويتم تجنب كل قيمة خلية بتنسيق HTML بحيث يتم عرض أحرف مثل < و& كنص بدلاً من كسر الصفحة.
يتم التحويل من جانب العميل. يتم تحليل البيانات التي تلصقها وتحويلها بلغة JavaScript على جهازك الخاص، لذلك لا يتم تحميل الصفوف أبدًا؛ يؤدي الضغط على إنشاء سجل استخدام يحمل وضع النمط فقط، وتستمر الأداة في العمل مع الشبكة المنفصلة بمجرد تحميل الصفحة. يمكنك اختيار كيفية تسليم التصميم: أسماء الفئات الحديثة مع كتلة CSS المطابقة، أو الأنماط المضمنة المستقلة التي لا تزال قائمة والتي يتم لصقها في بريد إلكتروني، أو HTML الدلالي العادي بدون تصميم على الإطلاق. تتيح لك خيارات الصفوف المخططة والحدود والتخطيط المدمج والمسافة البادئة مطابقة المخرجات بالمشروع الذي تقوم بلصقها فيه.
فيما يلي مثال عملي لمولد HTML للجدول. لصق ثلاثة أسطر، `Plan،Price،Seats`، `Free،$0،1` and `Pro،"$1،200"،10`، type Pricing كتعليق واضغط على Generate. الإخراج هو <table> مع <caption>Pricing</caption>، وثلاثة <th cope= "col"> رؤوس وصفين من الجسم، ويبقى "$1،200" المقتبس خلية واحدة بدلاً من الانقسام عند الفاصلة الخاصة بها. يُستخدم كمولد جدول لرسائل البريد الإلكتروني بتنسيق HTML، وقم بتبديل النمط إلى الأنماط المضمنة وتحمل كل خلية حشوة وحدود خاصة بها، لذلك ليست هناك حاجة إلى ورقة أنماط.
كيفية استخدام مولد جدول HTML؟
لصق بياناتك
الصق صفوفًا مفصولة بفواصل أو مفصولة بعلامات تبويب في مربع الإدخال. يتم اكتشاف المحدد تلقائيًا، أو يمكنك ضبطه يدويًا إذا كانت البيانات غامضة.
اختر خيارات الرأس
قرر ما إذا كان الصف الأول عبارة عن رأس عمود وما إذا كان العمود الأول من كل صف عبارة عن رأس صف، لذلك تعلن قارئات الشاشة عن الخلايا الصحيحة.
نمط الطاولة
أضف تسمية توضيحية، وقم بتشغيل صفوف أو حدود مخططة، واختر تخطيطًا مضغوطًا، واختر CSS المستند إلى الفئة، أو الأنماط المضمنة، أو HTML الدلالي العادي.
إنشاء ونسخ
انقر فوق إنشاء لإنشاء الجدول، ثم انسخ HTML، وفي وضع فئات CSS، انسخ CSS المطابق في مشروعك. تبقى صفوفك على جهازك.
الميزات الرئيسية
إدخال CSV وTSV
لصق الفاصلة أو علامة التبويب أو الفاصلة المنقوطة أو البيانات المفصولة بالأنبوب. يتم اكتشاف المحدد تلقائيًا، ويتم تحليل الحقول المقتبسة ذات الفواصل المضمنة بشكل صحيح.
خلايا رأس يمكن الوصول إليها
يمكن أن يصبح الصف الأول <th cope= "col"> والعمود الأول <th cope="row">، لذا تعلن التكنولوجيا المساعدة عن رؤوس لكل خلية بيانات.
ثلاثة أوضاع للتصميم
قم بإصدار أسماء الفئات باستخدام كتلة CSS مطابقة، أو أنماط مضمنة قائمة بذاتها للبريد الإلكتروني، أو HTML دلالي عادي بدون تصميم، اعتمادًا على مكان وصول الجدول.
صفوف مخططة وحدود وتعليق
أضف خطوط الحمار الوحشي، وحدود الخلايا، والتخطيط المدمج، وعنصر <caption>، وكلها مطبقة بشكل متسق عبر كل صف من الجدول.
Frequently Asked Questions
Related Tools
HTML Formatter
Format, beautify, and minify HTML online. Re-indents messy or minified markup, keeps script, style, and pre content verbatim, and runs entirely in your browser.
HTML to Markdown
Convert HTML to clean Markdown instantly. Turns headings, lists, links, images, blockquotes, code blocks and tables into portable GitHub Flavored Markdown. Tolerant of messy CMS markup. Runs client-side.
Markdown Table Generator
Build Markdown tables in a spreadsheet-style editor - import CSV, Excel, or an existing table, set alignment, copy clean GFM
Markdown TOC Generator
Generate a linked table of contents from Markdown headings
Comments
0 comments
No comments yet. Be the first to share your thoughts!