عند إنشاء صفحات الويب، غالبًا ما نواجه مشكلة عدم محاذاة عرض الجدول. لقد اطلعت على تفاصيل إعدادات الارتفاع والعرض لعلامة الجدول في HTML بالتفصيل، والآن أوجزها كما يلي:
1. إعدادات العرض والارتفاع في الجدول ووظائفها : يحدد الارتفاع المحدد في الجدول في الواقع الحد الأدنى للقيمة، أي عندما يتجاوز المحتوى الموجود في الجدول أو إجمالي ارتفاع الصف هذه القيمة المحددة، فإن قيمة الارتفاع للجدول سيتم توسيع الجدول تلقائيًا، وعندما لا يصل ارتفاع المحتوى أو الصف في الجدول إلى هذه القيمة، فسيتم توسيعه تلقائيًا إلى هذه القيمة. قيمة العرض المحددة في الجدول هي بشكل عام الحد الأقصى لقيمة عرض الجدول ولا يمكن تغييرها، حتى لو تجاوزها عرض المحتوى الداخلي. (إذا كان المحتوى الداخلي عبارة عن صورة، فيمكن تغيير عرض الجدول.)
2. إعدادات العرض والارتفاع في علامة tr ووظائفها : ليس لإعدادات العرض في علامة tr أي تأثير، لأنه كما يتبين من النقطة الأولى، لا يمكن تغيير عرض الجدول، ولن تتغير علامة tr بالطبع ليس لها أي تأثير. لذلك، من الممكن فقط مناقشة إعداد الارتفاع في tr. يرتبط إعداد الارتفاع في tr بالإعدادات بين عدة tr. عندما يتم تعيين عدة trs بقيم ارتفاع محددة، يتم تخصيص ارتفاع كل tr لقيمة الارتفاع الإجمالية بما يتناسب مع القيمة المحددة. لاحظ أن هذه هي قيمة الارتفاع الإجمالية. عندما لا تقوم عدة trs بتعيين قيمة ارتفاع محددة، يتم توزيع قيمة الارتفاع الإجمالية بالتساوي. عندما يتم تعيين بعض TRs بقيم محددة وبعضها لا يتم تعيينه بقيم محددة كإعدادات افتراضية، تأكد أولاً من الاحتياجات الأساسية لكل TR، ومن ثم ستلبي الباقي TRs بقيم محددة محددة، وبعد ذلك الكل سيتم تعيين TRs بدون قيم محددة. في الحالة الأخيرة، نحتاج إلى مراعاة أن العرض الإجمالي لا يكفي لقيمة الإعداد الإجمالية لـ tr. إذا لم يكن كافيًا، فيجب أن يلبي الاحتياجات الأساسية لـ tr. سيتم توسيع ارتفاع الجدول تلقائيًا هنا. ثم فكر في tr مع ضبط الارتفاع، وأخيرًا فكر في tr بدون ضبط الارتفاع.
3. إعدادات العرض والارتفاع ووظائفهما في علامة td : يعد العرض والارتفاع في علامة td فعالين. دعونا نلقي نظرة على عرض TD أولاً، ويرتبط عرض TD معين بعرض كل TD في العمود. العرض الأكبر بينهم هو عرض كل TD في هذا العمود حيث يجب عليك فهم عرض TD معين من منظور عالمي ولا يمكنك تحديد عرضه من إعداد العرض هذا. بمجرد معرفة عرض كل عمود، سيكون التعامل مع الأمور أسهل. في هذا الوقت، يعتمد توزيع العرض بين كل TD على قاعدة توزيع الارتفاع لكل tr في المقالة الثانية. والفرق الوحيد هو أنه افتراضيًا، لا يتم توزيع عرض كل TD بالتساوي، ولكن بالتناسب وفقًا لقيمتها الفعلية توزيع. دعونا نلقي نظرة على إعداد الارتفاع لـ td، وهذا أمر بسيط نسبيًا، ومع ذلك، يعتمد ارتفاع كل td على الحد الأقصى لارتفاع الصف الذي يقع فيه td، ثم تحديد ارتفاع كل td في هذا الصف يتم تحديد كل صف من خلال ارتفاع tr. مبدأ تخصيص الارتفاع هو نفسه. شيء آخر يجب ملاحظته هو العلاقة بين ارتفاع td وارتفاع tr. بادئ ذي بدء، يجب أن يعتمد على احتياجات المحتوى، وعلى هذا الأساس، سيتم تحديده بناءً على القيمة المحددة، وسيتم استخدام أي قيمة محددة إذا كان لدى أحدهما قيمة محددة والآخر ليس لديه قيمة محددة، ثم سيتم استخدام القيمة المحددة.
1. استخدم الطرق التقليدية
<عرض الجدول=400> <tr> <td width=100></td> <td width=100></td> <td width=100></td> <td width=100></td> < /tr> <الجدول>
2. استخدم المغلق
<style>.td{width:100px;}</style><table width=400> <tr> <td class=td></td> <td class=td></td> <td class=td> </td> <td class=td></td> </tr> <table>المشكلة المحتملة في الطريقتين المذكورتين أعلاه هي أنه إذا تجاوز المحتوى الإعداد، مثل أن يكون عرض الصورة أكبر من 100، فسيتم توسيع عرض الجدول بشكل طبيعي وضبطه تلقائيًا.
3. استخدم المغلق
<style>.td{width:100px;overflow:hidden}</style><table width=400> <tr> <td class=td></td> <td class=td></td> <td class =td></td> <td class=td></td> </tr> <table>باستخدام هذه الطريقة، يمكنك إخفاء الجزء الزائد إذا كنت بحاجة إلى رقابة صارمة، فيمكنك استخدام هذه الطريقة إذا قمت بتعيين قيمة سمة التجاوز على التمرير أو التلقائي، فيمكنك استخدام هذه الطريقة إذا قمت بتعيين قيمة سمة التجاوز على التمرير أو تلقائي، يمكنك استخدام هذه الطريقة إذا قمت بتعيين قيمة سمة التجاوز على التمرير أو التلقائي، فيمكنك استخدام هذه الطريقة إذا تم التعيين على التمرير أو التلقائي، فيمكنك استخدام شريط التمرير لضبطه عندما يتجاوز...
تلخيصما ورد أعلاه هو طريقة تعيين عرض وارتفاع خلايا جدول HTML التي يقدمها لك المحرر وآمل أن تكون مفيدة لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك وقت. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!