جداول در HTML
در HTML، برای ایجاد جداول از تگ‌های خاصی استفاده می‌شود. یک جدول معمولاً شامل ردیف‌ها، سلول‌ها و هدرها است. در زیر، نحوه استفاده از این تگ‌ها را توضیح می‌دهم:
- ساختار کلی جدول:
- table: برای تعریف جدول.
- tr: برای تعریف هر ردیف (Row).
- th: برای تعریف سلول‌های هدر (Header).
- td: برای تعریف سلول‌های داده (Data).
مثال ساده:
<table border="1">
<tr>
<th>نام</th>
<th>سن</th>
<th>شهر</th>
</tr>
<tr>
<td>علی</td>
<td>25</td>
<td>تهران</td>
</tr>
<tr>
<td>سارا</td>
<td>30</td>
<td>شیراز</td>
</tr>
</table>
<tr>
<th>نام</th>
<th>سن</th>
<th>شهر</th>
</tr>
<tr>
<td>علی</td>
<td>25</td>
<td>تهران</td>
</tr>
<tr>
<td>سارا</td>
<td>30</td>
<td>شیراز</td>
</tr>
</table>
توضیحات:
- در این مثال، از تگ table برای ایجاد جدول استفاده شده است.
- ردیف هدر با استفاده از تگ tr و سلول‌های هدر با th ایجاد شده‌اند.
- سلول‌های داده در ردیف‌های مختلف با استفاده از تگ td تعریف شده‌اند.
- border="1" به جدول مرز (خطوط) می‌دهد.
- ترتیب و گروه‌بندی داده‌ها:
- برای گروه‌بندی ردیف‌ها یا ستون‌ها می‌توان از تگ‌های thead, tbody, و tfoot استفاده کرد.
مثال با گروه‌بندی:
<table border="1">
<thead>
<tr>
<th>نام</th>
<th>سن</th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>علی</td>
<td>25</td>
<td>تهران</td>
</tr>
<tr>
<td>سارا</td>
<td>30</td>
<td>شیراز</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">این پایان جدول است</td>
</tr>
</tfoot>
</table>
<thead>
<tr>
<th>نام</th>
<th>سن</th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>علی</td>
<td>25</td>
<td>تهران</td>
</tr>
<tr>
<td>سارا</td>
<td>30</td>
<td>شیراز</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">این پایان جدول است</td>
</tr>
</tfoot>
</table>
- thead: برای گروه‌بندی بخش هدر.
- tbody: برای گروه‌بندی داده‌های اصلی جدول.
- tfoot: برای گروه‌بندی فوتر جدول (معمولاً برای نتایج یا جمع‌بندی‌ها).
- اتصال سلول‌ها:
- colspan: برای ادغام سلول‌ها در یک ردیف.
- rowspan: برای ادغام سلول‌ها در یک ستون.
مثال از استفاده colspan و rowspan:
<table border="1">
<tr>
<th colspan="2">نام</th>
<th>شهر</th>
</tr>
<tr>
<td rowspan="2">علی</td>
<td>25</td>
<td>تهران</td>
</tr>
<tr>
<td>30</td>
<td>شیراز</td>
</tr>
</table>
<tr>
<th colspan="2">نام</th>
<th>شهر</th>
</tr>
<tr>
<td rowspan="2">علی</td>
<td>25</td>
<td>تهران</td>
</tr>
<tr>
<td>30</td>
<td>شیراز</td>
</tr>
</table>
- در این مثال، در ردیف اول، سلول "نام" با استفاده از "colspan="2 دو ستون را ادغام کرده است.
- در ردیف دوم، سلول "علی" با استفاده از "rowspan="2 دو ردیف را ادغام کرده است.
این‌ها تگ‌های اصلی و امکانات مختلفی هستند که برای ایجاد جداول در HTML می‌توانید استفاده کنید.
