الجداول هي واحدة من أكثر الطرق شيوعا لتقديم المعلومات على صفحات الويب. إنها تسمح لك بتنظيم البيانات في شكل صفوف وأعمدة ، مما يجعلها سهلة القراءة ومفهومة للمستخدمين. في هذه المقالة ، سنلقي نظرة على إرشادات مفصلة حول كيفية إنشاء جدول خطوة بخطوة.
1. تحديد هيكل الجدول: كم عدد الصفوف والأعمدة التي تريد عرضها. عادة ، يتم استخدام علامة لتحديد بنية الجدول
2. املأ الجدول بالبيانات. يتم تعريف كل خلية من الجدول باستخدام علامة
3. إعداد أنماط للجدول. يمكنك استخدام كس لتغيير مظهر الجدول ، مثل لون الخلفية وحجم الخط والهوامش. لتحديد أنماط الجدول ، استخدم العلامة داخل علامة مستند هتمل.
مثال على الكود:
هذا هو الهيكل الأساسي والخطوات التي يجب اتباعها لبناء جدول على صفحة ويب. لا تنس تصميم الجدول باستخدام الأنماط المناسبة بحيث يكون أكثر جاذبية وقابلية للقراءة للمستخدمين.
- بناء جدول: تعليمات خطوة بخطوة
- اختيار الأداة المناسبة
- تحديد حجم الجدول
- إنشاء رؤوس الأعمدة
- ملء الجدول بالبيانات
- تطبيق الأنماط على جدول
- فحص وتصحيح الجدول
بناء جدول: تعليمات خطوة بخطوة
يعد بناء جدول إحدى المهام الأساسية في تطوير الويب. تسمح لك الجداول بتنظيم المعلومات في شكل مناسب ومنظم. في هذا البرنامج التعليمي ، سنلقي نظرة على الخطوات الأساسية لإنشاء جدول.
- تحديد عدد الصفوف والأعمدة
- إنشاء هيكل الجدول
- إضافة رأس جدول (اختياري)
- إضافة صفوف وأعمدة
- حدد رؤوس الأعمدة (اختياري)
- إنشاء جدول (اختياري)
- أغلق الطاولة
قبل البدء في إنشاء جدول ، تحتاج إلى تحديد عدد الصفوف والأعمدة التي ستحتاجها. سيساعدك هذا في تخطيط موقع البيانات في الجدول.
.
. يمكن أن يحتوي العنوان على وصف قصير أو اسم الجدول.
. يجب أن يتوافق عدد الخلايا في كل صف مع عدد الأعمدة في الجدول. كرر هذا الهيكل لكل صف من الجدول.
في الصف الأول من الجدول. عادة ما تكون عناوين الأعمدة بالخط العريض وقد تحتوي على وصف موجز لمحتويات الأعمدة.
بعد إنشاء الجدول ، يمكنك إضافة أنماط لمنحه المظهر المطلوب. ويمكن القيام بذلك باستخدام كس. على سبيل المثال ، يمكنك إضافة حدود وألوان ومحاذاة لجدول وعناصره.
لإكمال بناء الجدول.
باستخدام هذا الدليل التفصيلي ، يمكنك إنشاء جدول وتنظيم البيانات في نموذج مناسب. تعد الجداول أداة مهمة في تطوير الويب ، لذا انتبه جيدا لهذه العملية وإمكانيات تصميم الجدول.
اختيار الأداة المناسبة
عند إنشاء جدول ، من المهم اختيار الأداة المناسبة التي تسمح لك بإنشاء جدول يحتوي على البيانات والإعدادات اللازمة. هناك العديد من الأدوات الشائعة لإنشاء الجداول:
- مايكروسوفت اكسل هي واحدة من الأدوات الأكثر شعبية لإنشاء الجداول. يوفر مجموعة قوية من الوظائف التي تسمح لك بالعمل مع البيانات وعرضها في شكل مناسب. يوفر إكسيل القدرة على إنشاء الصيغ وتطبيق الأنماط والتنسيق على الخلايا وأتمتة المهام الروتينية.
- جوجل جداول البيانات هو أداة مجانية على الانترنت من جوجل التي توفر مجموعة مماثلة من الوظائف كما اكسل. جداول البيانات جوجل تسمح لك للعمل على الجداول جنبا إلى جنب مع المستخدمين الآخرين ، ومشاركتها وحفظها على السحابة. هذه الأداة سهلة الاستخدام ومناسبة لأولئك الذين يفضلون العمل في بيئة عبر الإنترنت.
- ليبر أوفيس احسب هو البرمجيات الحرة والمفتوحة المصدر التي هي جزء من حزمة ليبر أوفيس. احسب يقدم العديد من الوظائف للعمل مع البيانات ، وتنسيق الجداول ، وإجراء العمليات الحسابية. وهو متوافق مع تنسيق ملف اكسل ، مما يجعل من السهل لتبادل البيانات بين هذه الأدوات.
هذه مجرد قائمة صغيرة من الأدوات المتاحة لإنشاء الجداول. يعتمد اختيارك على تفضيلاتك ومتطلبات المشروع. بغض النظر عن الأداة التي تختارها ، من المهم أن تتعرف على ميزاتها ووظائفها من أجل استخدامها بشكل أكثر فعالية لإنشاء الجدول المطلوب.
تحديد حجم الجدول
يعد تحجيم الجدول خطوة مهمة في إنشاء جدول. يؤثر حجم الجدول على كل من مظهر وتنظيم البيانات داخله.
هناك عدة طرق لتحديد أحجام الجدول في هتمل:
- تعريف الأحجام الثابتة: يمكنك تحديد قيم محددة لعرض وارتفاع الجدول.
- تحديد الأبعاد النسبية: يمكنك تعيين عرض أو ارتفاع الجدول كنسبة مئوية من عرض أو ارتفاع العنصر الأصل.
لتعيين أحجام الجدول الثابتة ، يجب عليك استخدام سمات العرض والارتفاع لعلامة الجدول. على سبيل المثال:
يمكن استخدام خصائص كس لتحديد الحجم النسبي للجدول. على سبيل المثال ، لتعيين عرض الجدول إلى 50٪ من عرض العنصر الأصل:
في هذه الحالة ، سيشغل الجدول نصف عرض العنصر الأصل.
عند اختيار حجم الجدول ، يجدر النظر في كمية البيانات التي تخطط لوضعها بداخله. قد يكون الجدول الصغير جدا غير مريح للقراءة ، وقد يشغل الجدول الكبير جدا مساحة كبيرة جدا على الصفحة.
ضع في اعتبارك عدد الأعمدة والصفوف التي ستحتاجها.
استخدم طرق تحجيم الجدول أعلاه لإنشاء جدول سهل الاستخدام وغني بالمعلومات لموقع الويب الخاص بك.
الخلية 5
في هذا المثال ، يحتوي الجدول على ثلاثة أعمدة تقابل العناوين "العنوان 1 "و" العنوان 2 "و"العنوان 3". يتم تمثيل كل صف من الجدول بعلامة
| . | تساعد رؤوس الأعمدة المستخدم على التنقل بسرعة عبر بيانات الجدول ، لذلك من الضروري إيلاء اهتمام خاص لاسمها الدقيق والمفهوم. | ملء الجدول بالبيانات |
|---|
عندما يكون الجدول قد تم إنشاؤه بالفعل ، فإن الخطوة التالية هي ملئه بالبيانات. للقيام بذلك ، تحتاج إلى تحديد خلايا الجدول التي يجب ملؤها وما هي البيانات.
| الاسم الأول | اسم العائلة | العمر |
|---|---|---|
| 2. إضافة صفوف البيانات إلى الجدول. كل سطر مزين بعلامة | . يتم وضع خلايا البيانات داخل الصف ، المشار إليها بواسطة علامة | . |
| الاسم الأول | اسم العائلة | العمر |
| إيفان | إيفانوف | 25 |
بيتر
| بتروف | 30 | آنا |
|---|---|---|
| سيدوروفا | 28 | 3. كرر الخطوة 2 لكل صف من البيانات المراد إضافتها إلى الجدول. |
| الاسم الأول | اسم العائلة | العمر |
| إيفان | إيفانوف | 25 |
| بيتر | بتروف | 30 |
آنا
| سيدوروفا | 28 | ماريا | سميرنوفا |
|---|---|---|---|
| 32 | 4. يمكنك إضافة أعمدة بيانات إضافية أو تغيير ترتيبها ، إذا لزم الأمر. للقيام بذلك ، ما عليك سوى إضافة أو تغيير خلايا الجدول المناسبة. | اللقب | الاسم |
| العمر | المدينة | إيفانوف | إيفان |
| 25 | موسكو | بتروف | بيتر |
| 30 | سانت بطرسبرغ | سيدوروفا | آنا |
28
نوفوسيبيرسك
سميرنوفا
ماريا
32
- ايكاترينبرج
- 5. املأ الجدول بالبيانات ، وكرر الخطوات من 2 إلى 4 إذا لزم الأمر.
- تطبيق الأنماط على جدول
- عند إنشاء جدول في هتمل ، يمكنك تطبيق أنماط مختلفة لتصميمه. ستساعد الأنماط في تسهيل قراءة الجدول وإبراز العناصر المهمة.
- لتطبيق الأنماط على جدول ، يجب عليك استخدام كس. يمكن تعريف الأنماط مباشرة داخل كود هتمل باستخدام سمات العنصر ، أو ملف كس خارجي.
- الأنماط الرئيسية التي يمكن تطبيقها على الجدول هي:
- لون الخلفية-لون الخلفية لخلايا الجدول;
اللون-لون النص في خلايا الجدول;
25
- موسكو