جاري التحميل...

حدود الجداول في HTML

الجدول بدون خطوط يُقرأ؛ الحدود تجعل الشبكة واضحة بنظرة. الدرس السابق ثبّت البنية بـ table و tr و th و td. هذه الجلسة تضيف المظهر: في HTML الحديث ترسم الحدود بـ CSS، وليس فقط سمة العرض القديمة border على <table>. البنية تبقى في HTML؛ الخطوط والمسافات واللون تنتمي لقواعد النمط. فكر في الحدود كنظارات للشبكة — تساعد العين على تتبع الخلايا دون تغيير معنى البيانات.

لماذا CSS بدل السمة القديمة

كانت المتصفحات تقبل <table border="1"> كحيلة تعليمية سريعة. تلك السمة قديمة للصفحات الحديثة الجادة ولا تمنحك تقريباً أي تحكم في اللون أو السمك أو الجوانب الظاهرة. CSS يتيح ضبط العرض والنمط واللون بشكل مستقل، ومشاركة قاعدة واحدة عبر خلايا كثيرة، ودمج الحدود مع padding و border-collapse. تعلم الحدود عبر CSS يطابق أيضاً كيف ستنسّق العناوين والقوائم والتخطيط لاحقاً، فتبقى صفحات التدريب متسقة مع المشاريع الحقيقية.

الإجابة المباشرة

نسّق table و th و td بخاصية CSS border. استخدم border-collapse: collapse على الجدول لدمج حدود الخلايا المتجاورة في خط شبكة نظيف واحد بدل حافة مزدوجة سميكة. ضع القواعد في سمة style للعروض الصغيرة، أو — أفضل لإعادة الاستخدام — في كتلة <style> أو ورقة أنماط مع class. أبقِ ترميز tr/th/td دلالياً؛ المظهر فقط ينتقل إلى CSS. إذا بدأ درس تعليمي بـ border="1" وحده، اعتبره ملاحظة متحفية وترجم الفكرة إلى CSS.

حدود CSS مقابل الترميز القديم

📊 Presenting table lines today

Approach	Beginner verdict	Why
CSS `border` على th/td (+ collapse)	يُفضَّل	مرن وقابل لإعادة الاستخدام وحديث
`<table border="1">` وحده	تجنّبه للعمل الجديد	HTML عرضي قديم
حدود مع padding صفر	أصلحه بـ padding	النص الملتصق بالخط صعب القراءة
حدود منفصلة بلا collapse	تجربة اختيارية	تُظهر لماذا يبدو collapse أنظف

حدود على الخلايا (تدريب inline)

الأنماط المضمّنة مناسبة وأنت تجرّب على جدول صغير واحد. ابدأ بـ collapse، ثم امنح كل خلية رأس وبيانات حدّاً صلباً رفيعاً وشيئاً من padding.

Borders on cells

html

HTML Code

<table style="border-collapse: collapse;">
<tr>
<th style="border: 1px solid #333; padding: 6px;">City</th>
<th style="border: 1px solid #333; padding: 6px;">Code</th>
</tr>
<tr>
<td style="border: 1px solid #333; padding: 6px;">Tehran</td>
<td style="border: 1px solid #333; padding: 6px;">021</td>
</tr>
</table>

قراءة عيّنة inline

border-collapse: collapse على table يدمج الحدود المتجاورة في شبكة واحدة
كل th/td يضع border: 1px solid #333 لخط داكن بسيط
padding: 6px يبقي النص بعيداً عن لمس الحد
الأنماط المضمّنة تتكرر على كل خلية — مفيدة للتعلم، مزعجة للجداول الكبيرة
بنية HTML لم تتغير عن درس الجداول؛ أُضيف المظهر فقط

مظهر مشترك بكتلة style

عندما يجب أن تتطابق عدة خلايا، قاعدة class واحدة أفضل من نسخ نفس سلسلة inline في كل مكان. كتلة <style> صغيرة في رأس المستند جسر واضح نحو أوراق الأنماط الخارجية.

Shared look with a style block

html

HTML Code

