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

سربرگ جدول در HTML

شبکهٔ اندازه‌گرفته و حاشیه‌دار هنوز شکست می‌خورد اگر معلوم نباشد هر برچسب مال کدام مقدار است. بعد از اندازه جدول، این جلسه معنای برچسب را می‌گذارد: th برای سلول سربرگ، scope اختیاری برای ستون در برابر ردیف، و caption وقتی کل جدول عنوان می‌خواهد. ظاهر (حاشیه، عرض، padding) در CSS درس‌های قبل می‌ماند. ساختار و معنای سربرگ در HTML می‌ماند. th را پلاک معنا بگیرید، نه فقط «متن پررنگ پیش‌فرض».

چرا سلول سربرگ فقط `td` پررنگ نیست

مرورگر ممکن است th را پیش‌فرض پررنگ کند، اما برد واقعی معناست. صفحه‌خوان و ابزارها وقتی سلول‌ها واقعاً سربرگ‌اند می‌توانند نام ستون یا ردیف را بگویند. استایل font-weight: bold روی td برای چشم شبیه سربرگ است و برای ابزار کمکی مبهم می‌ماند. اگر درس Tables فقط th را معرفی کرد، اینجا سربرگ مهارت اصلی است: کی، چگونه با scope، و کی caption بالای شبکه می‌آید.

پاسخ مستقیم

برچسب‌های سربرگ را با th بزنید — نام بالای ستون، نام کنار ردیف، یا هر دو در جدول فشرده‌تر. روی سرستون scope="col" و روی سرردیف scope="row" بگذارید وقتی رابطه باید صریح باشد. <caption> کوتاه داخل table بگذارید وقتی داده عنوان مشترک می‌خواهد. مقادیر داده در td بمانند. فقط به استایل پررنگ برای جعل سربرگ تکیه نکنید. تعداد سلول هر ردیف را یکسان نگه دارید تا سربرگ با مقدار جور بماند.

سرستون با caption

الگوی رایج: یک ردیف سربرگ بالا، هر برچسب th scope="col"، به‌علاوه caption که کل جدول را نام می‌دهد. ردیف‌های داده زیر با td برای مقدار. هم‌خوان با موجودی، امتیاز و لیست کلاس.

Column headers and caption

html

HTML Code

<table>
<caption>Weekly inventory</caption>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Aisle</th>
</tr>
<tr>
<td>Notebook</td>
<td>12</td>
<td>B2</td>
</tr>
<tr>
<td>USB cable</td>
<td>7</td>
<td>A1</td>
</tr>
</table>

خواندن نمونهٔ سرستون

caption جدول را برای همه عنوان می‌کند؛ معمولاً اولِ داخل table
هر برچسب بالا th با scope="col" است تا ابزار بداند سربرگ مال ستون است
تعداد و راهرو در td می‌مانند چون داده هستند نه برچسب
سه سلول در هر ردیف سربرگ را با مقدار هم‌تراز نگه می‌دارد
هنوز می‌توانید حاشیه و عرض را با CSS درس‌های قبل استایل دهید بدون عوض کردن این تگ‌ها
اگر caption عجیب به‌نظر رسید، چک کنید بیرون از table نباشد

سرردیف برای رکوردهای نام‌دار

بعضی جدول‌ها مثل فهرست افرادند که سلول اول هر ردیف نامی است که بقیهٔ ردیف را برچسب می‌زند. آن نام‌ها را th scope="row" کنید. می‌توانید ردیف سرستون (scope="col") را با سرردیف (scope="row") در یک جدول ترکیب کنید — رایج در برگهٔ امتیاز و مقایسه.

Row headers with a header row

html

HTML Code

<table>
<caption>Team scores</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Points</th>
<th scope="col">Level</th>
</tr>
<tr>
<th scope="row">Ada</th>
<td>98</td>
<td>A</td>
</tr>
<tr>
<th scope="row">Lin</th>
<td>91</td>
<td>B</td>
</tr>
</table>

خواندن نمونهٔ سرردیف

ردیف بالا هنوز th scope="col" برای Points و Level (و Name) دارد
Ada و Lin با th scope="row" ردیف خود را برچسب می‌زنند
Points و Level سلول دادهٔ td می‌مانند
caption دوباره کل مجموعه را نام می‌دهد
ترکیب scope ستون و ردیف معتبر است؛ همه سلول را th نکنید
اگر صفحه‌خوان ردیف را قاطی کرد، مطمئن شوید سلول نام واقعاً th است و scope="row" دارد

نقشهٔ scope (مرجع سریع)

وقتی بین مقادیر scope شک دارید از این نقشه استفاده کنید. روی ساده‌ترین تمرین‌ها می‌توانید scope را رد کنید؛ وقتی هم ردیف سرستون و هم برچسب ردیف دارید ترجیحاً اضافه کنید.

📊 scope attribute values

Value	Typical use	Example cell
col	Header labels a column	Top “Qty” label
row	Header labels a row	Side “Ada” name
colgroup	Header for a group of columns	Advanced multi-header grids
rowgroup	Header for a group of rows	Advanced sectioned tables

در این کورس مبتدی اول col و row را مسلط شوید. colgroup و rowgroup در جدول‌های اداری فشرده‌تر می‌آیند؛ برای دموی موجودی هفتگی لازم نیست. در شک بپرسید: «این برچسب کل ستون را وصف می‌کند یا کل ردیف را؟» بعد col یا row را انتخاب کنید.

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

جدول سه‌ستونه دربارهٔ یک باشگاه کوچک بسازید (نام، نقش، رأی).
caption که جدول باشگاه را نام می‌دهد اضافه کنید.
برچسب‌های بالا را th scope="col" کنید.
نام هر نفر را th scope="row" کنید.
نقش و رأی را td بگذارید.
صفحه را ببینید؛ موقتاً یک نام را به td برگردانید و ببینید معنا ضعیف می‌شود حتی اگر CSS پررنگ هنوز «شبیه سربرگ» باشد.
th scope="row" را برگردانید و زیر جدول یک جمله بنویسید که چرا scope کمک می‌کند.
اختیاری: CSS حاشیه یا عرض درس‌های قبل را بدون عوض کردن مارکاپ سربرگ دوباره استفاده کنید.

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

td پررنگ (یا درشت) و نامیدنش سربرگ بدون th
گذاشتن caption بیرون از table یا پاراگراف ساده به‌جای caption
فراموش کردن scope روی شبکه‌های ترکیبی سرستون + سرردیف
th کردن همه سلول‌ها از جمله عدد خالص
تعداد سلول ناهماهنگ تا سرستون با مقدار زیر جور نماند
فقط caption و همه سلول‌ها td (عنوان جایگزین سلول سربرگ نیست)
عادت layout-table و چپاندن قاب صفحه داخل th/td

خلاصه

th سلول سربرگ واقعی است؛ td استایل‌شده کافی نیست
scope="col" سربرگ را به ستون؛ scope="row" به ردیف وصل می‌کند
caption کل جدول را برای انسان و ابزار عنوان می‌دهد
داده در td بماند و طول ردیف‌ها یکسان باشد
حاشیه و اندازه در CSS؛ معنای سربرگ در HTML
درس‌های بعدی جدول می‌توانند روی سربرگ صادق ساختار غنی‌تر بسازند

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

آماده شروع

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

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

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

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

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

زبان