در حال بارگذاری...

اندازه جدول در HTML

جدول می‌تواند در ستون محتوا کش بیاید یا مثل کارت قیمت جمع بماند. بعد از درس حاشیه که خط شبکه را کشید، این جلسه جعبه را اندازه می‌دهد: با CSS (width، max-width، padding، عرض اختیاری ستون) جدول هم با داده و هم با صفحه جور شود. ظاهر در CSS می‌ماند؛ table / tr / th / td هنوز معنا را حمل می‌کنند. اگر حاشیه شبکه را دیدنی کرد، اندازه آن را راحت می‌کند.

«اندازه» برای جدول یعنی چه

اندازه یک عدد تنها نیست. کل جدول نسبت به والد عرض دارد. سلول‌ها برای نفس کشیدن متن به padding نیاز دارند. ستون‌ها می‌توانند فضا را مساوی تقسیم کنند یا ستون برچسب را پهن‌تر کنند. روی موبایل جدولی که به 1200px اصرار دارد حتی با دو ستون کوتاه اسکرول افقی سخت می‌آورد. دستورالعمل‌های انعطاف‌پذیر — اغلب width: 100% با max-width معقول — شبکه‌های ساده را خوانا نگه می‌دارند بدون اینکه CSS جای ساختار صادقانه th/td را بگیرد.

پاسخ مستقیم

روی table مقدار width بگذارید (مثلاً 100%) و در صورت نیاز با max-width محدود کنید (مثلاً 480px یا 640px). وقتی یک ستون باید فضای بیشتری بگیرد، روی th/td hint عرض بدهید. درصد و max-width را بر عرض‌های پیکسلی عظیم که موبایل را overflow می‌کنند ترجیح دهید. border-collapse و padding درس حاشیه را نگه دارید تا اندازه و خط با هم کار کنند. قوانین را با class محدود کنید تا یک دمو همه جدول‌های صفحه را تغییر ندهد.

عرض انعطاف‌پذیر با hint ستون

الگوی رایج مبتدی: جدول تا یک سقف والد را پر می‌کند، حاشیه collapse می‌ماند، و ستون اول برای برچسب‌ها سهم بیشتری می‌گیرد.

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%; } hint می‌دهد ستون نام پلن از ستون قیمت پهن‌تر باشد
محدود کردن با 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 ظاهر اختیاری است — وقتی عدد و کلمه در شبکهٔ کوچک کنار هم باشند مفید است
هنوز بدون nesting جدول layout؛ فقط یک جدول دادهٔ واقعی را اندازه می‌دهید
مرورگر را کوچک کنید: جدول باید تا حد محتوا جمع شود، نه اسکرول غول‌آسا به پیش‌فرض

پیکسل ثابت در برابر عادت انعطاف‌پذیر

عرض‌های ثابت مثل width: 1200px روی مانیتور بزرگ خوب و روی موبایل دردناک‌اند. اگر حداقل برای چاپ یا داشبورد فشرده لازم است، از عرض سیال به‌علاوهٔ max-width شروع کنید یا بعداً استراتژی واکنش‌گرا برنامه‌ریزی کنید. برای جدول‌های مبتدی این دوره، اندازهٔ انعطاف‌پذیر عادت خوب پیش‌فرض است. درصدهای width ستون hint هستند — مرورگر ممکن است با متن خیلی بلند تنظیم کند، پس حین یادگیری متن سلول را کوتاه نگه دارید. وقتی ستونی جمع نمی‌شود، قبل از مقصر دانستن max-width URL یا کلمات بی‌فاصله را چک کنید.

padding، ستون‌ها و collapse با هم

کار اندازه کنار درس حاشیه می‌نشیند. بدون padding، سلول‌های فشرده حتی در عرض بیرونی عالی تنگ‌اند. بدون collapse، آزمایش عرض ممکن است ضخیم یا ناهموار به نظر برسد چون حاشیهٔ جدا فضا می‌خورد. hint اختیاری ستون (width روی :first-child یا th خاص) وقتی برچسب‌ها به فضای بیشتر از مقادیر نیاز دارند مرورگر را راهنمایی می‌کند. CSS اندازه بهانهٔ حذف هدر th یا بازسازی صفحه با جدول‌های layout تو در تو نیست — آن تعارض در جلسهٔ Tables حل شده است.

تمرین در ویرایشگر

به جدول تمرین width: 100% و یک max-width (مثلاً 480px) بدهید.
به th/td padding اضافه کنید (در صورت داشتن، استایل حاشیه را دوباره استفاده کنید).
مرورگر را تغییر اندازه دهید — تأیید کنید جدول دو ستونه اسکرول افقی بی‌پایان نمی‌آورد.
اختیاری: ستون اول را با :first-child یا class پهن‌تر کنید.
جدول را با max-width تنگ‌تر مثل 320px کپی کنید و رد پا را مقایسه کنید.
موقتاً width: 1200px بگذارید، درد موبایل را ببینید، سپس بردارید.
با عرض‌های تنظیم‌شده border-collapse را خاموش/روشن کنید و حس اندازهٔ بیرونی را ببینید.
زیر جدول یک جمله بنویسید: max-width انتخابی و دلیلش.

اشتباهات آسان

جدول با width: 1200px ثابت که صفحهٔ کوچک را می‌شکند
بدون padding — سلول فشرده و سخت‌خوان
جنگ حاشیه و عرض بدون border-collapse
table { width: ... } سراسری که هر دموی صفحه را عوض می‌کند
انتظار اینکه hint width ستون رشته‌های خیلی بلند شکسته‌نشدنی را شکست دهد
استفاده از اندازهٔ جدول برای جعل ستون‌های layout تمام‌صفحه
فراموش کردن max-width تا width: 100% تنها یک جدول سه‌سلولی ریز را روی مانیتور ultrawide بکشد

خلاصه

جدول را با CSS width و max-width اندازه دهید
برای سلول خوانا از padding استفاده کنید
برای صفحهٔ کوچک چیدمان انعطاف‌پذیر را ترجیح دهید
hint عرض ستون اختیاری است و در صورت امکان با class محدود شود
حاشیه را collapse نگه دارید تا اندازه و خط هم‌کار باشند
ساختار در HTML؛ ابعاد در CSS
درس‌های بعدی هدر روی شبکه‌ای بنا می‌شوند که از قبل با viewport جور است

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان