index   E-mail to me   Google

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 (&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 را موردی تعيين کنيد.

    • تگهای جداول

    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

    		 تعريف عنوان جدول
     

        

     

    		 

    Top page

    Backup_ID.htm Best_Google_Search.htm Chat_Rome_Full.htm Firewall1.htm Firewall2.htm Help_Google_For_You.htm Html.htm* Metateg.htm Page_Rank_In_Google.htm Ranking_Internet.htm Search.htm Service_Google.htm Technical_Search.htm Web_Log_1&2.htm Web_Log_3&4.htm Web_Log_5&6.htm Buy_Computer.htm Buy_Mobail.htm Buy_Printers.htm Corner_Timer.htm Dictionary_Computer.htm Media_Pic.htm NTFS.htm Partition_Magic1.htm Partition_Magic2.htm Short_Key_IE.htm Short_Key_Win_Xp.htm Short_Key_Winamp.htm Show_Desktop.htm Sound_Card.htm System_Restore.htm Technologist_Win_XP.htm Introduction.htm Web_HTML.htm Elements.htm Tags.htm Farsi.htm Formatting.htm Characters.htm Links.htm Tables.htm Frames.htm** Lists.htm Forms.htm Images.htm Background.htm Fonts.htm Style_Sheet.htm Ex_Frames_1.htm Ex_Frames_2.htm