آموزش 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>

 جدولها و شناسه 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>

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

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

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

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

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

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

تگهای جداول
 

فریمها  ( Frames )

با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس با مفاهيم فريم ( Frame ) و تگ های مربوطه مخصوصا تگهای Frame و Frameset آشنا خواهيد شد.

فريمها (Frames)

با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا دريچه، فريم (frame) ناميده شده و فريمها کاملا مستقل از هم ميباشند. محتوای هر فريم هم ميتواند هر صفحه يا وب سايتی باشد. هر چند که فريمها طراحی سايتهای کوچک و متوسط را بسيار آسان ميکنند ولی استفاده از آنها در کارهای حرفه ای توصيه نميشود.(به جز در موارد خاص)

معايب استفاده از فريمها:

• موتورهای جستجو با صفحات طراحی شده با فريمها مشکل دارند.
• چاپ و print صفحاتی که از فريمها استفاده ميکنند مشکل است.
• صفحاتی که از فريمها استفاده ميکنند معمولا مبتدی بودن طراح سايت را نشان ميدهد!!

تگ فريم ست (Frameset)

• تگ <frameset> به تعريف فريمها و تقسيم بندی پنجره مرورگر ميپردازد.
• هر تگ <frameset> مجموعه ای از رديفها يا ستونها را تعريف ميکند.
• داخل هر فريم ميتواند frameset ديگری قرار دهيد.
• با کمک شناسه های rows و cols ابعاد و نسبت هر فريم تعيين ميگردد.
• تگ <frameset> درون تگهای <html> و <html/> قرار ميگيرد.(نيازی به قيد تگ body هنگام معرفی يک frameset نيست.)

تگ فريم (Frame)

• کاربرد اصلی تگ <frame> تعيين source يا نام صفحه ای است که بايد در فريم ها نمايش داده شود.

مثال زير مجموعه ای از فريمها را که شامل دو فريم عمودی ميباشند معرفی ميکند. از سمت چپ فريم اول 75 درصد و فريم دوم 25 درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه تعريف محتويات هر فريم، درون فريم اول فايل "frame_left.html" و درون فريم دوم فايل "frame_right.html" نمايش داده خواهد شد.

<html>

<frameset cols="75%,25%">

   <frame src="frame_left.html">

   <frame src="frame_right.html">

</frameset>

</html>

برای نمايش مثال بالا به سه فايل نياز داريد، frame_left.html ،frame_right.html و فايل کد اچتمل بالا.

شناسه های cols و rows در تگ frameset

مثالهای زير را در نظر بگيريد:

<html>

<frameset cols="25%,50%,25%">

   <frame src="frame_3.html">

   <frame src="frame_2.html">

   <frame src="frame_1.html">

</frameset>

</html>

<html>

<frameset cols="*,200">

   <frame src="frame_2.html">

   <frame src="frame_1.html">

</frameset>

</html>

در مثال يک عرض فريم اول از سمت راست 200 پيکسل تعيين شده و بقيه عرض پنجره که با علامت * مشخص ميشود به فريم دوم اختصاص خواهد يافت.
در مثال دوم عرض پنجره با مقادير درصدی به فريمها اختصاص يافته است.
در مورد شناسه rows دقيقا قراردادهای بالا برقرارند.

نکات کاربردی:

* اگر فريمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغيير اندازه (resize) خواهند بود و برای جلوگيری از تغيير اندازه فريمها توسط کاربر بايد از شناسه ای به نام noresize در داخل تگ <frame> استفاده شود.

* اگر ميخواهيد که فريمها scroll نشوند (بالا و پايين بردن صفحه توسط ماوس) بايد در تگ frame مقدار شناسه scrolling را برابر "no" قرار دهيد. (مقادير ممکن "yes" ، "no" و "auto" ميباشند.) 

* اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ frame مقدار شناسه frameborder را برابر "0" قرار دهيد.

* درصد بسيار کمی از مرورگرها از تگهای مربوط به frame و frameset پشتيبانی نميکنند. برای اين موارد بايد از تگ <noframes> جهت نمايش صفحه جايگزين استفاده شود.

تگ های فريم