كيفية عمل جدول عمودي في HTML. محاذاة و VALIGN السمات
23.10.2023
بفضل تعدد استخدامات الجداول والعدد الكبير من المعلمات التي تتحكم في مظهرها، أصبحت الجداول منذ فترة طويلة معيارًا محددًا لتخطيط صفحات الويب. يبدو الجدول ذو الحدود غير المرئية وكأنه شبكة معيارية، حيث يكون من المناسب وضع عناصر صفحة الويب في كتلها. ومع ذلك، هذا ليس هو النهج الصحيح تماما، لأن الجميع كائن HTMLمحددة لأغراضها الخاصة، وإذا لم تستخدم للغرض المقصود منها، وفي كل مكان، فهذا يعني أنه لا توجد بدائل. كان هذا هو الحال لفترة طويلة، حتى حلت الطبقات محل الجداول في تخطيط موقع الويب. هذا لا يعني أن الطبقات تُستخدم الآن طوال الوقت، ولكن الاتجاه قد ظهر بالفعل بوضوح - تُستخدم الجداول لوضع البيانات الجدولية، وتُستخدم الطبقات للتخطيط والتصميم.
إنشاء جدول
يتكون الجدول من صفوف وأعمدة من الخلايا التي يمكن أن تحتوي على نصوص وصور. تُستخدم الجداول عادةً لتنظيم البيانات وعرضها، لكن الجداول لا تقتصر على ذلك. باستخدام الجداول، من الملائم تخطيط تخطيطات الصفحة عن طريق ترتيب أجزاء من النص والصور بالطريقة المطلوبة.
لإضافة جدول إلى صفحة ويب، استخدم العلامة
. يعمل هذا العنصر كحاوية للعناصر التي تحدد محتويات الجدول. يتكون أي جدول من صفوف وخلايا، يتم تحديدها على التوالي باستخدام العلامات
و
. يجب أن يحتوي الجدول على خلية واحدة على الأقل (مثال 12.1). مسموح به بدلاً من العلامة
استخدام العلامة
. نص في خلية مُصممة بعلامة
، يتم عرضها بواسطة المتصفح بخط غامق ومحاذاة لوسط الخلية. وبخلاف ذلك، سيتم إنشاء الاختلافات بين الخلايا من خلال العلامات
و
لا.
مثال 12.1. إنشاء جدول
علامة الجدول
الخلية 1
الخلية 2
الخلية 3
الخلية 4
يظهر ترتيب الخلايا ومظهرها في الشكل. 12.1.
تعد الجداول في HTML عملية للغاية بحيث يمكنك استخدامها لتخطيط مواقع الويب بأكملها (اقرأ). سنتحدث الآن عن إدراج جداول HTML بسيطة في صفحة الويب، وتحليل العلامات فقط، دون التطرق إلى التصميم، لأنه من الأفضل تزيين الجداول باستخدام أنماط CSS.
علامات الجدول وسماته
فيما يلي العناصر الأساسية التي تحتاجها لإنشاء الجداول:
- الحاوية التي يوجد بداخلها الجدول (مثل
لعلامة أو للقوائم المرقمة).
حدود- خاصية تحدد سمك الإطارات. من الأفضل استخدام خاصية border CSS بدلاً من ذلك.
يحدد توقيع الجدول. ليس عليك استخدام حاوية، ولكن إذا كنت لا تزال تقرر تسمية الجدول، فضعه مباشرة بعد العلامة
، خارج الخلايا والصفوف.
- علامة مقترنة تحتوي على صف جدول (خلايا تقع على نفس المستوى الأفقي).
- علامة تقوم بإنشاء خلية رأس الجدول. خارجيًا، يختلف محتواه عن المحتوى الموجود في الخلايا الأخرى - عادةً النص الموجود بداخله
يسلط المتصفح الضوء عليه بالخط العريض ويضعه في المنتصف.
- الحاوية التي سيتم الإنشاء بها خلية بسيطة. كم عدد هذه العلامات التي سيحتوي عليها السطر (tag
سيكون هناك الكثير من الخلايا فيه: علامة واحدة - خلية واحدة.
يسمح لك بتجميع الأعمدة بسرعة ودون انسداد التعليمات البرمجية، قم بتعيينها الخصائص العامة. باستخدام الحاوية، يمكنك فصل الأجزاء المنطقية للجدول عن بعضها البعض. توضع بعد العلامة
، فإن لم يكن هناك، ثم بعد
.
تستخدم لنفس الغرض
.
قد تحتوي على
، ولكن ليس العكس.
فترة- سمة تحدد عدد الأعمدة التي يتم تطبيق خصائص الحاوية عليها
.
,
و
- حاويات تسمح لك بتقسيم الجدول إلى الأجزاء العلوية (العناوين) والرئيسية (النص) والأجزاء السفلية (النهائية) على التوالي. في جدول HTML، يكون تسلسل هذه العلامات هو نفس تسلسل الحاويات , و في وثيقة HTML.
colspanاللازمة لدمج الخلايا على التوالي. تحتوي قيمة السمة على رقم يحدد عدد الخلايا التي سيتم دمجها.
com.rowspanدمج الخلايا في الأعمدة.
مثال لإنشاء الجدول
قم بإنشاء مستند HTML وانسخ الكود التالي فيه:
جدول المثال
أدوات إنشاء المواقع
غاية
أداة
وضع العلامات
HTML
XHTML
تسجيل
CSS
تطوير
PHP
بايثون
في المتصفح سيكون شكل الوثيقة كالتالي:
دعونا نتعرف على أسطر التعليمات البرمجية المسؤولة عن ماذا.
- فتح الطاولة مما يمنحها سمك الإطارات.
أدوات إنشاء المواقع - لقد أطلقوا عليها عنوانًا.
- فتح الخط.
غاية
- إنشاء خلية بتصميم رأسي.
أداة
- إنشاء خلية رأس ثانية في الصف. أشارت المعلمة colspan إلى أن هذه الخلية يجب أن تمتد إلى خليتين أفقيًا.
- أغلق الخط. تم إنشاء الخطوط المتبقية بنفس الطريقة.
وضع العلامات
HTML
XHTML
- تمت إضافة صف ثانٍ من الجدول بخلايا عادية بدلاً من الخلايا الرأسية. تم إدراج الصفوف والخلايا اللاحقة بالمثل.
- أغلقت الطاولة.
الجدول عبارة عن مجموعة من البيانات الموزعة عبر الصفوف والخلايا. تحتوي معظم الخلايا على بيانات جدولية، بينما تحتوي الخلايا الأخرى على عناوين الصفوف والأعمدة التي تصف المحتوى.
لإنشاء جدول في مستند HTML، استخدم العلامة
فهو يمثل حاوية تحتوي على جميع محتويات الجدول.
يبدأ إنشاء الجدول دائمًا بالصفوف التي يتم تعريفها باستخدام العلامة
، كل صف بدوره يتكون من خلايا. علامة
يمكن أن تحتوي فقط على علامات لإنشاء الخلايا.
يوجد في HTML علامتان مختلفتان لإنشاء الخلايا، العلامة الأولى هي
يقوم بإنشاء خلايا بيانات منتظمة. بشكل افتراضي، قم بوضع علامة على المحتويات
محاذاة إلى اليسار. العلامة الثانية لإنشاء الخلايا هي العلامة
، فهو يسمح لك بتحديد الخلايا التي تحتوي على عناوين للأعمدة أو الصفوف، ويتم عرض محتويات هذه الخلايا بنص غامق ومحاذاة للوسط. العلامات
و
قد يتضمن أي عناصر HTML متاحة للاستخدام في نص المستند.
العنوان الأول
العنوان الثاني
الصف 1، الخلية 1
الصف 1، الخلية 2
الصف 2، الخلية 1
الصف 2، الخلية 2
يحاول "
جدول داخل جدول
HTML لديه القدرة على إنشاء جداول متداخلة، أي الجداول الموجودة داخل جداول أخرى. لإنشاء جدول متداخل، تحتاج إلى وضع رمز الجدول الذي تريد جعله متداخلاً داخل أي علامة
.
على سبيل المثال، لنأخذ الجدول الذي أنشأناه سابقًا ونضع هذا الكود في الخلية الثانية من الصف الثاني:
العنوان الأول
العنوان الثاني
الصف 1، الخلية 1
الصف 1، الخلية 2
الصف 2، الخلية 1
الصف 2، الخلية 2
العنوان الأول
العنوان الثاني
الصف 1، الخلية 1
الصف 1، الخلية 2
الصف 2، الخلية 1
الصف 2، الخلية 2
يعد الجدول إحدى الأدوات الرئيسية لإنشاء صفحات الويب.
بدون استخدام CSS، باستخدام الجداول فقط يمكنك إنشاء صفحات ذات تصميمات معقدة. إذا كنت قد أكملت سلسلة دروس إنشاء موقع على شبكة الإنترنت - الخطوات الأولى، فستفهم ما نتحدث عنه.
أي جدول عبارة عن مجموعة من الصفوف والأعمدة التي توجد عند تقاطعها خلايا. على سبيل المثال:
دعونا نلقي نظرة على جدولنا من منظور HTML:
يتم تحديد الجدول نفسه باستخدام العلامات
,
الجدول له اسم - العلامات
,
يتكون الجدول من صفوف - علامات
,
يتكون كل صف من أعمدة - علامات
,
الأعمدة لها أسماء موجودة في الصف الأول - العلامات
.
لنقم بإنشاء جدول نشير فيه إلى تقاطع أرقام الصفوف والأعمدة كمحتوى:
نتيجة:
كما ترون، لم يكن الأمر جيدًا جدًا، سنقوم بتزيينه.
معلمات جدول HTML: المسافة البادئة، العرض، لون الخلفية، الإطار
لهذا الغرض العلامة
هناك عدد من المعلمات:
عرض- يضبط عرض الجدول (بالبكسل أو % من عرض الشاشة)،
com.bgcolor- تعيين لون الخلفية لخلايا الجدول،
خلفية- يملأ خلفية الجدول بنمط،
حدود- تعيين حدود العرض المحدد (بالبكسل) حول الجدول بأكمله،
حشوة الخلية- يضبط الهامش بالبكسل بين حدود الخلية ومحتوياتها.
دعونا نطبق هذه المعلمات:
نتيجة:
هذا أفضل، لكن طاولتنا مضغوطة على الحافة اليسرى للنافذة، كما هو الحال مع النص الموجود فيها. دعونا نصلح هذا عن طريق إضافة ثلاث معلمات أخرى:
محاذاة- ضبط محاذاة الجدول: يسار (يمين)، يمين (يسار)، وسط (وسط)،
تباعد الخلايا- يحدد المسافة بين خلايا الجدول (بالبكسل)،
حشوة الخلية- يضبط المسافة بين النص والحد الداخلي لخلية الجدول (بالبكسل).
دعونا نطبق هذه المعلمات:
نتيجة:
يرجى ملاحظة أن الجدول له حدود مزدوجة. إذا قمت بتحديد تباعد الخلايا = "0"، فإن الحدود ستأخذ الشكل المعتاد:
نتيجة:
بشكل عام، هناك معلمتان مسؤولتان عن الحدود:
إطار- يضبط نوع الإطار حول الطاولة ويمكنه أخذ القيم التالية:
فارغ- لا يوجد إطار،
فوق- الإطار العلوي فقط،
أقل- الإطار السفلي فقط،
hsides- الإطارات العلوية والسفلية فقط،
vsides- الإطارات اليسرى واليمنى فقط،
lhs- الإطار الأيسر فقط،
rhs- الإطار الأيمن فقط،
صندوق- جميع الأجزاء الأربعة للإطار.
قواعد- يضبط نوع حدود الجدول الداخلية ويمكن أن يأخذ القيم التالية:
لا أحد- لا توجد حدود بين الخلايا،
المجموعات- الحدود فقط بين مجموعات الصفوف ومجموعات الأعمدة (ستتم مناقشتها لاحقًا)،
صفوف- الحدود بين الخطوط فقط،
كولز- الحدود تكون بين الأعمدة فقط،
الجميع- عرض كافة الحدود.
باستخدام هذه المعلمات، يمكنك تعيين الحدود بالطريقة التي تريدها. سنقدم هنا مثالًا واحدًا فقط، قم بتجربتها جميعًا بنفسك.
نتيجة:
تجدر الإشارة إلى أن الحدود في متصفحات مختلفةيتم عرضها بشكل مختلف قليلا.
علامات HTML tr وtd
يتم تشكيل الجداول صفًا تلو الآخر. ولذلك، فإن المعلمات المحددة في السطر (tr) تمتد تأثيرها إلى جميع الخلايا (td) في الخط. يمكن أن تحتوي السلاسل على ثلاث معلمات:
محاذاة- محاذاة النص في الخلايا أفقيًا، ويمكن أن تأخذ القيم: اليسار (يمين)، اليمين (يسار)، الوسط (الوسط)،
valign- محاذاة النص في الخلايا عموديًا، ويمكن أن تأخذ القيم: أعلى (أعلى)، أسفل (أسفل)، توسيط (وسط)،
com.bgcolor- يحدد لون الخط.
دعونا نلقي نظرة على مثال:
عرض- يضبط عرض العمود (بالبكسل أو كنسبة مئوية، حيث 100% هو عرض الجدول)،
ارتفاع- يضبط ارتفاع الخلية، وستكون جميع الخلايا الموجودة في نفس الصف بهذا الارتفاع.
على سبيل المثال، دعونا نضيف إلى التعليمات البرمجية لدينا، في العلامات
هذه المعلمات
1
2
3
نتيجة:
تجدر الإشارة إلى أنه إذا لم تقم بضبط العرض والارتفاع، فسيتم تشكيل الجدول حسب المحتوى (كما كان الحال في الأمثلة السابقة).
انتهى هذا الدرس، تدرب على إنشاء وتصميم الجداول، ستحتاج إلى هذه المهارات في الدرس التالي، حيث سنقوم بإنشاء جداول ذات هياكل معقدة.
علامة colspan - دمج الأعمدة
الاستخدام الأكثر شيوعًا للجداول ذات الهياكل المعقدة هو ترميز صفحات الويب. انظر إلى الصورة:
اتضح أننا بحاجة إلى أن يحتوي كل من الصفين الأول والثالث على عمود واحد. يتم تحقيق ذلك باستخدام المعلمة colspanعلامة
. يخبر هذا الإعداد المتصفح بدمج عدة أعمدة في عمود واحد. قيمة هذه المعلمة هي رقم يشير إلى عدد الأعمدة التي سيتم دمجها.
على سبيل المثال،
يتضمن هذا العمود عمودين.
على سبيل المثال لدينا:
عنوان الوثيقة
رأس الموقع
قائمة طعام
محتوى
أسفل الموقع
لاحظ أن الصفين الأول والثالث يحتويان الآن على عمود واحد لكل منهما.
دعونا نلقي نظرة على مثال آخر لترميز صفحة الويب:
رأس الموقع
قائمة طعام
قائمة طعام
قائمة طعام
قائمة طعام
قائمة طعام
قائمة طعام
أخبار
محتوى
العد - كم عدد الصفوف والأعمدة الموجودة في هذا الجدول؟ للقيام بذلك، قم بتطبيق شبكة عقليًا على الرسم.
سيؤدي هذا إلى ثلاثة صفوف وستة أعمدة.
رأس الموقع
يتكون الصف الأول من عمود واحد يتضمن ستة أعمدة. دعنا نكتب هذا:
قائمة طعام
قائمة طعام
قائمة طعام
قائمة طعام
قائمة طعام
قائمة طعام
يتكون الصف الثاني من ستة أعمدة:
أخبار
محتوى
يتكون السطر الثالث من عمودين، الأول يضم عمودين والثاني أربعة:
الأمر ليس بهذه الصعوبة. نحن نتراكب الشبكة بصريًا على الرسم ونكتب الصفوف واحدًا تلو الآخر من الأعلى إلى الأسفل، مع وصف العدد المطلوب من الأعمدة في كل منها.
علامة Rowspan - تسلسل الصفوف
ماذا لو كنا بحاجة إلى ترميز مثل هذا؟
يرجى ملاحظة أنه في الصف الثاني لدينا عمود واحد فقط، لأن يمتد العمود الأول من الصف الأول، ويتضمن ببساطة اثنين.
للوهلة الأولى، قد يبدو هذا صعبًا، ولكن مع القليل من الممارسة ستتمكن من إنشاء جداول بأي تعقيد.
دعونا ننظر إلى مثال آخر:
قائمة طعام
محتوى
أسفل الموقع
كاب
دعونا ننظر إلى مثال آخر:
قائمة طعام
لذا، في الصف الأول لدينا عمودان، حيث يقوم العمود الثاني بربط الصفين. دعنا نكتب هذا:
محتوى
الصف الثاني عبارة عن عمود واحد (فقط هذا الجزء منه مخفي بالعمود الثاني من الصف الأول):
أسفل الموقع
وأخيرًا، الصف الثالث عبارة عن عمود واحد يضم ثلاثة أعمدة: com.rowspanو colspanباستخدام هذين الخيارين
يمكنك إنشاء جداول بأي تعقيد. يمارس.
الجداول المتداخلة
كما يوحي الاسم، يمكن وضع جدول واحد داخل جدول آخر، أو داخل أي عمود. دعونا نفعل ذلك باستخدام ترميزنا الأخير كمثال.
تجدر الإشارة إلى أن الحدود في 
