كيفية إدراج الجداول في HTML. الوضع القياسي تقريبا

09.05.2019

مرحبا عزيزي قراء المدونة! في كثير من الأحيان على صفحات الويب، بالإضافة إلى النصوص والصور، هناك حاجة لعرض البيانات المختلفة في شكل جداول. نعم، هذا أمر مفهوم؛ فالجدول هو الطريقة الأكثر ملاءمة لتقديم كمية كبيرة من المعلومات. لذلك يطرح السؤال: "كيفية إدراج الجداول في HTML؟" . في هذه المقالة سأجيب على هذا السؤال وأعطيك العديد من الأمثلة على جداول HTML المختلفة.

كيفية إنشاء جدول باستخدام HTML

يتم إنشاء جداول HTML في أربع خطوات.

1. في الخطوة الأولى في كود HTML باستخدام علامة مقترنة

نشير للمتصفح إلى أنه تم إدراج جدول في صفحة الويب:

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

2. في الخطوة الثانية، نقوم بتكوين صفوف الجدول عن طريق وضع العلامات المقترنة داخل

. كل عنصر إنشاء سطر منفصل:

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

4. حسنًا، في الخطوة الأخيرة نضع العناصر و محتويات الخلية. يبدو كود HTML الخاص بإدراج جدول في صفحة ويب كما يلي:

العمود 1 العمود 2 العمود 3

الخلية 1-1	الخلية 1-2	الخلية 1-3
الخلية 2-1	الخلية 2-2	الخلية 2-3

سوف يساعدونك على ضبط عرض الحدود. من خلاله يمكنك تغيير سمك ولون الإطارات، وكذلك تغيير نوع الحدود.

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

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

بالإضافة إلى النص، يمكننا وضع الصور في الخلايا باستخدام العلامة :

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

ويتم إدراج الصفوف والخلايا فيه.

هناك بعض القواعد التي يجب مراعاتها عند إنشاء الجداول:

يتم استخدام علامة فقط لإنشاء جدول ;

بطاقة شعار

يمكن أن يكون فقط داخل علامة

;

العلامات

، أي محتوى علامة أخرى تجاهلها المتصفح.

لا يمكن تضمين محتويات الجدول (نص أو صور) إلا في العلامات

- سطر جدول HTML
- عمود (خلية) جدول HTML.

الآن دعونا نحاول دمج كافة العلامات في جدول واحد. للقيام بذلك، سنقوم بإنشاء جدول html يتكون من صفين وثلاثة أعمدة:

من السهل جدًا إنشاء جدول HTML هذا. أولاً، دعونا نضع علامات الجدول نفسه، حيث نضع بداخله العدد المطلوب من الصفوف (في مثالنا، صفين):

ويمكن أن يكون فقط داخل العلامة

و ؛

يجب أن تحتوي خلايا الجدول على بعض المحتوى على الأقل، وإلا فقد لا يعرضها المتصفح على الإطلاق، ولكن إذا كان يجب أن تكون بعض الخلايا فارغة، فعادةً ما يتم وضع مسافة غير منقسمة (HTML الحرفية) فيها؛

يشير الجدول إلى عناصر الحظر في صفحة الويب؛

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

يتم عمل مسافة بادئة صغيرة بين حدود الخلايا الفردية وبين حدود كل خلية ومحتوياتها؛

يتم عرض نص خلايا الرأس (العنصر) بالخط العريض والوسطى؛

لا يتم رسم الحدود حول الجدول وخلاياه بشكل افتراضي.

عنوان الجدول

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

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

هذه طاولة

الخلية 1.1	الخلية 1.2
الخلية 2.1	الخلية 2.2

عرض:

أقسام الجدول

يمكن تقسيم جدول html منطقيًا إلى أجزاء - أقسام. هناك ثلاثة أنواع من الأقسام:

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

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

يتم إنشاء قسم النص بعلامة مقترنة. يمكن أن يحتوي جدول html واحد على عدة أقسام نصية، مما يسمح لك بإنشاء كتل هيكلية يمكن تطبيق أنماط تصميم موحدة عليها.

يتكون قسم الإكمال من علامة مقترنة وداخل حاوية واحدة

يمكن أن يكون هناك واحد فقط.

يجب أن تحتوي كل هذه العلامات المقترنة على العلامات

، والتي تشكل الخطوط المتعلقة بالأقسام المقابلة:

العمود 1	العمود 2	العمود 3
الخلية 1.1	الخلية 1.2	الخلية 1.3
الخلية 2.1	الخلية 2.2	الخلية 2.3
النتيجة 1	النتيجة 2	النتيجة 3

دمج خلايا الجدول

يبقى أن نتحدث عن أهم ما يميز الجداول - دمج الخلايا.لدمج عدة خلايا في خلية واحدة، استخدم سمات علامة colspan وrowspan

و . تحدد سمة colspan عدد الخلايا المجمعة أفقيًا، وعدد الخلايا المدمجة عموديًا:

1.1	1.2-1.3
2.1	2.2	2.3
3.1-4.1	3.2	3.3
3.1-4.1	4.2	4.3

نتيجة المثال:

1.1	1.2-1.3
2.1	2.2	2.3
3.1-4.1	3.2	3.3
3.1-4.1	4.2	4.3

عند دمج الخلايا، من المهم التحقق من عدد الخلايا في كل صف للتأكد من عدم وجود أخطاء. نعم التصميم

يستبدل خليتين، لذا يجب أن يحتوي السطر التالي على علامتين

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

مثال على تعليمات برمجية html غير صحيحة عند دمج الخلايا:

الخلية 1.1		الخلية 1.2
الخلية 2.1	الخلية 2.2

والنتيجة تظهر في المتصفح:

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

سمات العلامة

في هذا المنشور واجهنا بالفعل سمة علامة واحدة

. مع سمة الحدود، التي تحدد سمك الحدود بالبكسل. بشكل افتراضي، يكون 0 وبالتالي يتم عرض الخلايا بدون حدود بشكل افتراضي.

بالإضافة إلى سمة الحدود، هناك العديد من السمات المهمة الأخرى التي تدعمها العلامة

. دعونا ننظر إليهم.

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

سمة الخلفية، التي تحدد صورة الخلفية للجدول. يأخذ عنوان ملف الصورة كقيمته.

bgcolor - يضبط لون خلفية الجدول. يمكن استخدامها مع سمة الخلفية.

تحدد سمة bordercolor لون حدود الجدول.

Cellpadding - يحدد المسافة بين حدود الخلية ومحتوياتها. يسمح لك بتحسين إمكانية قراءة الجدول. يمكن أن تكون القيمة أي رقم موجب.

تباعد الخلايا - يحدد المسافة بين الحدود الخارجية للخلايا.

دعونا نتحدث عن هذا كيفية إدراج جدول في صفحة HTMLسأنتهي، فقط ألخص:

يتم استخدام العلامات لإدراج جدول

- تعيين الجدول، - إضافة خط و يحدد الخطوط، و بالضبط نفس بيانات الجدول. يمكن تعيين المتغيرات التالية للخط:

1. أنت تعرف بالفعل الحدود وBordercolor وbgcolor.

2. محاذاة - محاذاة النص في السطر. يمكن أن تأخذ القيم إلى اليسار والوسط واليمين.

3. Valign - تقوم هذه العلامة بمحاذاة النص عموديًا. يقبل القيم التالية:

أعلى - تتم محاذاة النص إلى الحد العلوي؛
الوسط - في المركز؛
أسفل - على طول الحدود السفلية.

مثال على تنسيق الخط:

;

لا.

اسم العائلة؛

.خيارات الخلية

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

1. Colspan - تحدد هذه المعلمة عدد الأعمدة التي يمكن للخلية أن تمتد.

2. Rowspan - يشير إلى عدد الصفوف التي تشغلها هذه الخلية.

وبما أن التصميم لا يختلف عن كتابة سطر، فلن نعطي مثالاً على الكود.

الاستنتاجات

إن إنشاء طاولة ليس بالأمر الصعب كما قد يبدو للوهلة الأولى. الشيء الرئيسي عند كتابة الكود الخاص به هو المثابرة والاهتمام.

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

لا تخف من التجربة، وستتقن قريبًا أسلوب إنشاء الجداول بشكل مثالي. حظ سعيد!

1. ما هي جداول HTML ولماذا هي مطلوبة؟

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

2. ما هي العلامات الموجودة في جداول html؟

تتم كتابة العلامات التي تحدد جدول html على النحو التالي:

— إدخال الخلية؛

الجدول هو عنصر كتلة في صفحة الويب؛

لا يمكن أن تكون محتويات الخلايا نصًا فحسب، بل قد تكون أيضًا صورًا وجداول أخرى؛

يمكن أن يحتوي الجدول على ثلاثة أنواع من الأقسام: قسم الرأس - وقسم النهاية وقسم النص - ؛

لدمج الخلايا نستخدم سمات العلامة

colspan وrowspan.

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

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

اختيار المحرر

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

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

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

خوارزمية لإنشاء جدول

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

لنبدأ بالخطوات التحضيرية.

1. ارسم تمثيلاً تخطيطيًا للجدول على قطعة من الورق.

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

3. حدد عدد خلايا الرأس في الصف (على سبيل المثال، الخلايا "رقم"، "الاسم"، وما إلى ذلك).

4. نكتب المعلمات الرئيسية للجدول - اللون والطول والعرض ومحاذاة النص - بشكل عام، كل ما يبدو ضروريًا بالنسبة لك.

1. أدخل علامات الجدول.

2. أدخل علامات الخط بناءً على الكمية التي تحتاجها.

3. في السطور، أدخل علامات الخلايا (العادية والكبيرة)، أيضًا بناءً على الرقم المكتوب على ورقتك.

4. قم بتعيين المعلمات للجدول ككل.

5. إذا لزم الأمر، قم بتعيين مؤشرات للخلايا الفردية.

6. املأ خلايانا بالنص.

إنشاء جدول

لقد اخترت محررًا، فلنتعرف الآن على كيفية إنشاء جدول بتنسيق HTML. علامة يتم من خلالها إدراج جدول في رمز الصفحة (

) ، أي أن البناء الخاص بنا يبدأ بهذه العلامة وينتهي

بعد إدراج علامات الجدول، ننتقل إلى إنشاء الصفوف والخلايا.

دعونا نلاحظ على الفور أن هذه العناصر مقترنة أيضًا. بطاقة شعار

- الخلايا.

بالنسبة لخلايا الرأس، يجب عليك استخدام عنصر الزوج.

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

كيف قد يبدو هذا؟ مثل هذا:

;
;
لا.؛
اسم العائلة ؛
;
;
;
;
1 ;
إيفانوف
.

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

لقد ناقشنا إنشاء جدول في HTML، والآن يمكننا الانتقال إلى معلمات كل من المصفوفة نفسها وصفوفها وخلاياها.

خيارات الجدول

عند كتابة الكود، يجب الانتباه إلى النقاط التالية: المحاذاة مع الحدود والخلفية والنص وما إلى ذلك.

تم تحديد معلمات الجدول في العلامة

. وتشمل هذه:

1. الحدود - عرض الحدود. محدد كعدد صحيح. بشكل افتراضي، حدود أي جدول هي صفر.

2. Bordercolor - لون الحدود. يمكن تحديده إما عن طريق رمز اللون السداسي العشري (#00008B) أو عن طريق اسمه باللغة الإنجليزية (DarkBlue). بشكل افتراضي، يكون دائمًا باللون الرمادي.

3. Bgcolor - محدد أيضًا باستخدام رمز أو اسم.

4. محاذاة - محاذاة النص خلف الجدول. بشكل افتراضي - محاذاة إلى اليسار. هناك الخيارات التالية لهذه المعلمة:

اليسار - التدفق إلى اليمين؛
يمين - يتدفق حول اليسار.
مركز - عرض الجدول في المركز دون التفاف.

5. العرض والارتفاع - عرض وارتفاع الطاولة. يمكن تحديده إما بالبكسل أو كنسبة مئوية (بالنسبة لحجم نافذة المتصفح).

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

أما بالنسبة للون النص فهو مصمم بنفس طريقة تصميم النص العادي بتنسيق HTML.

مثال لتصميم الجدول:

;

لا.

اسم العائلة؛

;

إيفانوف

خيارات الصف

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

تتم كتابة معلمات الخط في العلامة

ولكن بما أننا نعلم أن جميع الجداول تتكون من صفوف وأعمدة (خلايا)، فإننا نحتاج إلى وضع علامات لها أيضًا:

ثم نقوم بتقسيم كل صف إلى خلايا باستخدام علامات الأعمدة:

- الخلية 1.1
- الخلية 1.2
- الخلية 1.3

- الخلية 2.1
- الخلية 2.2
- الخلية 2.3

في الواقع، الرقم الأول في النقوش هو رقم الصف، والثاني هو رقم الخلية (1x2 - الصف الأول، الخلية الثانية، وما إلى ذلك).

3. كيفية ضبط لون الخلفية لجداول HTML؟

الآن دعونا نتعرف على كيفية تعيين خلفية الجدول أو كل خلية على حدة.

لذلك، لتعيين الخلفية، استخدم السمة bgcolor = "background_color".

على سبيل المثال، إذا أردنا تعيين لون واحد للعلامة بأكملها، فإننا نفعل ذلك على النحو التالي:

- الخلية 1.1
- الخلية 1.2
- الخلية 1.3

- الخلية 2.1
- الخلية 2.2
- الخلية 2.3

على سبيل المثال، إذا كنت بحاجة إلى وضع علامة صفراء، فنكتب:

إذا كنت بحاجة إلى تعيين لون خلفية لصف من جدول html، فقم بتطبيق السمة bgcolor="background_color" على العلامة :

1.1	1.2	1.3
2.1	2.2	2.3

1.1	1.2	1.3
2.1	2.2	2.3

في هذه الحالة، تقوم سمة رقم الخلية بتعيين اللون الأبيض للنص الموجود داخل العلامة.

يتم تعيين لون كل خلية على حدة بنفس الطريقة. على سبيل المثال، إذا كنت تريد تغيير لون الخلية 1.2 إلى اللون الأزرق، فقم بذلك داخل علامة الفتح السمة bgcolor = "background_color" :

4. كيفية ضبط حجم العرض والارتفاع لخلايا جدول html؟

لذا، لتعيين عرض الخلايا وارتفاعها يدويًا، استخدم سمات الارتفاع والعرض. ويمكن تعيينها للجدول بأكمله، أو لصف واحد، أو لخلية (عمود). يمكن تحديد الارتفاع والعرض إما بالبكسل أو بالنسب المئوية. في حالتنا، سنقوم بتعيين العرض والارتفاع بالبكسل للأعمدة (الخلايا).

الارتفاع - سمة تحدد ارتفاع الخلية

العرض - السمة التي تحدد عرض الخلية

والآن على سبيل المثال:

سأشرح الآن لماذا قمنا بتعيين ارتفاع الخلية مرة واحدة فقط في كل صف.

إذا قمت بتعيين ارتفاع لأي خلية على التوالي أكبر من غيرها، على الرغم من ذلك، فإن جميع الخلايا (الأعمدة) في صفك ستكون متساوية في الارتفاع لأكبرها. ومن الأفضل ضبط عرض كل صف على حدة!

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

أيضًا، في كثير من الأحيان يتعين عليك ضبط الارتفاع والعرض كنسب مئوية:

محتويات الخلية

إذا قمنا بتعيين عرض الخلية على 40 بالمائة، كما في مثالنا، فهذا يعني أنه لا يزال لدينا 60 بالمائة متبقية للخلايا المتبقية، أي. يجب ألا يتجاوز مجموع عروضها 60 بالمائة. كل شيء بسيط للغاية: في المجمل لدينا 100% فقط. نعد: 100 - 40 = 60.

5. كيفية محاذاة النص داخل جدول HTML؟

الآن دعونا نتعرف على كيفية محاذاة النص في جدول html الخاص بنا إلى اليسار واليمين والوسط.

ويتم ذلك باستخدام السمة:

align=”left” - يقوم بمحاذاة النص الموجود داخل جدول html إلى اليسار

align=”center” - يقوم بمحاذاة نص جدول html إلى المركز

align=”right” - يقوم بمحاذاة النص الموجود داخل جدول html إلى اليمين

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

على سبيل المثال، يبدو رمز HTML الخاص بالجدول الذي يتم توسيط نصه كما يلي:

1x1	1.2	1x3
2.1	2x2	2.3

عن طريق إضافة سمة align = "center" في الفتحة

، قمنا بمحاذاة جدول html في منتصف صفحة المتصفح.

وهذه هي النتيجة التي ستحصل عليها في المتصفح:

1x1	1.2	1x3
2.1	2x2	2.3

الآن دعونا نلقي نظرة على مثال لكيفية محاذاة النص داخل جدول html على طول الحافة العلوية أو السفلية، أي كيف يمكنك التأكد من أن محتويات الخلية لا تقع فقط في منتصفها تمامًا (كما هو الحال افتراضيًا )، ولكن أيضًا في الأعلى أو الأسفل.

يتم تحديد المحاذاة العمودية بواسطة السمة:

valign="top" - سيتم وضع المحتوى في أعلى الخلية

valign="middle" - سيتم توسيط المحتوى في الخلية

valign='bottom' - سيتم وضع المحتوى في أسفل الخلية

دعونا نلقي نظرة على هذه السمات باستخدام مثالنا:

1x1	1.2	1x3
2.1	2x2	2.3

هذا ما نحصل عليه إذا نظرنا إلى نتيجة سمات المحاذاة والمحاذاة في المتصفح:

1x1	1.2	1x3
2.1	2x2	2.3

6. كيفية الجمع بين الخلايا والأعمدة في جدول HTML؟

في هذا الجزء من مقالتنا سنتحدث عن سمات colspan وrowspan.

colspan - يحدد عدد الأعمدة التي تغطيها خلية معينة

Rowspan - يحدد عدد الصفوف التي تغطيها هذه الخلية

يمكن أن تكون قيم colspan وrowspan 2 أو أكثر، أي. يمكن أن تمتد الخلية عبر عمودين أو أكثر (صفوف).

والآن، باستخدام المثال، سنقوم بتمديد خلية 1x1 إلى عمودين (خلايا). للقيام بذلك، سوف نستخدم سمة colspan = "2"، وتخصيصها لخلية 1x1. سيبدو الكود كالتالي:

كما نرى، تمتد الخلية 1×1 على طول خليتين. وبناء على ذلك، فإن طولها يساوي مجموع طول هاتين الخليتين (160 بكسل). لم نحدد سمة العرض للخلية 1×1، ولكن إذا قررنا القيام بذلك، فسنقوم بتعيين العرض على 160 بكسل. وأيضًا، يرجى ملاحظة أنه في مثالنا لا توجد خلية 1x3، أي. لا يوجد سوى خليتين في الصف الأول، لماذا - لقد ناقشنا هذا بالفعل - خلية 1x1 تساوي خليتين، وذلك بفضل سمة colspan.

يجب التعامل مع سمات colspan وrowspan بعناية فائقة. قد يؤدي الخطأ إلى تعطل موقعك.

الآن بعد أن فهمنا معلمة colspan، فلنفهم معلمةrowspan. مبدأ التشغيل هو نفسه:

1.1	1.2
2.1	1.2	2.2

1.1		1.2
2.1	2.2

وهكذا، تعلمنا كيفية دمج الخلايا في صفوف وأعمدة جداول HTML.

7. كيفية إزالة المسافات البادئة أو إضافتها أو تغييرها وكيفية تعيين إطار لجدول html؟

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

الحدود = "عرض الحدود بالبكسل" - يضبط عرض الحدود

bordercolor = "لون الحدود" - يحدد لون الحدود

لنفترض، على سبيل المثال، أن نعطي جدول html الخاص بنا إطارًا أسود بعرض 1 بكسل.

لهذه العلامة

إضافة السمات:

الآن يمكننا أن نرى بوضوح المسافات البادئة بين خلايا جدول html والمسافات البادئة من الحواف الداخلية للخلايا إلى النص. لذلك، يمكننا إدارة هذه المسافات البادئة دون أي مشاكل. الصفات لهذا الغرض:

تباعد الخلايا = "عرض المسافة بالبكسل" - المسافة بين الخلايا

cellpadding="عرض الحشو بالبكسل" - الحشو داخل الخلية (من حافة الخلية إلى النص، الصورة، الرابط...)

على سبيل المثال، لنجعل المسافة البادئة بين الخلايا 10 بكسل، ونزيد المسافة البادئة من حافة الخلية إلى النص إلى 20 بكسل. يتم ذلك على النحو التالي:

1.1		1.2
2.1	2.2

إذا نظرنا إلى النتيجة في المتصفح، نرى بوضوح أن المسافة بين الخلايا (تباعد الخلايا) في جدول html الخاص بنا قد زادت إلى 10 بكسل، كما زادت المسافة بين النص والحافة الداخلية للخلية بمقدار 20 بكسل .

1.1		1.2
2.1	2.2

إذا كنت بحاجة إلى إزالة الحشو تمامًا، فما عليك سوى تعيين cellpadding="0" و cellpacing="0" .

8. كيف يمكن إدراج جدول HTML داخل جدول آخر؟

نحن نقترب من المرحلة النهائية لدراسة جداول HTML. الآن سوف نتعلم كيفية إدراج جدول داخل جدول آخر.

باستخدام المثال، داخل الخلية 1.2 سنقوم بإدراج جدول جديد يتكون من صف واحد وعمودين. في جدول html الداخلي، سنضع حدودًا حمراء بعرض 2 بكسل ومسافة بين الخلايا 0 بكسل. سنضع أيضًا الجدول الداخلي في أعلى الخلية.

يتم ذلك بكل بساطة:

1.1

3.1

3.2

2.1

2.2

وهذا ما حدث نتيجة التحولات الجديدة لجدولنا (الخلايا الحمراء هي جدول داخلي يقع داخل جدول كبير):

1.1

3.1

3.2

2.1

2.2

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

مهمة

قم بإنشاء جدول وحدد معلماته (الهوامش والمسافة بين الخلايا) باستخدام الأنماط.

حل

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

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

. يجب أن يحتوي الجدول على خلية واحدة على الأقل (المثال 1). مسموح به بدلاً من العلامة

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

و لا.

مثال 1: إنشاء جدول

HTML5 IE Cr Op Sa Fx

علامة الجدول

الخلية 1 الخلية 2

الخلية 3

الخلية 4

يظهر ترتيب الخلايا ومظهرها في الشكل. 1.

أرز. 1. نتيجة إنشاء جدول بأربع خلايا

سمة علامة الحدود

يُسمح فقط بإضافة قيمة فارغة (

) أو يساوي 1. لم يتم التحقق من صحة كافة القيم الأخرى.

للتحكم في الهوامش داخل الخلايا، استخدم خاصية نمط الحشو، والتي تتم إضافتها إلى محدد td. يتم تغيير المسافة بين الخلايا عن طريق خاصية تباعد الحدود (المثال 2) المضافة إلى محدد الجدول، ولا يفهمها متصفح IE إلا منذ الإصدار 8.0.

مثال 2: الهوامش داخل الخلايا

HTML5 CSS 2.1 IE Cr Op Sa Fx

علامة جدول الجدول (العرض: 100%؛ /* عرض الجدول */ الخلفية: أبيض؛ /* لون خلفية الجدول */ اللون: أبيض؛ /* لون النص */ تباعد الحدود: 1 بكسل؛ /* المسافة بين الخلايا */ ) td, th ( الخلفية: كستنائي; /* لون خلفية الخلايا */ الحشو: 5px; /* الهوامش حول النص */ )

العنوان 1 العنوان 2

الخلية 3

الخلية 4

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

أرز. 2. الحقول في خلايا الجدول

تعليمات

الخطوة الأولى هي إنشاء جدول إذا لم يكن موجودًا بالفعل. يتم تنفيذ هذا الإجراء في السمة. يتم استخدام العلامات لهذا (علامة الإغلاق مطلوبة):

- طاولة؛
- خط؛

- عمود.

السمات الإضافية الرئيسية:
الحدود – الحدود؛

Bordercolor - لون الحدود؛
عرض - عرض؛
ارتفاع ارتفاع.

بناء الجملة لجدول 2X2 بدون حدود ومحتوى محاذ إلى اليسار/اليمين هو:

محتويات الخلية الأولى	محتويات الخلية الثانية
محتويات الخلية الثالثة	محتويات الخلية الرابعة

يجب وضع الصورة بعد العلامة

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

	محتويات الخلية الثانية
محتويات الخلية الثالثة	محتويات الخلية الرابعة

سمات إضافية:
عرض - عرض؛
ارتفاع ارتفاع؛
Alt - نص بديل سيتم عرضه للمستخدم إذا تم تعطيل وظيفة عرض الصور؛
محاذاة - محاذاة أفقية؛
فالين - المحاذاة العمودية.
العنوان - تعليق على الصورة.

يمكنك استخدام الصورة كرابط. للقيام بذلك، فقط ضعه في العلامة المناسبة:
في سياق الجدول سيبدو كما يلي:

	محتويات الخلية الثانية
محتويات الخلية الثالثة	محتويات الخلية الرابعة

قدرات صورة إضافية.

1. تغيير لون الصورة عند المرور فوقها بالماوس وبعد تغيير موقع المؤشر:
onMouseOver="this.style.background="#color number"" onMouseOut="this.style.background="#color number""

2. تغيير الصورة إلى صورة أخرى عند تحريك الماوس:
onmouseover = "this.src = "images/1.gif"" onmouseout = "this.src = "images/2.gif""

3. إدراج دائرة دوارة من الصور في خلية جدول (يمكن تغيير القيم):

// 7 متغيرات للتحكم في السلوك
فار Car_Image_Width=100;
فار Car_Image_Height=100;
var Car_Border=true; // صحيحة أو خاطئة
فار Car_Border_Color = "000000"؛ الحدود = "0"
فار Car_Speed=5;
var Car_Direction=true; // صحيحة أو خاطئة
فار Car_NoOfSides=6; // يجب أن يكون 4 أو 6 أو 8 أو 12

/* مصفوفة لتحديد الصور والروابط الاختيارية.
بالنسبة للعرض الدائري ذي الجوانب الأربعة، حدد صورتين على الأقل
بالنسبة إلى الرف الدائري ذو 6 جوانب، حدد 3 على الأقل
بالنسبة إلى الرف الدائري ذو 8 جوانب، حدد 4 على الأقل
بالنسبة إلى الرف الدائري ذو 12 جانبًا، حدد 6 على الأقل
إذا لم يكن الرابط ضروريًا، فاحتفظ به ""
*/
Car_Image_Sources=مصفوفة جديدة(
"images/1.gif"،"،
"images/2.gif"،"
"images/3.gif"،"
"images/4.gif"،"
"images/5.gif"،"
"images/6.gif"،"

// ملاحظة: لا توجد فاصلة بعد السطر الأخير
);

/****************** لا تقم بالتحرير أدناه ***************************** ******/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=صفيف جديد(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4.3*Math.PI/2.5*Math.PI/3.11*Math.PI/6.0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

وظيفة دائري ()
إذا (document.getElementById)(
ل(i=0;i

مقالات مماثلة