جدولها در HTML یکی از بهترین ابزارها برای نمایش دادههای ساختاریافته هستند. وقتی اطلاعاتی مثل نام کالا، قیمت، تعداد یا محل قرارگیری در فروشگاه داریم، استفاده از لیست ساده کافی نیست. در این مقاله یاد میگیریم چطور یک جدول حرفهای بسازیم و آن را استاندارد کنیم.
🧱 شروع ساخت جدول
- عنصر اصلی جدول با
<table>ساخته میشود. - هر ردیف با
<tr>(table row) تعریف میشود. - دادههای هر ستون با
<td>(table data) قرار میگیرند.
نمونه کد:
<table>
<tr>
<td>نان</td>
<td>راهروی ۲</td>
<td>۳ دلار</td>
<td>۱ عدد</td>
</tr>
</table>
📧 افزودن آیتمهای جدید
برای هر آیتم جدید، یک ردیف تازه میسازیم:
<tr>
<td>شیر</td>
<td>راهروی ۱</td>
<td>۲.۵۰ دلار</td>
<td>۲ بسته کوچک</td>
</tr>
به این ترتیب، جدول ما گسترش پیدا میکند و هر کالا اطلاعات خودش را در یک ردیف دارد.
🔖 اضافه کردن عنوان ستونها
برای مشخص کردن معنای دادهها، باید ردیف اول جدول را با <th> (table header) بسازیم:
<tr>
<th>نام کالا</th>
<th>راهرو</th>
<th>قیمت</th>
<th>تعداد</th>
</tr>
این کار باعث میشود جدول خواناتر و حرفهایتر شود.
🎯 استانداردسازی با بخشهای ساختاری
برای سازماندهی بهتر جدول، از سه بخش اصلی استفاده میکنیم:
<thead>برای عنوانها<tbody>برای دادههای اصلی<tfoot>برای جمعبندی یا اطلاعات پایانی
نمونه کد کامل:
<table>
<thead>
<tr>
<th>نام کالا</th>
<th>راهرو</th>
<th>قیمت</th>
<th>تعداد</th>
</tr>
</thead>
<tbody>
<tr>
<td>نان</td>
<td>۲</td>
<td>۳ دلار</td>
<td>۱</td>
</tr>
<tr>
<td>شیر</td>
<td>۱</td>
<td>۲.۵۰ دلار</td>
<td>۲</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>جمع کل</td>
<td>ندارد</td>
<td>۵.۵۰ دلار</td>
<td>ندارد</td>
</tr>
</tfoot>
</table>
📌 چرا از <thead>, <tbody>, <tfoot> استفاده کنیم؟
- کد معنادارتر و استانداردتر میشود.
- در زمان استایلدهی با CSS، میتوانیم بخشهای مختلف جدول را جداگانه هدف قرار دهیم.
📚 جمعبندی
- جدول با
<table>ساخته میشود. - هر ردیف با
<tr>و هر داده با<td>تعریف میشود. - عنوانها با
<th>مشخص میشوند. - برای ساختار حرفهایتر از
<thead>,<tbody>,<tfoot>استفاده میکنیم.