جداول ( Tables)

در اين درس با المان جدول ( 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 (&nbsp;) يا همان نويسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زير نمايش خواهد داد:

    کد اچتمل جدولی با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر
    <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 تعريف عنوان جدول