امروز میخواهم یکی دیگر از تگ های پرکاربرد html را معرفی کنم. تگ <table> یا جدول ؛ برای ایجاد جدول در صفحات اچ تی ام ال به کار میره!

بجای استفاده از صفت های مانند border در تگ جدول بهتر هست از css استفاده کنید.آموزش css و صفت های مربوط به تگ <table>.

برای افزودن سطر به جدول خود در صفحه html از تگ <tr> که مخفف کلمه ی table row میباشد استفاده میکنیم ، برای افزودن محتوا در سطر جدول از تگ <td> استفاده میکنیم که مخفف کلمه table data هست.

ساختار تگ <table> 

<table>
<thead>
<tr>
<th> مهارت های من</th>
</tr>
</thead>
<tbody>
<tr>
<td>html5</td>
<td>css3</td>
</tr>
</tbody>
</table>

خروجی کد

مهارت های من
html5 css3

افزودن عکس و لینک در جدول

<table>
<tr>
<td>image in table</td>
<td>link in table</td>
</tr>
<tr>
<td><img src="imge.jpg" alt="image" ></td>
<td><a href="http://1coder.blog.ir" title="1coder blog">html tuts</a></td>
</tr>
</table>

خروجی

عکس در جدول لینک در جدول
ax HTML TUTS

ایجاد لیست در جدول

<table>
<tr>
<td>order list</td>
<td>unorder list</td>
</tr>
<tr>
<td>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</td>
<td>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</td>
</tr>
</table>

خروجی

order list unorder list
  1. list item
  2. list item
  3. list item
  • list item
  • list item
  • list item