في هذا الدرس 6تصفّح المواضيع
تنكمش عناصر الجداول <table> غير المنسقة افتراضياً على قدر نصوصها الداخلية دون رسم أي خطوط فاصلة بين الصفوف والأعمدة، ما يصعّب تتبع البيانات الرقمية المتجاورة. يمنح ضبط width: 100%; على صنف الجدول امتداداً متوازناً يملأ الحاوية، بينما يرسم تطبيق border على خلايا الرأس <th> وخلايا البيانات <td> حدوداً واضحة ومنظمة.
كما تتحكم خاصية table-layout في خوارزمية توزيع عرض الأعمدة؛ فالوضع الافتراضي auto يفحص أطول محتوى في كافة الصفوف أولاً، بينما يثبت الوضع fixed نسب الأعمدة فوراً بناءً على الصف الأول فقط.
عند إضافة إطار عبر border: 1px solid #c4b5fd; إلى الجدول وخلاياه، يعرض المتصفح في البداية خطوطاً مزدوجة حول كل خلية لأن الوضع الأولي هو border-collapse: separate;. وفي هذا الوضع المنفصل يمكنك التحكم في مسافة الفراغ بين صناديق الخلايا عبر border-spacing: 8px; وإخفاء إطارات الخلايا الفارغة عبر empty-cells: hide;.
أما لبناء جداول احترافية نظيفة، فاضبط خاصية border-collapse: collapse; على عنصر الجدول لدمج الحدود المتجاورة في خط شبكي واحد حاد بسماكة 1px؛ وعند الدمج يتجاهل المتصفح خاصيتي التباعد والخلايا الفارغة لاشتراك الخلايا في جدران موحدة.
.data-table {
width: 100%;
border-collapse: collapse;
}
.cell-head, .cell-data {
border: 1px solid #c4b5fd;
padding: 10px;
}Interactive Table Borders and Layout Labمختبر معاينة دمج حدود الجداول وتباعدها التفاعلي
تعتمد سهولة قراءة الجداول على منح الخلايا حشوة داخلية مريحة مثل padding: 12px 16px; على خلايا الرأس والبيانات معاً. ومن المهم الانتباه إلى أن المتصفحات توسّط نصوص خلايا الرأس <th> افتراضياً بينما تحاذي خلايا البيانات <td> نحو بداية السطر، ما يخلق عدم تطابق بصري بين عنوان العمود ومحتواه.
لذلك اضبط text-align صراحة على خلايا الرأس لتطابق اتجاه البيانات — right في العربية و left في الإنجليزية — مع ضبط المحاذاة العمودية عبر vertical-align: middle; أو top عند تفاوت عدد الأسطر داخل الصف الواحد.
تستغني جداول لوحات التحكم الحديثة عن الخطوط العمودية الكثيفة بين الأعمدة، وتعتمد بدلاً منها على ثلاث تقنيات هادئة تقود العين أفقياً عبر كل سجل بوضوح:
- الفواصل الأفقية: الاكتفاء بخط سفلي رفيع عبر
border-bottom: 1px solid #e5dcf5;على الخلايا بدلاً من الإحاطة الكاملة. - تناوب ألوان الصفوف: إسناد الصنف المسطح
.table-row-altبلون خلفية خفيف مثلbackground-color: #f7f3fd;للصفوف المتناوبة لتسهيل متابعة السجلات العريضة. - إبراز الصف عند التمرير: تنسيق
tr:hoverبلون مميز يضيء كامل الصف فور مرور مؤشر الفأرة فوقه.
.table-row-alt {
background-color: #f5effc;
}
tr:hover {
background-color: #e9ddfa;
}تتضمن الجداول الدلالية عنصر <caption> لوصف محتوى البيانات للقراء وقارئات الشاشة. ويعرضه المتصفح افتراضياً أعلى الجدول بالقيمة caption-side: top;، بينما تنقله القيمة caption-side: bottom; ليظهر بأناقة أسفل الجدول كتعليق توضيحي.
ولأن الجداول متعددة الأعمدة قد تتجاوز عرض شاشات الهواتف الضيقة وتكسر تخطيط الصفحة بأكملها، أحط الجدول دائماً بحاوية خارجية <div class="table-scroll"> تحمل overflow-x: auto; مع width: 100%; ليبقى التمرير الأفقي محصوراً بأمان داخل إطار الجدول وحده.
.table-scroll {
width: 100%;
overflow-x: auto;
}
.wide-table {
min-width: 520px;
border-collapse: collapse;
caption-side: bottom;
}عند تشخيص أبعاد الأعمدة أو سبب عدم ظهور لون التمرير في أدوات المطور DevTools، راجع تبويب الأنماط المحسوبة على عنصر الجدول وخلايا الرأس والبيانات للتأكد من تفعيل border-collapse: collapse; وعدم تغطية الخلايا لخلفية الصفوف.
| الخاصية | العنصر المستهدف | أبرز القيم | الوظيفة الهندسية |
|---|---|---|---|
border-collapse | <table> | separate، collapse | دمج جدران الخلايا المزدوجة في خط شبكي واحد |
border-spacing | <table> | 8px، 10px 6px | تحديد مسافة الفراغ بين الخلايا في الوضع المنفصل |
table-layout | <table> | auto، fixed | تثبيت نسب عرض الأعمدة بسرعة بناءً على الصف الأول |
caption-side | <table> | top، bottom | تحديد موضع عنوان الجدول الدلالي في الأعلى أو الأسفل |
empty-cells | <table> | show، hide | إخفاء إطارات الخلايا الفارغة في الوضع المنفصل |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
اجمع بين width: 100%; و border-collapse: collapse; لبناء جداول ذات خطوط مفردة أنيقة، وأضف حشوة مريحة ومحاذاة متطابقة لخلايا الرأس والبيانات، وميّز الصفوف عبر .table-row-alt و tr:hover مع إحاطة الجداول العريضة بحاوية overflow-x: auto;. الخطوة التالية — انتقل إلى درس الشفافية في لغة CSS لإتقان مقياس الشفافية وتأثيرها على الأبناء والتفاعلات البصرية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 border-collapse دمج الحدود border-collapse
- خاصية جداول تحدد ما إذا كانت الخلايا المتجاورة تشترك في حدود مدمجة مفردة أم تحتفظ بإطارات منفصلة.
- للمراجعة
- 02 border-spacing تباعد الخلايا border-spacing
- خاصية تحدد مسافة الفراغ الأفقي والعمودي بين خلايا الجدول عندما يكون وضع الحدود منفصلاً separate.
- للمراجعة
- 03 table-layout تخطيط الجدول table-layout
- خاصية تختار خوارزمية حساب عرض الأعمدة بين التقدير التلقائي حسب المحتوى auto والتوزيع الثابت السريع fixed.
- للمراجعة
- 04 caption-side موضع عنوان الجدول caption-side
- خاصية تحدد موضع عنصر عنوان الجدول الدلالي ليظهر أعلى الجدول بالقيمة top أو أسفله بالقيمة bottom.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 TH TH
- Table Header Cell
- وسم HTML الدلالي المخصص لخلية رأس العمود أو الصف، ويعرضه المتصفح بخط عريض ومحاذاة وسطى افتراضياً.
- للمراجعة
- 02 TD TD
- Table Data Cell
- وسم HTML القياسي الذي يحتوي على قيمة بيانات مفردة داخل صفوف الجدول.
- للمراجعة
- 03 TR TR
- Table Row
- وسم HTML الهيكلي الذي يجمع خلايا الرأس أو البيانات أفقياً في صف واحد داخل الجدول.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
نسّق جدول بيانات بعرض 100% مع تفعيل دمج الحدود collapse وحشوة خلايا 12px ومحاذاة موحدة لخلايا الرأس.
-
أحط جدولاً عريضاً بحاوية div تحمل عرض 100% وخاصية overflow-x بالقيمة auto مع نقل عنوان الجدول للأسفل.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.