مولّد جداول HTML

كيفية إنشاء جدول HTML

1. املأ الشبكة. استخدم إضافة صف وإضافة عمود وحذف الصف الأخير وحذف العمود الأخير، أو أزرار × بجانب كل صف وعمود. ويعيدك زر جدول فارغ جديد إلى شبكة فارغة بحجم 3 × 3.
2. لإعادة استخدام بيانات موجودة، الصق CSV أو خلايا منسوخة من Excel أو LibreOffice أو Google Sheets في استيراد بيانات CSV أو جدول بيانات، وتحقق من الفاصل، ثم انقر استيراد. ويمكنك أيضًا لصق كتلة من خلايا جدول البيانات مباشرةً في أي خلية من الشبكة.
3. أضف التسمية التوضيحية، واختر ما إذا كان الصف الأول صف عناوين والعمود الأول عمود عناوين.
4. في قسم التنسيق، اختر دون أنماط أو صنف CSS أو أنماط مضمّنة، وعدّل لون الحدود وخلفية العناوين وصفوف مخططة إن شئت.
5. راجع معاينة، ثم انقر نسخ HTML أو نزّل الشيفرة كملف .html.

ترميز جداول سهل الوصول

لا يكون الجدول سهل الوصول إلا إذا استطاعت قارئات الشاشة معرفة الخلايا التي تمثل عناوين وما الذي تصفه. تكتب هذه الأداة البنية التي يوصي بها معيار HTML وتقنيات WCAG:

• <caption> يمنح الجدول اسمًا. تعلنه قارئات الشاشة عند الدخول إلى الجدول، ويساعد كل قارئ على فهم ما ينظر إليه. اجعله قصيرًا ووصفيًا.
• <thead> و<tbody> يفصلان صف العناوين عن صفوف البيانات. ويمكن للمتصفحات تكرار <thead> في كل صفحة مطبوعة.
• <th scope="col"> يحدد كل عنوان عمود، ومع خيار العمود الأول عمود عناوين يحدد <th scope="row"> الخلية الأولى في كل صف. وعندما ينتقل مستخدم قارئ الشاشة إلى خلية بيانات، يستطيع القارئ نطق العناوين المقابلة لها، مثل «احترافية، السعر، 12 $».

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

خيارات التنسيق

• دون أنماط يكتب ترميزًا بسيطًا يرث أنماط الجداول في موقعك. وهو الخيار الأفضل لنظام إدارة محتوى أو لموقع يعتمد نظام تصميم.
• صنف CSS يضيف class="…" إلى <table> ويعرض كتلة CSS مطابقة لتلصقها في ملف الأنماط. ويُنظَّف اسم الصنف ليقتصر على الأحرف اللاتينية والأرقام والشرطات والشرطات السفلية، فيبقى دائمًا محددًا صالحًا.
• أنماط مضمّنة يضع سمات style على كل عنصر. الشيفرة أطول، لكنها ما تحتاجه رسائل البريد الإلكتروني بصيغة HTML، لأن كثيرًا من برامج البريد تتجاهل كتل <style>. وعند استخدام صنف، يضيف زر تنزيل شيفرة CSS داخل عنصر <style>.

لا تُكتب في CSS إلا ألوان ست عشرية حقيقية مأخوذة من منتقيات الألوان، فلا يمكن أن يتسلل شيء غير متوقع إلى أنماطك.

التهريب والأمان

تُهرَّب كل خلية: تصبح < و> و& هي < و> و&، فيظهر نص مثل <b> أو a < b كما كتبته تمامًا بدل أن يُفسَّر كترميز. وتصبح فواصل الأسطر داخل الخلايا المستوردة <br>. تُبنى المعاينة من هذا الترميز المهرَّب فقط، وتمر عبر أداة تنقية لا تُبقي إلا عناصر الجداول، فلا يمكن لأي سكربت ملصوق أن يُنفَّذ أبدًا.