برترین مقالات کامپیوتر

HTML

در این درس با المان جدول ( Table ) ، سلولها یا خانه ها، مرز و border در جداول و تگ های مربوطه مخصوصا تگهای TABLE ، TD , TR آشنا خواهید شد. توجه داشته باشید که جداول یکی از مهمترین المانهای آرایش و layout میباشند.

مثالها:

جداول، آرایه ها
مثال ساده ای برای ایجاد جداول

مرز جداول
نقش شناسه border در تعیین مرز جداول

مثالهای بیشتر

جدولها

برای تعریف جداول از تگ <table> استفاده میشود. یک جدول از یک یا چند سطر که با کمک تگ <tr> تعریف میشوند، تشکیل میشود. هر ردیف یا row از یک یا چند سلول، خانه یا cell تشکیل گردیده که با کمک تگ <td> ایجاد میشوند. نام های td و tr به ترتیب خلاصه شده table row و table data میباشند.
محتوی یک سلول میتواند متن، تصویر، فهرستها، جداول دیگر، پاراگرافها و ... باشد.

مثال زیر جدولی است با دو سطر و سه ستون :

کد اچتمل جدولی با دو سطر و سه ستون

نمایش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<td>ردیف 1، سلول 1</td>
<td>ردیف 1، سلول 2</td>
<td>ردیف 1، سلول 3</td>
</tr>
<tr>
<td>ردیف 2، سلول 1</td>
<td>ردیف 2، سلول 2</td>
<td>ردیف 2، سلول 3</td>
</tr>
</table>

ردیف 1، سلول 1	ردیف 1، سلول 2	ردیف 1، سلول 3
ردیف 2، سلول 1	ردیف 2، سلول 2	ردیف 2، سلول 3

جدولها و شناسه border و dir :

در مثال بالا شناسه border مرز جدول را مشخص میکند، مقدار 1 مرزی با ضخامت یک پیکسل را نمایش خواهد داد و مقدار صفر جدول را بدون مرز نمایش خواهد داد. توجه داشته باشید که حالت پیش فرض یعنی جدولی بدون شناسه border ، جداول بدون مرز را نمایش خواهد داد.

در مثال بالا شناسه dir یا direction و مقدار rtl برای آن، سبب تعیین نمایش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعریف شده است به تمامی سلولهای جدول اعمال خواهذ شد.

ساده ترین جدول ممکن در اچتمل، جدولی است با یک سطر و یک ستون!

سرستون در جداول (Headings)

سرستونها در جداول با کمک تگ <th> تعریف میشوند. مثال زیر نحوه تعریف سرستونها را در جداول نمایش میدهد:

کد اچتمل جدولی با سه سطر و سه ستون

نمایش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<th>سرستون ا</th>
<th>سرستون 2</th>
<th>سرستون 3</th>
</tr>
<tr>
<td>ردیف 1، سلول 1</td>
<td>ردیف 1، سلول 2</td>
<td>ردیف 1، سلول 3</td>
</tr>
<tr>
<td>ردیف 2، سلول 1</td>
<td>ردیف 2، سلول 2</td>
<td>ردیف 2، سلول 3</td>
</tr>
</table>

سرستون ا	سرستون 2	سرستون 3
ردیف 1، سلول 1	ردیف 1، سلول 2	ردیف 1، سلول 3
ردیف 2، سلول 1	ردیف 2، سلول 2	ردیف 2، سلول 3

همانطوریکه مشاهده میکنید سر ستونها مانند سلولهای معمولی جداول تعریف میشوند و فقط به جای td از th استفاده شده و لی در نمایش محتوای سر ستونها bold یا توپر نمایش داده خواهند شد.

خانه های خالی در جداول (Empty Cells)

اگر محتوای خانه ای از یک جدول خالی باشد چه چیزی باید نمایش داده شود؟ بسته به مرورگری که استفاده میکنید نتیجه نمایش متفاوت است و مثلا در مثال زیر خانه خالی جدول بدون مرز نمایش داده خواهد شد:

کد اچتمل جدولی با دو سطر و دو ستون

نمایش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<td>ردیف 1، سلول 1</td>
<td>ردیف 1، سلول 2</td>
</tr>
<tr>
<td>ردیف 2، سلول 1</td>
<td></td>
</tr>
</table>

ردیف 1، سلول 1	ردیف 1، سلول 2
ردیف 2، سلول 1

در اینگونه موارد برای رفع مشکل کافی است که از non-breaking space ( ) یا همان نویسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زیر نمایش خواهد داد:

کد اچتمل جدولی با دو سطر و دو ستون

نمایش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<td>ردیف 1، سلول 1</td>
<td>ردیف 1، سلول 2</td>
</tr>
<tr>
<td>ردیف 2، سلول 1</td>
<td>&nbsp;</td>
</tr>
</table>

ردیف 1، سلول 1	ردیف 1، سلول 2
ردیف 2، سلول 1

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

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

در جداول، ردیفها، خانه ها و سر ستونها از تعداد زیادی از شناسه ها میتوانید استفاده کنید که شرح همگی آنها از حوصله این دوره مقدماتی خارج است و توصیه میشود که از مثالهای زیر و جدول واقع در انتهای این صفحه برای مطالعه هر چه بیشتر در مورد جزئیات شناسه ها استفاده شود.

شناسه dir قابل استفاده در بسیاری از تگها ( مثلا table ، tr ، td ، th ) میباشد. با کمک شناسه dir و مقدار rtl برای آن، جهت نمایش متون فارسی از "راست به چپ" تعیین میگردد. توجه داشته باشید که مقدار شناسه dir به صورت موروثی از table به tr و th و از tr و th به td خواهد رسید.مثلا برای تعیین مقدار rtl برای تمامی خانه های یک جدول کافی است که فقط شناسه مزبور را در تگ table قید کنید و نیازی به قید آن در تمامی خانه های جدول نیست. البته میتوانید که در مورد یک ردیف خاص و یا یک خانه خاص شناسه dir را موردی تعیین کنید.

مثالهای بیشتر

مرز در جداول
این مثال کاربرد شناسه border را در نمایش جداول نشان میدهد.

تعیین جهت نمایش متن در خانه های یک جدول
این مثال کاربرد شناسه dir است در تعیین جهت نمایش متن در خانه های یک جدول.

عنوان جداول و تگ caption
مثالی در مورد تگ caption در تعریف جداول

توسعه سطری یا ستونی در جداول
مثالی در مورد شناسه های colspan و rowspan در جداول

جدولی با محتویات مختلف
محتوی یک خانه جدول تقریبا میتواند هر عنصر اچتملی باشد.

فاصله گذاری بین خانه های جداول
این مثال نحوه ایجاد فاصله بین خانه های جدول را نشان میدهد.(cellspacing)

لایه گذاری خانه های جدول
این مثال نحوه ایجاد فاصله خالی بین خانه های جدول و مرز آنها را نشان میدهد.(cellpadding)

تعیین رنگ زمینه یا تصویر زمینه کل یک جدول
تعیین رنگ زمینه یا تصویر زمینه سراسری جداول با کمک شناسه های bgcolor و background

تعیین رنگ زمینه یا تصویر زمینه یک یا چند خانه از جدول
تعیین رنگ زمینه یا تصویر زمینه در خانه های جداول با کمک شناسه های bgcolor و background

تراز بندی محتوا در خانه های جداول
این مثال نحوه ترازبندی محتوای خانه های جداول با کمک شناسه "align" را نشان میدهد.

شناسه frame در جداول
مثالی در مورد کاربرد شناسه "frame" در المان table جهت تعیین شکل مرز جداول.

تراز بندی محتوا در خانه های جداول
این مثال نحوه ترازبندی محتوای خانه های جداول با کمک شناسه "align" و "valign" را نشان میدهد.

تگهای جداول

Start Tag	Purpose	کاربرد
<table>	Defines a table	تعریف جدول

<th>	Defines a table header	تعریف سرستون در جداول

<tr>	Defines a table row	تعریف ردیف ها در جداول

<td>	Defines a table cell	تعریف سلول یا خانه های یک جدول

<caption>	Defines a table caption	تعریف عنوان جدول