تگ table در HTML
با تگ table در HTML می توانیم جدول بسازیم.
<table>
<tr>
<th>#</th>
<th>نام</th>
<th>سن</th>
</tr>
<tr>
<td>1</td>
<td>احسان</td>
<td>31</td>
</tr>
<tr>
<td>2</td>
<td>علی</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>محمد</td>
<td>19</td>
</tr>
</table>تگ tr در HTML
با استفاده از تگ tr، می توانیم برای جدول، سطر یا ردیف ایجاد کنیم.
در نمونه کد بالا 4 بار از المان tr استفاده شده است. همانطور که در آزمایشگاه مشاهده می کنید، جدول دارای 4 سطر می باشد.
نکته: tr مخفف کلمه table row به معنی سطر جدول است.
نکته: تگ <tr> در داخل تگ <table> قرار می گیرد.
تگ th در HTML
با استفاده از تگ th، می توانیم در جدول عنوان ایجاد کنیم. تگ th معمولا به صورت درشت و وسط چین است.
نکته: تگ th علاوه بر افزودن اطلاعات به جدول، تعداد ستون های جدول را نیز مشخص می کند.
<table>
<tr>
<th>#</th>
<th>نام</th>
<th>سن</th>
</tr>
<tr>
<td>1</td>
<td>احسان</td>
<td>31</td>
</tr>
</table>نکته: th مخفف کلمه table header به معنی عنوان جدول است.
نکته: تگ <th> در داخل تگ <tr> قرار می گیرد.
تگ td در HTML
با استفاده از تگ td، می توانیم در جدول، اطلاعات را اضافه کنیم.
نکته: تگ td علاوه بر افزودن اطلاعات به جدول، تعداد ستون های جدول را نیز مشخص می کند.
<table>
<tr>
<td>1</td>
<td>احسان</td>
<td>31</td>
</tr>
<tr>
<td>2</td>
<td>علی</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>محمد</td>
<td>19</td>
</tr>
</table>نکته: td مخفف کلمه table data به معنی داده جدول است.
نکته: تگ <td> در داخل تگ <tr> قرار می گیرد.
مقایسه تگ های th و td
- تگ th، درشت تر از تگ td است.
- تگ th، وسط چین است.
نکته: برای زیبا کردن جدول ها به آموزش جدول در CSS مراجعه کنید.
خلاصه درس
- در این بخش با ساختار جدول در HTML آشنا شدیم.
- و به بررسی تگ های tr، td، th پرداختیم.
تمرین
جدول زیر را کامل کنید.
< >
<th>name</th>
<th>name
</tr>
<tr>
pooya
<td> 19
</tr>
<tr>
<td>mohammad < >
<td>18</td>
</tr>
</table>
احسان اسلامی
