جدولها در HTML
وقتی داده ردیف و ستون روشن دارد — برنامهٔ زمانی، برگهٔ امتیاز، مقایسهٔ قیمت، چیدمان صندلی — از table HTML استفاده کنید، نه تودهٔ فاصله یا شبکهٔ جعلی با فهرست. فهرستها مجموعه و توالی را روی یک محور اصلی آموزش دادند. جدولها دادهٔ دوبعدی را آموزش میدهند: هر سلول در تقاطع ردیف–ستون با برچسبی که میتوان نامید مینشیند. اگر کسی بپرسد «در ردیف دو، ستون Score چه هست؟»، جدول پاسخ صادقانه است.
جدول به چه کار میآید
جدول روابط را روی یک شبکه بیان میکند. خوانندگان با نگاه به پایین یک ستون یا عرض یک ردیف سریع مقایسه میکنند. فناوریهای کمکی وقتی سرستونها را با th علامت بزنید — نه با استایل پررنگ روی td معمولی — میتوانند سرستون را همراه سلول داده اعلام کنند. به همین دلیل جدول متعلق به اطلاعات جدولی است — نه ساختن بنر، سایدبار و فوتر کل سایت با table تو در تو مثل آموزشهای قدیمی layout. وقتی محتوا واقعاً شبکهٔ حقایق قابلمقایسه است، نشانهگذاری جدول پیچیدگیاش را میارزد.
پاسخ مستقیم
table— کل جدولtr— یک ردیف جدولth— سلول سرستون (برچسب ستون یا ردیف)td— سلول داده
برچسبهای سرستون را درthبگذارید تا معنا برای انسان و ابزار کمکی روشن باشد. تعداد سلولها را در همهٔ ردیفها یکسان نگه دارید مگر بعداً ویژگیهای پیشرفتهٔ span مثلcolspanرا بیاموزید. جدول را برای شبکهٔ داده بهکار ببرید؛ برای layout صفحه از CSS و بخشهای semantic استفاده کنید. یکcaptionکوتاه (در دموی دوم) مجموعهٔ داده را برای همهٔ کسانی که به شبکه میرسند نام میگذارد.
جدول دادهٔ ساده
با یک ردیف سرستون از سلولهای th شروع کنید، سپس ردیفهای داده با سلولهای td. این شکل بسیاری از جدول امتیاز و مقایسهٔ مبتدی را پوشش میدهد.
Simple data table
html<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ada</td>
<td>98</td>
</tr>
<tr>
<td>Lin</td>
<td>91</td>
</tr>
</table>خواندن نمونهٔ ساده
tableکل شبکه را میپیچد- هر
trیک ردیف افقی است - ردیف اول از
thبرای برچسب ستون («Name»، «Score») استفاده میکند - ردیفهای بعدی از
tdبرای مقادیر معمولی استفاده میکنند - استایل پیشفرض مرورگر ممکن است حاشیه را کمرنگ نشان دهد یا نه — درسهای بعدی حاشیه را پوشش میدهند؛ اول ساختار
- سلولها را در هر ردیف بشمارید: هر دو ردیف داده دو سلول دارند، مطابق دو سرستون
Caption و برچسب ردیف
یک caption جدول را برای همه نام میگذارد. استفاده از th در ستون اول میتواند هر ردیف را برچسب بزند وقتی عنوان ردیف به اندازهٔ عنوان ستون مهم است. caption را کوتاه و مشخص نگه دارید.
Table with caption and row headers
html<table>
<caption>Practice quiz scores</caption>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<th>Ada</th>
<td>98</td>
</tr>
<tr>
<th>Lin</th>
<td>91</td>
</tr>
</table>خواندن نمونهٔ caption
- در الگوی رایج مبتدی،
captionباید اولین فرزند داخلtableباشد - سرستونهای ستون در ردیف بالا بهصورت
thمیمانند - نام ردیف در ستون اول هم میتواند
thباشد تا «Ada» برچسب باشد، نه فقط سلولی شبیه عدد - بقیهٔ سلولها برای امتیاز واقعی
tdمیمانند - هنوز layout صفحه نمیسازید — یک مجموعهٔ دادهٔ کوچک را توصیف میکنید
جدول در برابر فهرست در برابر layout
- آیتمهای مرتبط یا گامها با یک محور اصلی → فهرستها (
ul/olاز درس قبلی) - مقادیر مقایسهشده در ردیف و ستون → جدولها
- ناحیههای کل صفحه (بنر، ستونها، فوتر) → ساختار semantic + CSS بعداً، نه جدولهای layout تو در تو و غولآسا
عادت قدیمی «table layout» واکنشگرایی را روی صفحهٔ کوچک میشکند و دسترسی را سختتر میکند. اگر خود را در حال تو در تو کردن جدول فقط برای قرار دادن لوگو کنار منو دیدید، متوقف شوید و منتظر درسهای layout بمانید. پرسش این است: «آیا سلولها را در یک شبکه مقایسه میکنم، یا فقط میخواهم جعبه روی صفحه بکشم؟»
عادتهای دسترسی برای شبکه
th واقعی را بر متن td پررنگ که فقط ظاهراً سرستون است ترجیح دهید. یک caption روشن (یا سرفصل نزدیک) قبل از ورود به شبکه میگوید موضوع چیست. تعداد سلول ردیف را همتراز نگه دارید تا ستونها هنگام tab یا swipe صادق بمانند. ویژگیهای پیشرفته مثل scope ارتباط سرستون را در جدول پیچیده بهتر میکنند — اول شکاف پایهٔ th/td را محکم یاد بگیرید، بعد ظریفکاری کنید. هرگز فقط به رنگ برای علامتزدن برچسبها تکیه نکنید.
تمرین در ویرایشگر
- یک
tableبا دو سلول سرستون (th) در ردیف اول بسازید. - سه ردیف داده با تعداد
tdهمخوان اضافه کنید. - در مرورگر ببینید و تأیید کنید شبکه چپبهراست و بالابهپایین همانطور که انتظار دارید خوانده میشود.
- اختیاری: یک
captionاضافه کنید و ستون اول را مثل نمونهٔ دوم بهthبرچسب ردیف تبدیل کنید. - عمداً یک ردیف را با سلول کم خراب کنید، شکل عجیب را ببینید، سپس درست کنید.
- یک جمله بالای جدول یا داخل caption بنویسید که داده چه چیزی را میسنجد.
- از همکلاسی بپرسید کدام ستون کدام است — فقط با سرستونهای شما؛ اگر اشتباه حدس زد، متن
thرا عوض کنید.
اشتباهات آسان
- ساختن کل وبسایت بهصورت جدول تو در تو غولآسا (عادت layout قدیمی)
- استفاده فقط از
tdوقتی سلولها واقعاً سرستوناند - تعداد ناهماهنگ سلول در هر ردیف
- استفاده از جدول جایی که یک
ul/olساده فهرست تکمحور را بهتر بیان میکند - رها کردن جدول بدون عنوان خوانا برای انسان (caption یا سرفصل)
- کپی snippetهای باستانی «layout table» در صفحات تمرین مدرن
جای این درس بعد از فهرستها
فهرستها مجموعههای یکبعدی را سازمان میدهند. جدولها شبکهها را. بهزودی حاشیه و فاصله را استایل میکنید؛ این درس اسکلت را قفل میکند: table، tr، th و td با سرستون صادق. داده را جدولی نگه دارید، layout را جای دیگر، و کار CSS بعدی ساختاری را تزیین میکند که از قبل معنا دارد.
خلاصه
- جدولها از
table+tr+th/tdاستفاده میکنند - برای شبکهٔ دادهٔ جدولی، نه layout مدرن کل صفحه
thرا برای برچسب سرستون ترجیح دهید (ستونها و در صورت مفید بودن، ردیفها)captionبه نامگذاری مجموعهٔ داده کمک میکند- تعداد سلول را در ردیفها یکسان نگه دارید
- فهرستها برای مجموعهها و گامهای ساده بدون محور دوم بهتر میمانند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود