كيفية إنشاء جدول HTML يمكن الوصول إليه من CSV

أدوات البناء ل تولز.ديف يعني أنني أكتب الكثير من جداول HTML، في الوثائق، في رسائل البريد الإلكتروني للمستخدمين، في الصفحة المقصودة البسيطة في بعض الأحيان. والجدول هو جزء واحد من HTML لا يستمتع أحد بكتابته يدويًا. عشرة صفوف وخمسة أعمدة يزيد عددها عن خمسين علامة خلية، ويجب فتحها وإغلاقها جميعًا بالترتيب الصحيح، وواحدة مفقودة </td> يكسر التخطيط بأكمله بهدوء. كان لدي كومة من البيانات في جدول بيانات وأردت الترميز، لذلك قمت ببناء مولد في الموقع. هذا هو الدليل لذلك.

ليرة تركية؛DR: تولز مولد جدول HTML يأخذ بيانات مفصولة بفواصل أو علامات تبويب ويكتب بيانات كاملة ويمكن الوصول إليها <table> مع <thead>، <tbody>، وخلايا الرأس المناسبة. يمكن أن يصبح الصف الأول <th scope="col"> والعمود الأول <th scope="row">، لذلك تعلن قارئات الشاشة عن الرؤوس الصحيحة. أضف تسمية توضيحية وصفوفًا مخططة وحدودًا، واختر CSS المستند إلى الفئة، أو الأنماط المضمنة للبريد الإلكتروني، أو HTML الدلالي العادي. يتم الهروب من كل خلية. يعمل بالكامل من جانب العميل: لا يوجد تحميل، ولا تسجيل، ويعمل دون اتصال بالإنترنت.

ما هو منشئ جدول HTML؟

يقوم منشئ جدول HTML بتحويل صفوف البيانات إلى ترميز HTML الذي يجعلها كجدول في المتصفح. يمكنك لصق قيم مفصولة بفواصل أو مفصولة بعلامات تبويب، واختيار الشكل الذي يجب أن يبدو عليه الجدول، وتكتب الأداة ملفًا كاملاً <table> العنصر مع <thead>، <tbody>، والصفوف والخلايا الموجودة بداخلها. بدلا من الكتابة اليدوية كل <tr>، <th>، و <td> ومن خلال حساب الخلايا للحفاظ على اصطفاف الأعمدة، يمكنك لصق البيانات مرة واحدة ونسخ العلامات الاحتياطية الجاهزة للنسخ في صفحة أو قالب بريد إلكتروني أو ملف Markdown الذي يسمح بتنسيق HTML الخام.

السبب وراء حصول المولد على مكانه هو أن جدول HTML مطول ومتكرر، والتكرار هو المكان الذي تختبئ فيه الأخطاء. تحتاج كل خلية إلى علامة فتح وإغلاق، وتختلف خلايا الرأس عن خلايا البيانات، ويجب أن يظل الأمر برمته مستطيلًا وإلا فإن المتصفح يسبب فوضى خشنة. إن القيام بذلك يدويًا لأي شيء يتجاوز جدولًا صغيرًا يكون بطيئًا وعرضة للخطأ. تقوم الأداة بذلك بشكل حتمي: حيث تعطيه القيم، وتنتج علامات صالحة ومتسربة ومتداخلة بشكل صحيح.

توجد طبقة إمكانية الوصول أعلى العلامات الأولية التي غالبًا ما يتخطاها الجدول المكتوب بخط اليد، وهي الجزء الذي أهتم به أكثر. يستخدم الجدول المبني بشكل صحيح <th> لخلايا الرأس مع أ scope السمة حتى تتمكن التكنولوجيا المساعدة من الإعلان عن الرأس الذي تنتمي إليه خلية بيانات معينة، ويمكنها حمل ملف <caption> وصف ما يحتويه الجدول. يوضح قسم WHATWG HTML Living Standard&#39؛s الخاص بالبيانات الجدولية هذه العناصر، ويقوم المولد بتطبيقها عليك بدلاً من ترك ملف <div> شبكة تبدو وكأنها طاولة ولكنها تُقرأ كضوضاء لقارئ الشاشة.

لماذا لا تكتب الطاولة باليد فقط؟

بالنسبة لجدول اثنين في اثنين، فإن الكتابة اليدوية أسرع من فتح الأداة، ويجب عليك ذلك. يكسب المولد الاحتفاظ به على الجداول المؤلمة بالفعل: تلك التي تحتوي على بيانات حقيقية، والعديد من الصفوف، والرأس. في تلك، الكتابة اليدوية لها ثلاثة أوضاع فشل متكررة.

الأول عبارة عن بنية مكسورة. افتقد علامة إغلاق واحدة من بين خمسين والمتصفح &#39؛ يؤدي استرداد الأخطاء إلى شيء لا يمكن التنبؤ به، وتفقد دقائق البحث عن الخلية التي بدأتها. والثاني أعمدة غير متناسقة. إذا كان أحد الصفوف يحتوي على أربع خلايا والباقي يحتوي على خمس خلايا، فإن الجدول يصبح ملتويًا، ويكون اكتشاف الصف القصير في جدار العلامات أمرًا صعبًا حقًا. والثالث هو الهروب: لصق البيانات التي تحتوي على <، أ &، أو الضالة " مباشرة إلى الخلية وقمت إما بكسر العلامات أو فتح فتحة حقن صغيرة.

يقوم المولد بإزالة الثلاثة. يقوم بتوسيع الصفوف القصيرة بحيث يحتوي كل صف على نفس عدد الخلايا ويظل الجدول مستطيلًا. فهو دائمًا يغلق ما يفتحه. ويقوم HTML بإخفاء كل قيمة خلية، لذا أ < يصبح < ويتم عرضه كنص بدلاً من قراءته كعلامة. ما تلصقه هو ما تحصل عليه، ويتم عرضه بأمان.

وهنا القرار في جدول واحد.

حالة	يستخدم	لماذا
طاولة صغيرة اثنين في اثنين	اكتبها باليد	أسرع من فتح أي شيء
بيانات حقيقية مع العديد من الصفوف والرأس	مولد جدول HTML	الهروب والتعشيش والمحاذاة هي المكان الذي تنكسر فيه الطاولات اليدوية
تريد جدول Markdown بدلاً من ذلك	مولد جدول تخفيض السعر	نفس الفكرة، إخراج Markdown بنكهة GitHub
أنت فقط تريد عرض ملف CSV أو التحقق منه	عارض CSV	اقرأ البيانات دون إنشاء علامات

كيف أجعل الطاولة في متناول الجميع؟

هذا هو السؤال الذي يفصل بين الجدول الذي يبدو صحيحًا والجدول الذي يناسب الجميع، لذلك يحصل على قسم خاص به. هناك شيئان مهمان: خلايا الرأس والتعليق.

خلايا الرأس أولاً. في الجدول الحقيقي، يجب أن تكون الخلايا التي تسمي الصفوف أو الأعمدة <th>لا <td>وكل <th> ينبغي أن تحمل scope السمة تقول ما إذا كان يرأس عمودًا (scope="col") أو صف (scope="row"). استخدام قارئات الشاشة scope للإعلان عن الرأس ذي الصلة قبل كل خلية بيانات، حتى يسمع المستمع &quot؛ الدور: مهندس واقتباس؛ بدلاً من مجرد &quot؛ مهندس واقتباس؛ بدون سياق. ينبعث خيار رأس الصف الأول للمولد &#39؛ <th scope="col"> بالنسبة للصف العلوي، ينبعث خيار رأس العمود الأول <th scope="row"> للخلية الرائدة في كل صف من الجسم. يوصي البرنامج التعليمي WAI الخاص بـ W3C&#39؛s على الجداول بهذا النمط بالضبط لجداول البيانات البسيطة.

التسمية التوضيحية هي القطعة الثانية. أ <caption> العنصر، الذي يقع مباشرة داخل الجدول، يعطي الجدول عنوانًا تقرأه التكنولوجيا المساعدة ويراه المستخدمون المبصرون فوق الشبكة. إنه المعادل الذي يمكن الوصول إليه للجملة التي ستكتبها فوق الجدول على أي حال. يضيف المولد واحدًا عند ملء حقل التسمية التوضيحية، ويهرب منه مثل أي نص آخر. بين التسمية التوضيحية والرؤوس ذات النطاق، يكون الإخراج عبارة عن جدول يمكن لقارئ الشاشة التنقل فيه بدلاً من الشكل الذي يتعثر فيه.

ما الفرق بين أوضاع التصميم؟

توفر الأداة ثلاث طرق لتقديم التصميم، لأن المكان الذي تتجه إليه الطاولة يغير ما ينجح.

يضيف وضع الفصل أسماء الفئات إلى الجدول ويخرج كتلة مطابقة من CSS يمكنك إسقاطها في ورقة الأنماط الخاصة بك. هذا هو الاختيار الصحيح لموقع الويب: يظل الترميز نظيفًا، ويعيش التصميم في مكان واحد، وميزات مثل استخدام خطوط الحمار الوحشي tbody tr:nth-child(even)، والذي يعمل فقط من ورقة الأنماط. بدلاً من ذلك، يقوم الوضع المضمن بكتابة الأنماط مباشرة على كل عنصر باستخدام style سمات. هذا ترميز أقبح، ولكنه ما تحتاجه للبريد الإلكتروني بتنسيق HTML، حيث يقوم معظم العملاء بتجريده <style> الكتل وCSS الخارجية، لذلك يجب أن يستمر التصميم في كل عنصر. لا يوجد وضع يقوم بإخراج HTML دلالي عادي بدون فئات ولا أنماط على الإطلاق، وهو ما تريده عندما يكون لديك نظام تصميم خاص بك وتحتاج فقط إلى بنية صحيحة يمكن الوصول إليها لتعليقها.

أصل إلى وضع الفصل افتراضيًا، والوضع المضمن فقط عندما أقوم باللصق في رسالة بريد إلكتروني، ولا شيء عندما أقوم بإسقاط الجدول في موقع يقوم بالفعل بتصميم جداوله عالميًا. تتيح لك الأداة التبديل بينها دون إعادة إدخال بياناتك، لذا فإن محاولة الثلاثة لمعرفة أي منها يناسبك هي بضع نقرات.

كيف أستخدم المولد؟

التدفق عبارة عن أربع خطوات. لصق صفوف مفصولة بفواصل أو مفصولة بعلامات تبويب في مربع الإدخال؛ يتم اكتشاف المحدد تلقائيًا، ويمكنك تجاوزه إذا كانت بياناتك غامضة. قرر ما إذا كان الصف الأول عبارة عن رأس عمود وما إذا كان العمود الأول من كل صف عبارة عن رأس صف. أضف تسمية توضيحية، وقم بتشغيل صفوف مخططة، أو حدود، أو تخطيط مضغوط، واختر CSS المستند إلى الفئة، أو الأنماط المضمنة، أو HTML العادي. ثم انقر فوق إنشاء HTML ونسخه، بالإضافة إلى CSS المطابق في وضع الفصل.

يتبع التحليل RFC 4180، وهو المعيار غير الرسمي لـ CSV، لذلك يمكن أن يحتوي الحقل الملفوف بعلامات اقتباس مزدوجة على المحدد ويصبح الاقتباس المزدوج داخل الحقل المقتبس اقتباسًا واحدًا. وهذا يعني خلية مثل "Doe, Jane" يبقى خلية واحدة بدلا من الانقسام عند الفاصلة. ولأن كل شيء يعمل في متصفحك، يمكنك لصق البيانات التي تتضمن أسماء العملاء أو الأرقام الداخلية أو أي شيء آخر لا تريده على الخادم، ولا يترك جهازك أبدًا. هذا النموذج من جانب العميل هو نفسه الموجود خلف بقية الموقع، الموضح في أدوات خصوصية البيانات عبر الإنترنت مرشد.

كيف يتناسب هذا مع الأدوات الأخرى؟

يوجد منشئ جدول HTML في مجموعة صغيرة من الأدوات التي تأخذ جميعها البيانات المنظمة وتعيد علامات التنظيف. أقرب جار لها هو مولد جدول تخفيض السعر، الذي يقوم بنفس المهمة ولكنه يقوم بإخراج Markdown بنكهة GitHub للقراءات والمشكلات بدلاً من HTML لصفحات الويب. عندما يريد ترميز الجدول &#39؛ الذي تم إنشاؤه الترتيب، أو يكون لديك كومة من HTML للجدول المكتوب بخط اليد لإعادة المسافة البادئة، فإن منسق HTML يجملها. وعندما تنتقل بين مستندات HTML وMarkdown، فإن محول HTML إلى Markdown يتعامل مع الرحلة ذهابًا وإيابًا، بما في ذلك الطاولات.

فكرة الربط هي أن البيانات تعيش في شكل ما وتحتاج إليها في شكل آخر، وأن الأداة الحتمية تقوم بالترجمة بشكل أفضل من قيام الشخص بتحرير العلامات يدويًا. إذا قمت بالبناء للويب، فإن مجموعة أدوات مطور الويب يُظهر التقرير كيف تتناسب هذه العناصر معًا، و أدوات إنتاجية المطور يغطي الدليل المجموعة الأوسع من الأدوات المساعدة الصغيرة التي توفر بضع دقائق لكل منها، عدة مرات في اليوم.

مثال عملي من كتابة الوثائق

اسمحوا لي أن أجعل هذا ملموسا. الكثير من الوثائق حول الموقع عبارة عن مجموعة من مقارنات الميزات والجداول المرجعية: أي أداة تفعل ماذا، وأي حدود تنطبق على أين، وما يعنيه خيار معين. تبدأ معظم هذه البيانات في العمل في جدول بيانات، لأن جدول البيانات هو المكان الذي يسهل فيه تحريرها وفرزها. كان الوصول إلى الصفحة يعني إما التصدير إلى Markdown، وهو ما لا تعرضه بعض صفحاتي، أو كتابة جدول HTML يدويًا، والذي يعد لعشر دقائق بائسة حقًا بالنسبة لمرجع مكون من عشرين صفًا.

الآن أقوم بنسخ الأعمدة مباشرة من جدول البيانات، مما يضع قيمًا مفصولة بعلامات تبويب على الحافظة، وألصقها في المولد، وأدعها تكتشف تلقائيًا محدد علامة التبويب. أحتفظ بالصف الأول كرأس، وأضيف تعليقًا يصف الجدول، وأقوم بتشغيل الصفوف والحدود المخططة في وضع الفصل، وأنسخ كلاً من HTML وCSS. يسقط الترميز في الصفحة، ويدخل CSS في ورقة الأنماط مرة واحدة ويعاد استخدامه بواسطة كل جدول بعد ذلك، ويستغرق الأمر برمته أقل من دقيقة. تخرج خلايا الرأس كـ <th scope="col">، بحيث يمكن الوصول إلى الجدول دون أن أفكر فيه، ويتم الهروب من كل قيمة، وبالتالي فإن الصف الذي يحتوي على أ < في مرجع الكود لا يؤدي إلى تفجير الصفحة.

السبب وراء استخدام المولد بدلاً من كتابة هذه الجداول يدويًا ليس أن HTML صعب، بل أن HTML ممل والأجزاء المملة هي المكان الذي أقوم فيه بإدخال الأخطاء. إن تفريغ سمات كتابة العلامات والهروب وإمكانية الوصول إلى الأداة يعني أن الجدول صحيح في اللصق الأول، وأنني أنفق انتباهي على محتوى الجدول بدلاً من السباكة. بالنسبة للبريد الإلكتروني، أقوم بتجديد نفس البيانات في الوضع المضمن، لأن شريط أداة النشرة الإخبارية <style> الكتل، والنسخة المضمنة تبقى على قيد الحياة في الرحلة سليمة.

ما هي الحدود التي تستحق المعرفة عنها؟

بعض الحواف الصادقة. الأول هو أن هذه الأداة تبني بيانات الجداول، من النوع الذي يحتوي على رؤوس وصفوف من القيم. إنها ليست أداة تخطيط، ولا تقوم بامتداد الأعمدة أو نطاق الصفوف، وهي حيل الخلايا المدمجة التي تراها أحيانًا في الجداول المعقدة. تجعل الخلايا المدمجة الجدول أكثر صعوبة على قارئات الشاشة للتنقل على أي حال، وبالنسبة للغالبية العظمى من البيانات الجدولية، لا تحتاج إليها. إذا كنت بحاجة حقًا إلى رأس مدمج يمتد على عدة أعمدة، فهذا يعد تعديلًا يدويًا للعلامات التي تم إنشاؤها، و منسق HTML سوف يبقيه مرتبا بعد ذلك.

والثاني هو أن المولد يقرأ بياناتك كنص ولا يحاول أن يكون ذكيًا بشأن الأنواع. يتم إصدار عمود من الأرقام كنص في كل خلية، وهو مناسب تمامًا للعرض؛ فهو لا يقوم بمحاذاة الأرقام بشكل صحيح أو إضافة آلاف الفواصل، لأن تلك هي قرارات التصميم والتنسيق التي تخصك. ما يضمنه هو أن القيمة التي قمت بلصقها هي القيمة الموجودة في الخلية، والتي تم الهروب منها ودون تغيير.

والثالث هو غموض المحدد. يعمل الاكتشاف التلقائي من خلال العثور على الفاصل الذي يعطي عدد الأعمدة الأكثر اتساقًا عبر صفوفك، وهو موثوق به لتنظيف CSV وTSV. إذا كانت بياناتك غامضة حقًا، على سبيل المثال القيم التي تحتوي على فواصل غير مقتبسة في بعض الصفوف، فقد يؤدي الاكتشاف إلى تخمين خاطئ، ولهذا السبب يكون المحدد تجاوزًا يدويًا وليس قرارًا ثابتًا. قم بتعيينه بشكل صريح والتحليل حتمي.

أخيرًا، يعد CSS الذي تم إنشاؤه في وضع الفصل نقطة بداية معقولة ومحايدة: خلفية رأسية خفيفة، وحدود رفيعة، وحشوة مريحة. من المفترض أن يتم تحريره. قم بتغيير الألوان لتتناسب مع علامتك التجارية، واضبط الحشو، وأسقط الشريط؛ إنه CSS عادي بأسماء فئات واضحة، ومهمة الأداة &#39؛ هي حفظ المسودة الأولى لك، وليس إملاء المظهر النهائي.

الأسئلة المتداولة

ما هو منشئ جدول HTML؟ يقوم منشئ جدول HTML بتحويل صفوف البيانات إلى ترميز HTML الذي يجعلها كجدول. تقوم بلصق قيم CSV أو قيم مفصولة بعلامات تبويب وتكتب ملفًا كاملاً العنصر مع ، والخلايا، لذلك لا يتعين عليك كتابة كل علامة يدويًا.

كيف يمكنني تحويل CSV إلى جدول HTML؟ الصق ملف CSV الخاص بك في مربع الإدخال، واحتفظ بالصف الأول كرأس إذا كان يحتوي على أسماء الأعمدة، واختر التصميم الخاص بك، ثم انقر فوق إنشاء. تكتشف الأداة المحدد، وتبني الجدول، وتمنحك HTML الذي يمكنك نسخه مباشرة إلى الصفحة.

كيف أجعل الطاولة في متناول الجميع؟ استخدم خلايا الرأس والتعليق. قم بتشغيل رأس الصف الأول حتى تصبح عناوين الأعمدة ، قم بتمكين رأس العمود الأول لتسميات الصفوف، وأضف تعليقًا يصف الجدول. ثم تعلن قارئات الشاشة عن الرأس الصحيح لكل خلية.

ما الفرق بين أوضاع التصميم؟ يضيف وضع الفئة أسماء الفئات وكتلة CSS منفصلة، وهو الأفضل لموقع الويب. يكتب الوضع المضمن الأنماط مباشرة على كل عنصر، والذي يبقى بعد لصقه في البريد الإلكتروني. لا يوجد وضع يقوم بإخراج HTML دلالي عادي حتى تتمكن من تطبيق ورقة الأنماط الخاصة بك.

هل تم الهروب من الأحرف الخاصة في بياناتي؟ نعم. يتم تجنب كل قيمة خلية بتنسيق HTML، لذا فإن الأحرف مثل &lt؛، &gt؛، &amp؛ و &quot؛ تتم كتابتها ككيانات وعرضها كنص بدلاً من تفسيرها على أنها علامات. وهذا يمنع الجدول من الانهيار عندما تحتوي البيانات على أقواس زاوية أو علامات الضم.

هل يمكنه التعامل مع الفواصل داخل الخلية؟ نعم. يتبع المحلل اللغوي RFC 4180، لذلك يمكن أن يحتوي الحقل الملفوف بعلامات اقتباس مزدوجة على المحدد، ويصبح الاقتباس المزدوج داخل الحقل المقتبس اقتباسًا واحدًا. تظل الفواصل المقتبسة جزءًا من الخلية بدلاً من بدء عمود جديد.

هل يتم تحميل بياناتي في أي مكان؟ لا. يحدث التحويل بالكامل في متصفحك باستخدام JavaScript على جهازك. لا يتم تحميل بياناتك أو تسجيلها أو تخزينها مطلقًا، وتستمر الأداة في العمل مع الشبكة المنفصلة بمجرد تحميل الصفحة.

هل مولد جدول HTML مجاني؟ نعم. إنه مجاني تمامًا بدون تسجيل ولا علامة مائية ولا حد أقصى للاستخدام. قم بإنشاء العديد من جداول HTML التي تحتاجها للمشاريع الشخصية أو التجارية.