آموزش ساختن جدول در طراحی صفحه با HTML

آیا شما می خواهید یک جدول (table) در صفحه خود ایجاد کنید؟ برای ایجاد یک جدول باید از این تگ استفاده کنید:

<table>
........محتویات جدول.......
</table>

برای ایجاد یک جدول باید تگ ابتدایی آن یعنی <table> را در جایی که می خواهید جدول وارد شود، قرار دهید. و در پایان جدول هم از تگ پایانی آن یعنی <table/> استفاده کنید.
برای افزودن محتویات به جدول باید از تگ <td> استفاده کنید. نام این تگ مخفف table data است. محتویات جدول چیزهایی هستند که شما بعد از این تگ قرار می دهید. در پایان هم باید پس از محتویات جدول از تگ پایانی <td/>قبل از تگ پایانی جدول استفاده کنید. مانند زیر:

<table>
<td>
........محتویات جدول......
</td>
</table>

جدول به دست آمده مانند زیر به نظر می رسد:

........محتویات جدول......

البته این یک جدول ساده است و شاید در ظاهر زیاد تفاوتی با یک نوشته ساده نداشته باشد.

می توانیم برای جدول کادر (border)  هم تعریف کنیم. برای این کار باید شناسه مربوطه را در تگ جدول قرار دهیم. مانند زیر:

<table border="3">
<td>
........محتویات جدول......
</td>
</table>

حالا جدول ما کمی مشخص تر شد، به آن نگاه کنید:

........محتویات جدول......

شما می توانید ضخامت کادر جدول را به دلخواه خود تغییر دهید. برای این کار فقط کافی است تا عددی را که به عنوان مقدار شناسه border به کار بردیم، تغییر دهید. اگر مقدار این عدد را صفر قرار دهید کادر دیده نخواهد شد.

تا اینجا هر چه گفتیم درباره جدولی با یک سلول بود. برای اینکه جدولی با تعداد بیشتری سلول داشته باشیم، مثلاً بخواهیم یک سلول دیگر در همان خط ایجاد کنیم، باید دوباره از تگ td استفاده کنیم. مانند زیر:

<table border="3">
<td>
سلول اول
</td>
<td>
سلول دوم
</td>
</table>

می توانید سلولهای ایجاد شده را در اینجا مشاهده کنید:

سلول اول

سلول دوم

حالا فرض کنید می خواهیم به خط بعدی یا به اصطلاح به ردیف بعدی برویم. برای این کار باید از تگ tr استفاده کنیم. این تگ با <tr> شروع و با <tr/> پایان می پذیرد. مانند زیر:
 

<table border="3">
<td>
سطر اول و سلول اول
</td>
<td>
سطر اول و سلول دوم
</td>
<tr>
<td>
سطر دوم و سلول اول
</td>
<td>
سطر دوم و سلول دوم
</td>
</tr>
</table>

نتیجه به این صورت مشاهده می شود:
 

سطر اول و سلول اول	سطر اول و سلول دوم
سطر دوم و سلول اول	سطر دوم و سلول دوم

شما می توانید بنا به نیاز خود فرمانهایی را به تگ جدول اضافه کنید. در اینجا برخی از این فرمانها آورده شده است:

• cellspacing : 
  برای ایجاد فاصله بین سلولها عدد مورد نظر خود را در این فرمان وارد کنید.

  ---

• cellpadding : 
  از این فرمان برای افزودن فضا به داخل یک سلول استفاده کنید. مقدار فضای مورد نظر خود را در این فرمان وارد کنید.

فرض کنید می خواهیم در مثال قبل بین سلولها یک فاصله به اندازه 10 ایجاد کنیم. تگ جدول را مطابق زیر تغییر می دهیم:

<table border="3" cellspacing="10">

جدول به دست آمده به شکل زیر خواهد بود:

سطر اول و سلول اول	سطر اول و سلول دوم
سطر دوم و سلول اول	سطر دوم و سلول دوم

حالا فرض کنید می خواهیم یک فاصله به اندازه 10 را به داخل سلولهای جدول مثال قبل اضافه کنیم. تگ جدول را به این صورت تغییر می دهیم:

<table border="3" cellpadding="10">

جدول به دست آمده به صورت زیر خواهد بود:

سطر اول و سلول اول	سطر اول و سلول دوم
سطر دوم و سلول اول	سطر دوم و سلول دوم

حالا می خواهیم هر دو مثال قبل را با هم امتحان کنیم، یعنی تگ جدول را مطابق زیر تغییر دهیم:

<table border="3" cellspacing="10" cellpadding="10">

نتیجه را ملاحظه کنید:

سطر اول و سلول اول	سطر اول و سلول دوم
سطر دوم و سلول اول	سطر دوم و سلول دوم

شما می توانید هر چیزی را که بخواهید داخل سلولها وارد کنید. مانند عکس، لینک، پاراگراف و...
برای این کار فقط کد مورد نظر خود را بین تگ <td> و <td/> وارد کنید. برای مثال فرض کنید می خواهیم یک لینک در جدول ایجاد کنیم. مانند زیر عمل می کنیم:

<table border="2">
<td>
<a href="../javascript/index.html">آموزش جاوا اسکرپت</a>
</td>
</table>

این هم جدولی که بیننده نهایی در صفحه مشاهده می کند:

آموزش جاوا اسکرپت

برای وارد کردن عکس نیز می توانیم به این صورت عمل کنیم:

<table border="2">
<td>
<img src="learn_html.gif">
</td>
</table>