آموزش HTML جلسه نهم: جداول (Tables)

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

جدولها

برای تعریف جداول از تگ <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 را موردی تعیین کنید.

--------------------------------------------------------------------------------

تگهای جداول

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	تعریف عنوان جدول

منبع: Khaterat.com