جدول ها در HTML
یکی از موضوعات مهم در HTML ساخت جدول می باشد.
ساخت جدول در HTML با تگ table امکان پذیر است.
<table>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>pooya</td>
<td>13</td>
</tr>
<tr>
<td>ali</td>
<td>24</td>
</tr>
<tr>
<td>mohammad</td>
<td>19</td>
</tr>
</table>تگ tr در HTML
با استفاده از تگ tr، می توانیم برای جدول سطر یا ردیف ایجاد کنیم.
نکته: tr مخفف کلمه table row به معنی سطر جدول است.
نکته: تگ <tr> در داخل تگ <table> قرار می گیرد.
در نمونه کد بالا 4 بار از المان tr استفاده شده است. همانطور که در آزمایشگاه مشاهده می کنید، جدول دارای 4 سطر می باشد.
برای اطلاعات بیشتر به صفحه تگ tr مرجعه کنید.
تگ td در HTML
برای نشان دادن داده ها (اطلاعات) در جدول از تگ td استفاده می کنیم.
نکته: td مخفف کلمه table data به معنی داده جدول است.
نکته: تگ <td> در داخل تگ <tr> قرار می گیرد.
<table>
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>pooya</td>
<td>13</td>
</tr>
<tr>
<td>ali</td>
<td>24</td>
</tr>
<tr>
<td>mohammad</td>
<td>19</td>
</tr>
</table>نکته: تگ td علاوه بر افزودن اطلاعات به جدول، تعداد ستون های هر سطر را نیز مشخص می کند.
برای اطلاعات بیشتر به صفحه تگ td مراجعه کنید.
تگ th در HTML
با استفاده از تگ th، می توانیم برای جدول عنوان ایجاد کنیم.
نکته: th مخفف کلمه table header به معنی عنوان جدول است.
نکته: تگ <th> در داخل تگ <tr> قرار می گیرد.
<table>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>pooya</td>
<td>13</td>
</tr>
<tr>
<td>ali</td>
<td>24</td>
</tr>
<tr>
<td>mohammad</td>
<td>19</td>
</tr>
</table>نکته: تگ th علاوه بر افزودن اطلاعات به جدول، تعداد ستون های سطر را نیز مشخص می کند.
برای اطلاعات بیشتر به صفحه تگ th مرجعه نمائید.
مقایسه تگ های 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>
احسان اسلامی
