English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

كتيب مرجع CSS

قواعد CSS @

مجمع خصائص CSS

طريقة استخدام خاصية تخطيط الجدول في CSS ومثال

خصائص التخطيط العنكبوتي لـ CSS تحدد الخوارزمية المستخدمة لتنسيق خلايا الجدول، والصفوف والأعمدة.

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

القيمة الافتراضية:تلقائي
يستخدم ل:جدول والعناصر المدمجة
تنقل:لا
يمكن تفعيله بالرسوم المتحركة:لايرجى الرجوع إلى خصائص الرسوم المتحركة
الإصدار:CSS 2،3
JavaScriptاللغة البرمجية.style.tableLayout="fixed"

نحو استخدام خاصية table-layout

نحو استخدام الخاصية التالية:

table-layout: auto | fixed | initial | inherit

في المثال التالي، يتم عرض كيفية استخدام خاصية table-layout.

  جدول {
   عرض: 250px;
   table-layout: fixed;
  }
اختبار‹/›

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

قيمة الخاصية

جدول التالي يصف قيم هذه الخاصية.

القيمةوصف
تلقائيخوارزمية تخطيط الجدول التلقائي تستخدم لتخطيط الجداول. عرض الجدول والخلايا يعتمد على محتويات الخلايا. هذا هو القيمة الافتراضية.
ثابت

خوارزمية تخطيط الجدول الثابتة تستخدم لتخطيط الجداول.

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

  • عرض الجدول وأعمدته يتم تحديدهما من عرض العناصر أو العناصر أو عرض الصفوف الأولى من الخلايا.

بدءيةضع هذه الخاصية في قيمتها الافتراضية.
تنقلإذا تم تحديد، فإن العناصر ذات الصلة تأخذ قيمة الخاصية table-layout من العنصر الأم.

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

مستوى التطابق للمتصفحات

مستوى التطابق للمتصفحات الخاصة بخصائص table-layout، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفحات التي تدعم هذه الخاصية؛ جميع المتصفحات الشائعة يدعمون هذه الخاصية.

  • Firefox 1+

  • Google Chrome2+

  • Internet Explorer 5+

  • Apple Safari 1+

  • Opera 7+

قراءة إضافية

يرجى الرجوع إلى الدروس المتعلقة بالمواد التالية:جداول HTML،جداول CSS

خصائص ذات صلة:عرض العرض