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

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

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

نظرات۰

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی