جداول HTML : رنگ زمینه، نحوه قرارگیری افقی و عمودی ...

اگر بخواهیم عرض یک جدول را تغییر دهیم می توانیم از شناسه width استفاده کنیم. با اضافه کردن این شناسه به تگ جدول می توانیم مقدار عرض جدول را مشخص کنیم. این مقدار می تواند در مقیاس پیکسل باشد یا به صورت درصد. برای تغییر دادن ارتفاع جدول نیز میتوانیم از شناسه height استفاده کنیم. برای مثال اگر بخواهیم یک جدول با عرض 500 پیکسل و ارتفاع 50 پیکسل داشته باشیم می توانم به صورت زیر عمل کنیم:

<table border="3" width="500" height="50">
<td>
محتویات جدول
</td>
</table>

در اینجا می بینید که برخلاف متن درون جدول که متن کوتاهی است عرض جدول نسبتاً زیاد است (همان 500 پیکسلی که برای آن تعریف کردیم):

محتویات جدول

اگر بخواهیم نحوه قرار گرفتن محتویات درون جدول را تعیین کنیم می توانیم از شناسه های زیر را در تگ <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> در ردیف اول از شناسه "3"=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>

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

صورتی این ردیف صورتی است
خاکستری این ردیف خاکستری است

نظرات بازدید کنندگان
Fri, 01 May 2009 14:39:13 +0430 نویسنده : فرهاد
لطفآ بگویید که چطور میتوان یک جدول را در بعد از درست کردنش ثغییر داد
 
Thu, 23 Apr 2009 17:14:45 +0430 نویسنده : ali
merc , matalebetun alie.
 
Fri, 13 Mar 2009 00:10:46 +0330 نویسنده : بهمن
علی یارت رفیق !
 
Tue, 10 Mar 2009 16:37:06 +0330 نویسنده : فاطمه
سلام آقا خيلي  با حالي. تو اين دوره زمونه كه هر كس به فكر خودشه وجد آدمهايي مثل شما معجزه است . برات آرزو مي كنم هميشه موفق باشي !!!!!!!!!!!!!!!!!!!!!
 
Sat, 28 Jun 2008 23:43:35 +0430 نویسنده : rokhy
مرسیییییییییییییییی
یه عالمه
مرسیییییییییییییییی
 
Fri, 07 Mar 2008 00:44:15 +0330 نویسنده : روشن
سلام
مرسی از اطلاعاتی که دادید
فوق العاده بود
کاش همه بتونن مسله را ساده اما کامل  بیان کنند
باز  هم مرسی
 
ساعت: 20:50 - تاریخ: 16 دی 1386 نویسنده : مسعود
سلام.ممنون.خوب بود.خیلی کمکم کردین.اگه دوست داشتین به وبلاگ من هم یه سر بزنین.من به دنبال مطالبی بیشتر در مورد پردازش تصویر و هوش مصنوعی هستم.خوشحال میشم باحاتون بیشتر آشنا بشم.
 
ساعت: 14:51 - تاریخ: 1386 نویسنده : علی
عالی بود راستش من چند کتاب رو خونده بودم و واقعا چیزی نگرفتم ولی الان فهمیدم
ممنون