حاشیه جدول در HTML
جدول بدون خط هم خواناست؛ حاشیه شبکه را در یک نگاه واضح میکند. درس قبلی ساختار را با table، tr، th و td قفل کرد. این جلسه ظاهر را اضافه میکند: در HTML مدرن حاشیه را با CSS میکشید، نه فقط attribute نمایشی قدیمی border روی <table>. ساختار در HTML میماند؛ خط، فاصله و رنگ متعلق به قوانین استایل است. حاشیه مثل عینک برای شبکه است — چشم را بین سلولها هدایت میکند بدون اینکه معنای داده عوض شود.
چرا CSS بهجای attribute قدیمی
مرورگرها زمانی <table border="1"> را بهعنوان ترفند سریع آموزشی میپذیرفتند. آن attribute برای صفحات جدی مدرن منسوخ است و تقریباً هیچ کنترلی روی رنگ، ضخامت یا طرفهای ظاهرشده نمیدهد. CSS اجازه میدهد عرض، سبک و رنگ را جداگانه تنظیم کنید، یک قانون را بین سلولهای زیاد بهاشتراک بگذارید و حاشیه را با padding و border-collapse ترکیب کنید. یادگیری حاشیه از مسیر CSS با استایل سرفصلها، فهرستها و layout بعدی هم همراستاست؛ پس صفحات تمرین با پروژههای واقعی سازگار میمانند.
پاسخ مستقیم
روی table، th و td با ویژگی CSS border استایل بدهید. روی جدول از border-collapse: collapse استفاده کنید تا حاشیههای مجاور در یک خط شبکهٔ تمیز ادغام شوند، نه لبهٔ ضخیم دوتایی. قوانین را برای دموی کوچک در attribute style بگذارید، یا — بهتر برای استفادهٔ مجدد — در بلوک <style> یا stylesheet با یک 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)
استایلهای inline وقتی روی یک جدول کوچک آزمایش میکنید خوباند. اول collapse را بگذارید، سپس به هر سلول سرستون و داده یک حاشیهٔ نازک solid و کمی padding بدهید.
Borders on cells
html<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متن را از تماس با حاشیه دور نگه میدارد- استایلهای inline روی هر سلول تکرار میشوند — برای یادگیری مفید، برای جدول بزرگ شلوغ
- ساختار HTML نسبت به درس Tables عوض نشده؛ فقط ظاهر اضافه شده است
ظاهر مشترک با بلوک style
وقتی چند سلول باید یکسان باشند، یک قانون class بهتر از کپی همان رشتهٔ inline همهجا است. یک بلوک کوچک <style> در head سند پلی روشن بهسمت stylesheet خارجی است.
Shared look with a style block
html<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 شروع کنید و روی صفحهٔ تمرین با چشم تنظیم کنید. رنگ اختیاری است — خاکستری خنثی یا زغال تیره برای یادگیری کافی است؛ رنگهای جیغ از اعدادی که مقایسه میکنید حواس را پرت میکنند.
ساختار میماند؛ ظاهر جابهجا میشود
بهخاطر وجود CSS سرستونهای th را حذف نکنید. روابط جدولی را فقط در جعبههای رنگی بدون نشانهگذاری واقعی جدول نگذارید. حاشیه تزئین و وضوح روی اسکلتی است که در جلسهٔ Tables ساختید. اگر داده جدولی نیست، به فهرست برگردید — خطهای قشنگ انتخاب عنصر غلط را درست نمیکنند. همچنین فقط چون حاشیه ناگهان زیبا شد جدول layout تو در تو را زنده نکنید؛ نواحی صفحه همچنان متعلق به ساختار و layout بعدی CSS است.
تمرین در ویرایشگر
- یک جدول تمرین کوچک از جلسهٔ Tables را با سلولهای واقعی
th/tdدوباره استفاده یا بازسازی کنید. - حاشیه را با CSS اضافه کنید — اول استایل inline روی هر سلول تا هر ویژگی را ببینید.
border-collapseرا روشن و خاموش کنید تا خط دوتایی را با شبکهٔ تکخطی مقایسه کنید.paddingاضافه کنید تا متن راحت داخل سلول بنشیند؛4pxسپس8pxرا امتحان کنید.- به یک
classبههمراه بلوک کوتاه<style>مثل نمونهٔ دوم بازآرایی کنید. - بعد از استایل، تأیید کنید سرستونها هنوز
thو سلولهای داده هنوزtdهستند. - اختیاری: فقط
.grid thرا با حاشیه یا پسزمینهٔ کمی قویتر برای تأکید برچسبها استایل دهید — بدون عوض کردن معنای HTML.
اشتباهات آسان
- تکیهٔ صرف روی attributeهای نمایشی منسوخ مثل
border="1"برای سایتهای جدی - گذاشتن حاشیه بدون collapse و تعجب از خطوط ضخیم یا دوتایی
- padding صفر طوری که متن به حاشیه بچسبد
- استایل با CSS ولی حذف برچسبهای معنایی
th - اعمال سراسری
td { border: ... }که تصادفاً جدولهای نامرتبط را عوض میکند - تلقی CSS حاشیه بهعنوان بهانه برای ساختن layout صفحه با جدول تو در تو دوباره
خلاصه
- ترجیح دهید CSS
borderرویthوtd(و collapse رویtable) border-collapse: collapseشبکه را به خطوط تکی تمیز میکند- Padding خوانایی داخل سلول را بهتر میکند
- ساختار در HTML میماند؛ ظاهر در CSS
- برای کار جدید به attribute منسوخ
borderوابسته نشوید - وقتی جدول بزرگ شد حاشیههای inline تکراری را به class بازآرایی کنید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود