مولّد جداول HTML

اكتب الخلايا في الشبكة، أو الصق CSV أو TSV من جدول بيانات وحمّله في الجدول. اختر صف العناوين والعمود، وأضف عنواناً للجدول، ثم انسخ شيفرة HTML.

مجانية تعمل داخل متصفحك آخر مراجعة: الثلاثاء، 30 جمادى الأولى 1448 بعد الهجرة

تعمل هذه الأداة داخل متصفحك. ما تكتبه فيها لا يُرسل إلينا.

طريقة الاستخدام

  1. اكتب الخلايا في الشبكة، أو الصق CSV أو TSV تحت الصق CSV أو TSV (اختياري) واضغط تحميل في الجدول.
  2. ضع علامة على الصف الأول عنوان والعمود الأول عنوان لتحديد خلايا العناوين.
  3. اكتب عنوان الجدول يصف ما يعرضه الجدول. وضع علامة على أضف تنسيقاً بسيطاً إن احتاج الجدول إلى حدود.
  4. انسخ مربع HTML أو اضغط تنزيل، والصق الشيفرة في صفحتك.

لماذا لخلايا العناوين نطاق؟

خلية العنوان عنصر th وليس td. وتحدد سمة scope الخلايا التي تسمّيها: col لعنوان فوق عمود، وrow لعنوان في بداية صف. يعلن قارئ الشاشة هذه العناوين مع كل خلية بيانات، فيعرف الزائر الذي لا يرى الشبكة معنى كل رقم.

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

رأس فوق عمود: th مع scope col؛  رأس في بداية صف: th مع scope row؛  بيانات: td

اللصق من جدول البيانات والترميز

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

تُرمَّز نصوص كل خلية قبل كتابتها. فالحرف مثل أصغر من أو علامة & يصبح مرجع حرف، فيظهر نصاً في الصفحة ولا يُقرأ كعلامة. ويُملأ الصف القصير بخلايا فارغة، فيكون لكل صف عدد الخلايا نفسه.

مثال محلول: جدول من عمودين مع صف عناوين وعمود عناوين

خذ الخليتين الشهر والمبيعات في الصف الأول، والخليتين يناير و1200 في الصف الثاني، مع اعتبار الصف الأول والعمود الأول عنواناً، والعنوان المبيعات.

يبدأ الجدول بعنصر caption يقرأ المبيعات، ثم رأس فيه خليتا عنوان، كل منهما بالسمة scope col، ثم جسم تكون فيه يناير خلية عنوان بالسمة scope row، و1200 خلية بيانات.

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

ماذا تفعل سمة scope؟

تخبر التقنيات المساعدة بالخلايا التي يسمّيها العنوان. فالقيمة col تعني أن العنوان يقع فوق عموده، والقيمة row تعني أنه يقع في بداية صفه. ومن دون scope يضطر قارئ الشاشة إلى تخمين العلاقة.

متى أستخدم عمود العناوين؟

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

لماذا يحتاج الجدول إلى عنوان؟

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

أي فاصل أختار لجدول البيانات؟

اختر علامة التبويب للنص المنسوخ من جدول بيانات، والفاصلة المنقوطة لملف CSV محفوظ بلغة تستخدم الفاصلة للجزء العشري. ويعمل الكشف التلقائي في معظم الحالات، وتعرض المعاينة النتيجة قبل النسخ.

هل يغيّر التنسيق البسيط الجداول الأخرى في صفحتي؟

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

هل يُرسل الجدول الذي أكتبه أو ألصقه أو يُحفظ في أي مكان؟

لا. يُصنع الجدول والمعاينة وشيفرة HTML في متصفحك. ولا يُخزَّن شيء ولا يُرسل إلى خادمنا، لذلك انسخ الشيفرة أو نزّلها قبل أن تغادر الصفحة.

المصادر

آخر مراجعة للأرقام والنص: الثلاثاء، 30 جمادى الأولى 1448 بعد الهجرة.

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