اگر بخواهیم عرض یک جدول را تغییر دهیم می توانیم از شناسه width استفاده کنیم. با اضافه کردن این شناسه به تگ جدول می توانیم
مقدار عرض جدول را مشخص کنیم. این مقدار می تواند در مقیاس پیکسل باشد یا به صورت درصد.
برای تغییر دادن ارتفاع جدول نیز میتوانیم از شناسه height استفاده کنیم. برای مثال اگر بخواهیم یک جدول با عرض ۵۰۰ پیکسل و ارتفاع ۵۰
پیکسل داشته باشیم می توانم به صورت زیر عمل کنیم:
<table border=”3″ width=”500″
height=”50″>
<td>
محتویات جدول
</td>
</table>
در اینجا می بینید که برخلاف متن درون جدول که متن کوتاهی است عرض جدول نسبتاً زیاد
است (همان ۵۰۰ پیکسلی که برای آن تعریف کردیم):
اگر بخواهیم عرض یک جدول را تغییر دهیم می توانیم از شناسه width استفاده کنیم. با اضافه کردن این شناسه به تگ جدول می توانیم
مقدار عرض جدول را مشخص کنیم. این مقدار می تواند در مقیاس پیکسل باشد یا به صورت درصد.
برای تغییر دادن ارتفاع جدول نیز میتوانیم از شناسه height استفاده کنیم. برای مثال اگر بخواهیم یک جدول با عرض ۵۰۰ پیکسل و ارتفاع ۵۰
پیکسل داشته باشیم می توانم به صورت زیر عمل کنیم:
<table border=”3″ width=”500″
height=”50″>
<td>
محتویات جدول
</td>
</table>
در اینجا می بینید که برخلاف متن درون جدول که متن کوتاهی است عرض جدول نسبتاً زیاد
است (همان ۵۰۰ پیکسلی که برای آن تعریف کردیم):
اگر بخواهیم نحوه قرار گرفتن محتویات درون جدول را تعیین کنیم می توانیم از شناسه
های زیر را در تگ <td> استفاده کنیم:
- “align=”left :
این شناسه محتویات جدول شما را در سمت چپ آن قرار می دهد.
- “align=”right :
با این شناسه می توانید محتویات جدول را به صورت راست چین نمایش دهید.
- “align=”center :
با این شناسه می توانید محتویات جدول را متمایل به مرکز جدول قرار دهید.
حالا این شناسه ها را در یک جدول به کار می بریم:
<table width=”600″ border=”3″>
<td align=”left”>
متمایل به چپ
</td>
<td align=”center”>
متمایل به مرکز
</td>
<td align=”right”>
متمایل به راست
</td>
</table>
می توانید نحوه قرارگیری محتویات سلولها را در جدول زیر ملاحظه کنید:
| متمایل به چپ |
متمایل به مرکز |
متمایل به راست |
اگر بخواهیم نحوه قرارگیری محتویات سلولها را به صورت عمودی تنظیم کنیم، می توانیم
از شناسه valign استفاده کنیم:
- “valign=”top :
با این شناسه محتویات سلول در بالای آن قرار می گیرند.
- “valign=”middle :
به وسیله این شناسه محتویات سلول در وسط آن به نمایش در می آیند.
- “valign=”bottom :
با این شناسه محتویات سلول در پایین آن نمایش داده می شوند.
در مثال زیر می توانید نحوه استفاده از شناسه های بالا در یک جدول را ببینید:
<table width=”600″ height=”100″
border=”3″>
<td align=”center” valign=”top”>
متمایل به بالا
</td>
<td align=”center” valign=”middle”>
متمایل به وسط
</td>
<td align=”center” valign=”bottom”>
متمایل به پایین
</td>
</table>
این هم جدول نهایی:
| متمایل به بالا |
متمایل به وسط |
متمایل به پایین |
نحوه قرارگیری عمودی محتویات سلولها زمانی مفید خواهد بود که تعداد سطرهای محتویات
سلولهای مختلف در یک ردیف جدول با هم برابر نباشند. در حقیقت زمانی که همه سلولها دارای
یک تعداد سطر باشند و نحوه قرار گیری عمودی محتویات آنها به یک صورت است.
شناسه های دیگری نیز وجود دارد که می توانیم در تگ td
استفاده کنیم:
- rowspan :
این شناسه مشخص کننده این است که ارتفاع سلول معادل چند سلول است
- colspan :
این شناسه مشخص کننده اندازه افقی یک سلول بر اساس تعداد سلول است.
به یک مثال توجه کنید:
<table border=”2″>
<td align=”center”>
سلول اول
</td>
<td rowspan=”2″ align=”center”>
<img src=”learn_html.gif”>
</td>
<tr>
<td align=”center”>
سلول دوم
</td>
</tr>
</table>
این هم جدول به دست آمده. همانطور که می بینید سلولی که محتوی عکس است در کنار دو
سلول دیگر قرار گرفته است نه در قسمت بالای سلول دوم:
| سلول اول |
 |
| سلول دوم |
حال فرض کنید می خواهیم یک جدول مانند زیر داشته باشیم:
| سلول اول |
| سلول دوم |
سلول سوم |
سلول چهارم |
برای ایجاد این جدول در تگ <td> در ردیف اول از شناسه
“۳”=colspan استفاده می کنیم. با این کار سلول موجود در
ردیف اول به اندازه سه سلول در عرض کشیده می شود.
در اینجا می توانید کد مربوط به این جدول را ببینید:
<table border=”1″>
<tr>
<td align=”center” colspan=”3″>
<b>سلول اول</b>
</td>
</tr>
<tr>
<td align=”center”>
سلول دوم
</td>
<td align=”center”>
سلول سوم
</td>
<td align=”center”>
سلول چهارم
</td>
</tr>
</table>
شما می توانید در صورت تمایل رنگ زمینه جدول، سطر، ستون یا هر سلول را در
جدول که بخواهید تغییر دهید.
برای تعیین کردن رنگ زمینه برای جدول باید این شناسه bgcolor را در تگ جدول به کار ببرید و رنگ مورد نظر خود را در این شناسه به کار
ببرید.
برای مثال اگر بخواهیم جدولی با زمینه زرد ایجاد کنیم، می توانیم به این صورت عمل
کنیم:
<table border=”3″ bgcolor=”yellow”>
<td>
محتویات جدول
</td>
</table>
جدول زیر به دست می آید:
قابل ذکر است که اگر به جای تگ ابتدایی جدول از تگ زیر نیز استفاده کنیم همان نتیجه
را به دست می آوریم:
<table border=”3″ bgcolor=”#ffff00″>
اگر بخواهیم هر سلول رنگ زمینه مربوط به خودش را داشته باشد باید شناسه مربوط به
رنگ زمینه را به تگ <td> اضافه
کنیم. برای نمونه به جدول زیر توجه کنید:
| محتویات سلول اول |
محتویات سلول دوم |
آیا می خواهید کد مربوط به این جدول را ببینید:
<table border=”3″>
<td bgcolor=”yellow”>
محتویات سلول اول
</td>
<td bgcolor=”green”>
محتویات سلول دوم
</td>
</table>
در آخر می خواهیم رنگ زمینه هر ردیف را تغییر دهیم. برای این کار شناسه مربوط به
رنگ زمینه را در تگ <tr> قرار می دهیم:
<table border=”3″ width=”300″>
<tr bgcolor=”pink”>
<td>صورتی</td>
<td>این ردیف صورتی است</td>
<tr bgcolor=”gray”>
<td>خاکستری</td>
<td>این ردیف خاکستری است</td>
</table>
این هم جدول به دست آمده:
| صورتی |
این ردیف صورتی است |
| خاکستری |
این ردیف خاکستری است |
