تسرد جداول البيانات معلومات مختلفة في أعمدة وصفوف لتسهيل القراءة. عادةً ما تكون البيانات رقمية جزئيًا مع تسميات نصية. مثال على ذلك هو جدول البيانات الذي يوضح عدد السعرات الحرارية التي يأكلها الشخص كل يوم. يمكن إنشاء جدول بيانات عبر الإنترنت باستخدام HTML أو لغة مستعرض CSS الأكثر تعقيدًا. يبدو الجدول النهائي تمامًا مثل جدول البيانات الذي تم إنشاؤه في جدول بيانات أو على الورق. الاختلاف الوحيد هو تشفير الخلفية ، والذي لا يُرى إلا بالنظر إلى الكود المصدري. يمكن إنشاء الترميز بواسطة محرري HTML أو النص أو طرق أخرى. هناك العديد من المواقع على الإنترنت التي توفر إمكانية إدخال البيانات ، وتعيين بعض السمات وإنشاء كل ترميز الجدول من أجلك. تُستخدم جداول البيانات عبر الإنترنت عادةً كجزء من صفحة ويب. غالبًا ما تُستخدم جداول البيانات لإنشاء قوائم بالعناصر ذات الفئات ، مثل العناصر المعروضة للبيع. تستخدمها بعض صفحات الويب لإظهار الإحصائيات للحصول على المعلومات. بينما يمكن استخدام جداول البيانات دون اتصال للطباعة أو في التقارير ، فمن الأفضل عادةً استخدامها برامج جداول البيانات ، مثل Microsoft Office Excel ، والتي تقدم العديد من الميزات للعمل مع البيانات. يوضح هذا الدليل كيفية إنشاء جدول بيانات HTML باستخدام برنامج Notepad.
افتح محرر HTML أو مجرد مستند نصي عادي لـ Notepad لإدخال كود HTML. يعمل برنامج Notepad جيدًا إذا كنت معتادًا على ترميز HTML. تجعل برامج تحرير HTML المهام المتكررة أسرع ، لكن البعض ، مثل Frontpage ، يضيف ترميزًا إضافيًا غير ضروري يمكن أن يبطئ صفحات الويب. أفضل ما يمكنك فعله هو كتابة التعليمات البرمجية باستخدام محرر HTML أولاً ، ثم الرجوع وتحرير الكود يدويًا لتنظيفه.
حدد سمات الجدول للحد والعرض ولون الخلفية وألوان الخط. يجب أن تأخذ في الاعتبار تخطيط صفحة الويب وعرضها وألوانها والسمات الأخرى لجعل الجدول سهل القراءة. تحتاج أيضًا إلى تحديد عدد الصفوف والأعمدة المطلوبة للبيانات. ابدأ في تحديد سمات الجدول. (يوضح مثالنا عدد السعرات الحرارية التي يتم تناولها في الغداء والعشاء في كل يوم من أيام الأسبوع. نحتاج إلى ثلاثة أعمدة (اليوم والغداء والعشاء) وسبعة صفوف (اثنان للتسميات وواحد لكل يوم من أيام الأسبوع).
أضف حدًا حول الجدول وخلايا البيانات. تقوم الحدود بفصل البيانات إلى خلايا لتسهيل عرضها. يتم قياسها بالبكسل ويمكن إعطاؤها القيمة 0 لعدم استخدامها. بشكل عام ، لا بأس من استخدام حد ذي بكسل واحد أو بكسلين. علامة الحد هي
bgcolor = الحدود = "CHOSEN_BORDER_WIDTH"
يمكن تغيير لون الحدود بالعلامة
لون الحدود = "CHOSEN_COLOR"
التي تستخدم مصطلحات الألوان الأساسية ، مثل الأحمر أو الأسود أو رموز الألوان السداسية العشرية المكونة من ستة أرقام. تقدم الأشكال السداسية العشرية ألوانًا أكثر. يستخدم المثال الخاص بنا border = "2" و bordercolor = "black".
حدد عرض الطاولة بأكملها. يتم قياسه بالبكسل أو في المائة من حجم الشاشة. وحدات البكسل نهائية والنسب المئوية تسمح للجدول بالتكيف مع أحجام الشاشات المختلفة. حاول الحكم على العرض بناءً على عرض البيانات عبر الصفوف. إذا اكتشفت لاحقًا أن الطاولة رفيعة جدًا أو عريضة جدًا ، فيمكن تغييرها. يستخدم مثالنا العرض = "175".
اضبط لون الخلفية لخلايا البيانات. إنه يختلف عن لون خلفية الصفحة ، والذي يمكن أن يقدم تباينًا جيدًا. العلامة هي
bgcolor = "CHOSEN_COLOR"
تمامًا مثل لون الحدود. يستخدم مثالنا bgcolor = "white".
عيّن لون خط النص في الخلايا. تأكد من تباين اللون جيدًا مع الخلفية ، بحيث يسهل قراءته. يعمل الضوء في الظلام أو الظلام على الضوء بشكل أفضل دائمًا. العلامة هي
الخط = "CHOSEN_COLOR"
مثالنا هو font = "black" ، والذي يتناقض جيدًا مع الخلفية البيضاء.
اكتب علامات الجدول الكاملة بين سهم لليسار ولليمين مع ترك مسافة بين سمات العلامات والبدء بعلامة الجدول في المقدمة. لا يهم ترتيب العلامات ، طالما أن "الجدول" في المقدمة.
حدد عرض العمود. عرض كل عمود يعتمد على عرض الجدول بأكمله. خذ عرض الجدول وقسمه على عدد الخلايا للحصول على أعمدة متساوية الحجم. إذا لزم الأمر ، اضبط عرض العمود ، ولكن لا يمكن أن يتجاوز الإجمالي عرض الجدول. عندما يتغير عرض خلية واحدة ، يجب تعديل الخلايا الأخرى لإجمالي عرض الجدول. (يبلغ عرض المثال الخاص بنا 175 وثلاثة أعمدة لكل صف ، لذا فإن القسمة الزوجية تبلغ 59 تقريبًا. الانقسام الفعلي هو 70 ، 60 ، 40.)
ابدأ في إضافة البيانات الخاصة بك. أولاً ، ابدأ سطرًا جديدًا وأضف صف جدول مع الرمز
أدخل بياناتك للخلية ؛ باستخدام هذا الرمز لتمثيل الخلايا الفارغة:
أغلق الخلية بالعلامة. يتم استخدام علامة لون الحدود لتحديد لون حدود الخلية ، إذا رغبت في ذلك. إذا تم تركه بالخارج ، فسيتم استخدام لون حدود الجدول الافتراضي. كود الخلية الأول في مثالنا هو:
كرر إنشاء خلايا بيانات الجدول ، كل منها في سطر جديد ، حتى تكتمل جميع الخلايا في الصف. ثم قم بإنهاء الصف بالعلامة. ابدأ الصف التالي بنفس العملية ، بدءًا من
أغلق رمز الجدول بامتداد بطاقة شعار. فيما يلي رمز الجدول النهائي الخاص بنا ، إذا انتهى بعد صفين من البيانات.
الأشياء ستحتاج
- محرر HTML أو المفكرة
- البيانات