<head>
<style>
table.grid { border-collapse: collapse; }
table.grid th, table.grid td { border: 1px solid #444; padding: 8px; }
</style>
</head>
<body>
<table class="grid">
<tr><th>Item</th><th>Qty</th></tr>
<tr><td>Pens</td><td>12</td></tr>
</table>
</body>

قراءة عيّنة النمط المشترك

table.grid يحدّ نطاق القواعد حتى لا يضطر كل جدول في الصفحة أن يبدو متطابقاً
قاعدة واحدة تنسّق كلاً من th و td داخل .grid
تغيير padding أو اللون في مكان واحد يحدّث الشبكة كلها
ما زلت تكتب صفوف tr/th/td العادية — CSS لا يستبدل تلك العناصر
دورات CSS اللاحقة تعمّق المحددات؛ الهدف هنا وصفة حدود نظيفة قابلة للتكرار

Collapse والمسافات وسهولة القراءة

بدون border-collapse: collapse تظهر كثير من المتصفحات حدوداً منفصلة تشبه خطاً مزدوجاً أو شبكة بارزة. Collapse هو خيار المبتدئ المعتاد لجداول البيانات لأنه يُقرأ كسطح شبيه بجدول بيانات واحد متماسك. الـ padding داخل الخلايا يهم بقدر الخط نفسه: padding صفر يجعل النص ملتصقاً بالحد ومرهقاً للمسح. ابدأ بـ 6px–8px وعدّل بالعين على صفحة التدريب. اللون اختياري — رمادي محايد أو فحم داكن يكفي للتعلم؛ الألوان الصاخبة تشتت عن الأرقام التي تقارنها.

البنية تبقى؛ المظهر ينتقل

لا تحذف رؤوس th لأن CSS موجود. لا تضع العلاقات الجدولية فقط في صناديق ملوّنة بلا ترميز جدول حقيقي. الحدود زينة ووضوح فوق الهيكل الذي بنيته في جلسة الجداول. إن لم تكن البيانات جدولية، عد إلى القوائم — الخطوط الأجمل لا تصلح اختيار العنصر الخاطئ. كذلك لا تُحيِ جداول التخطيط المتداخلة فقط لأن الحدود صارت جميلة فجأة؛ مناطق الصفحة ما زالت للبنية وتخطيط CSS لاحقاً.

تدرب في المحرر

أعد استخدام (أو أعد إنشاء) جدول تدريب صغير من جلسة الجداول بخلايا th/td حقيقية.
أضف الحدود بـ CSS — جرّب أولاً أنماط inline على كل خلية لترى كل خاصية.
شغّل border-collapse وأوقفه لمقارنة الخطوط المزدوجة بشبكة خط واحد.
أضف padding ليجلس النص مريحاً داخل كل خلية؛ جرّب 4px ثم 8px.
أعد الهيكلة إلى class مع كتلة <style> قصيرة مثل العيّنة الثانية.
تأكد أن الرؤوس ما زالت th وخلايا البيانات ما زالت td بعد التنسيق.
اختيارياً: نسّق فقط .grid th بحد أو خلفية أقوى قليلاً لإبراز التسميات — دون تغيير معنى HTML.

أخطاء سهلة

الاعتماد فقط على سمات عرضية قديمة مثل border="1" لمواقع جادة
ترك الحدود بلا collapse والتساؤل لماذا تبدو الخطوط سميكة أو مزدوجة
padding صفر فيلمس النص الحد
التنسيق بـ CSS مع حذف تسميات th الدلالية
تطبيق td { border: ... } عام يغيّر جداول غير ذات صلة بالخطأ
اعتبار CSS الحدود سبباً لبناء تخطيط الصفحة بجداول متداخلة مجدداً

ملخص

فضّل CSS border على th و td (و collapse على table)
border-collapse: collapse ينظّف الشبكة إلى خطوط مفردة
Padding يحسّن القراءة داخل الخلايا
البنية تبقى في HTML؛ المظهر في CSS
تجنب الاعتماد على سمة border القديمة للعمل الجديد
أعد هيكلة الحدود المضمّنة المتكررة إلى class عندما يكبر الجدول

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة