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

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

يمكن أن يمتد الجدول عبر عمود المحتوى أو يبقى مضغوطًا كبطاقة أسعار. بعد درس الحدود الذي رسم خطوط الشبكة، تقيس هذه الجلسة الصندوق: استخدم CSS (width وmax-width وpadding وعروض أعمدة اختيارية) ليتناسب الجدول مع البيانات والشاشة. العرض يبقى في CSS؛ وtable / tr / th / td ما زالت تحمل المعنى. إن أظهرت الحدود الشبكة، فإن الحجم يجعلها مريحة.

ماذا يعني «الحجم» للجدول

الحجم ليس رقمًا واحدًا. للجدول كله عرض بالنسبة لأبيه. تحتاج الخلايا إلى padding حتى يتنفس النص. قد تتقاسم الأعمدة المساحة بالتساوي أو تفضّل عمود تسميات أعرض. على الهواتف، جدول يصر على 1200px يفرض تمريرًا أفقيًا مزعجًا حتى لو كانت البيانات عمودين قصيرين فقط. وصفات مرنة — غالبًا width: 100% مع max-width معقول — تبقي الشبكات البسيطة مقروءة دون أن يستبدل CSS بنية th/td الصادقة.

إجابة مباشرة

اضبط width على table (مثلًا 100%) واحدده اختياريًا بـ max-width (مثلًا 480px أو 640px). ألمح لعرض العمود على th/td عندما يحتاج عمود مساحة أكبر. فضّل النسب وmax-width على عروض بكسل هائلة تفيض على الهواتف. أبقِ border-collapse والـ padding من درس الحدود حتى يعمل الحجم والخطوط معًا. قيّد القواعد بـ class حتى لا يغيّر عرض توضيحي كل الجداول في الصفحة.

عرض مرن مع تلميح عمود

نمط مبتدئ شائع: الجدول يملأ الأب حتى سقف، الحدود تبقى collapsed، والعمود الأول يأخذ حصة أكبر للتسميات.

Flexible table width

html

HTML Code

<style>
table.prices { width: 100%; max-width: 480px; border-collapse: collapse; }
table.prices th, table.prices td { padding: 8px; border: 1px solid #555; }
table.prices th:first-child, table.prices td:first-child { width: 60%; }
</style>
<table class="prices">
<tr><th>Plan</th><th>Price</th></tr>
<tr><td>Starter</td><td>0</td></tr>
<tr><td>Pro</td><td>9</td></tr>
</table>

قراءة العينة المرنة

width: 100% يتيح للجدول استخدام عرض المحتوى المتاح
max-width: 480px يمنعه من أن يصبح شريطًا عملاقًا على الشاشات العريضة
border-collapse: collapse يمنع صراع الحجم والحدود
padding: 8px يعطي كل خلية مساحة داخلية مقروءة
:first-child { width: 60%; } يلمّح أن عمود اسم الخطة أعرض من عمود السعر
تقييد class (.prices) يتجنب تغيير كل جداول الصفحة بالخطأ

جدول مضغوط بـ max-width

أحيانًا تريد بطاقة مقارنة صغيرة لا تمتد بعرض كامل. max-width أقل (مع width: 100% داخل السقف) يبقي الشبكة مرتبة على سطح المكتب والجوال.

Compact max-width table

html

HTML Code

<style>
table.compact {
width: 100%;
max-width: 320px;
border-collapse: collapse;
}
table.compact th, table.compact td {
padding: 6px 10px;
border: 1px solid #444;
text-align: left;
}
</style>
<table class="compact">
<tr><th>Item</th><th>Stock</th></tr>
<tr><td>USB cable</td><td>14</td></tr>
<tr><td>Notebook</td><td>3</td></tr>
</table>

قراءة العينة المضغوطة

نفس الفكرة المرنة، مع max-width أضيق لبصمة شبيهة بالبطاقة
الـ padding الأفقي (6px 10px) قد يختلف عن العمودي للراحة
text-align: left عرض اختياري — مفيد عندما تتشارك الأرقام والكلمات شبكة صغيرة
بلا تداخل جداول تخطيط؛ أنت تقيس جدول بيانات حقيقي فقط
غيّر حجم المتصفح: يجب أن ينكمش الجدول مع العمود حتى حدود المحتوى، لا أن يفرض شريط تمرير ضخم افتراضيًا

البكسل الثابت مقابل عادات مرنة

عروض ثابتة مثل width: 1200px قد تبدو جيدة على شاشة كبيرة ومؤلمة على هاتف. إن احتجت حدًا أدنى للطباعة أو لوحة كثيفة، ابدأ من عرض سائل مع max-width، أو خطط لاستراتيجية متجاوبة لاحقًا. لجداول المبتدئين في هذه الدورة، الحجم المرن هو العادة الجيدة الافتراضية. نسب width للأعمدة تلميحات — قد يعدّل المتصفح عند محتوى طويل جدًا أو غير قابل للكسر، فأبْقِ نص الخلايا قصيرًا أثناء التعلم. عندما يرفض عمود الانكماش، افحص روابط طويلة أو كلمات بلا مسافات قبل لوم max-width.

الـ padding والأعمدة وcollapse معًا

عمل الحجم يجلس بجانب درس الحدود. بلا padding تبدو الخلايا الكثيفة خانقة حتى بعرض خارجي مثالي. بلا collapse قد تبدو تجارب العرض أثخن أو غير منتظمة لأن الحدود المنفصلة تستهلك مساحة إضافية. تلميحات الأعمدة الاختيارية (width على خلايا :first-child أو على th محدد) ترشد المتصفح عندما تحتاج التسميات مساحة أكبر من القيم. لا تستخدم CSS الحجم ذريعة لحذف رؤوس th أو لإعادة بناء الصفحة كجداول تخطيط متداخلة — ذلك النزاع حُسم في جلسة Tables.

تمرّن في محررك

امنح جدول التمرين width: 100% وmax-width (جرّب 480px).
أضف padding إلى th/td (أعد استخدام أنماط الحدود إن وُجدت).
غيّر حجم المتصفح — تأكد أن جدول عمودين بسيط لا يفرض تمريرًا أفقيًا لا ينتهي.
اختياريًا اجعل العمود الأول أعرض بـ :first-child أو class.
انسخ الجدول بـ max-width أضيق مثل 320px وقارن البصمة.
اضبط مؤقتًا width: 1200px، لاحظ ألم الجوال، ثم أزله.
بدّل border-collapse بينما العروض مضبوطة وراقب إحساس الحجم الخارجي.
اكتب جملة تحت الجدول تذكر فيها أقصى عرض اخترته ولماذا.

أخطاء سهلة

جداول width: 1200px ثابتة تكسر الشاشات الصغيرة
بلا padding فخلايا كثيفة صعبة القراءة
صراع الحدود والعروض بلا border-collapse
table { width: ... } عام يغيّر كل عروض الصفحة
توقع أن تلميحات width للعمود تهزم سلاسل طويلة غير قابلة للكسر
استخدام حجم الجدول لتزييف أعمدة تخطيط صفحة كاملة مجددًا
نسيان max-width فيمتد width: 100% وحده جدولًا من ثلاث خلايا صغيرة عبر شاشة ultrawide

الملخص

قِس الجداول بـ CSS width وmax-width
استخدم padding لخلايا مقروءة
فضّل التخطيطات المرنة للشاشات الصغيرة
تلميحات عرض الأعمدة اختيارية ومقيّدة بـ class عند الإمكان
أبقِ الحدود collapsed ليتعاون الحجم والخطوط
البنية في HTML؛ الأبعاد في CSS
دروس الرؤوس التالية تبنى على شبكة تناسب نافذة العرض مسبقًا

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

جاهز للبدء

اختبر معرفتك

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

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

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

اللغة