كيف من المفترض أن يعمل "عرض: عمود جدول" في CSS؟

في HTML، تتكون الجداول من صفوف، مع كل صف تحتوي على خلايا. يعمل CSS على توسيع هذا المفهوم، مما يسمح للمصممين بتحديد تخطيطات محددة للصفوف والأعمدة. في حين أن "display: table-row" و"display: table-cell" واضحان، فإن "display: table-column" له غرض أكثر دقة.

فهم وظيفة "display: table-" العمود "

على عكس "display: table-row" و"display: table-cell،" لا يؤدي "display: table-column" إلى إنشاء عمود جديد بناء. وبدلاً من ذلك، يقوم بتعيين سمات للخلايا الموجودة داخل صفوف الجدول الموجودة. على سبيل المثال، يمكنك تحديد لون خلفية الخلية الأولى في كل صف.

بنية جدول HTML مقابل CSS

لفهم هذا المفهوم، خذ بعين الاعتبار HTML التالي الجدول:

Cell 1
    
Cell 2
  
Cell 3
    
Cell 4
  

بالتوافق مع بنية HTML، يمكن تطبيق CSS التالي:

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

في هذا المثال، لا تعد أقسام ".column1" و".column2" حاويات للمحتوى. إنها تحدد فقط سمات الخلايا الموجودة داخل صفوف الجدول.

النقاط الرئيسية التي يجب تذكرها

• "display: table-column" يعين السمات للخلايا الموجودة داخل صفوف الجدول ، وليس للأعمدة نفسها.
• يظل هيكل الجدول الأساسي كما هو في HTML، مع كون الخلايا فرعية من الصفوف.
• "display: لا يوفر "عمود الجدول" آلية للتخطيطات متعددة الأعمدة، حيث يتدفق المحتوى بين الأعمدة.