جدول در اچ تی ام ال

امروز میخواهم یکی دیگر از تگ های پرکاربرد 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>

خروجی

عکس در جدول	لینک در جدول
	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
list item list item list item	list item list item list item