جدول و صفحه آرایی :
از دیدگاه بسیاری از افراد، جدول ها به خودی خود در طراحی سایت جذاب نیستند. اما جدول ها ابزار مناسبی برای صفحه آرایی صفحه وب می باشند. اصول طراحی گرافیک این است که عناصر ویژوال به نحو خوبی در کنار هم قرار گیرند. جدول ها می توانند برای این منظور مورد استفاده قرار گیرند. جدول ها برای تنظیم نگارش بسیار مفیدند. استفاده از جدول برای صفحه آرایی مستلزم به کارگیری صفت WIDTH است. صفت WIDTH مربوط به دستور <TABLE > عرض جدول را با پیکسل یا با درصد مثل ۸۰٪ مشخص می کند. همچنین، هر پیکسل مربوط به خانه های جدول را می توان با استفاده از صفت WIDTH مربوط به دستورات < TD > یا <TH > مقدار داد.
ابتدا با مثالی شروع می کنیم :
صفحه آرایی با استفاده از جدولها.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
HTML>>
<HEAD>
<TITLE>Table Layout</tITLE>
HEAD>>
<BODY>
<“TABLE BORDER=”0>
<TR>
<TD WIDTH=”50″> <BR></TD>
<TD WIDTH=”400″>
<H1 ALIGN=”center”>Layout is here<H1>
<HR>
<P> <H3>This is a very simple layout that would have been nearly impossible to do without tables.</P?</H3<
<TD/>
<TD WIDTH=”100″> </TD>
</TR>
</TABLE>
</BODY>
</HTM>
در این مثال، مقدار صفت BORDER برابر با صفر شده است. البته نیازی به این صفت نیست، یعنی اگر مرورگر صفت BORDER را در دستور <TABLE> نبیند، حاشیه ای رسم نمی کند. هنگام ایجاد سلول های خالی table، خوب است که از <BR> برای رد کردن سطر یا فضای خالی غیر قابل شکستن (:nbsp&) در خانه table – .استفاده کرد تا نظم عمودی آن خراب نشود. جدولها می توانند با استفاده از پس زمینه، صفحه آرایی دقیق تری را ایجاد کنند. در دستور <BODY> صفتی به نام BACKGROUND وجود دارد که می تواند یک فایل تصویری را به عنوان زمینه صفحه در نظر بگیرد. با استفاده از این خاصیت می توان زمینه table را تعیین و سپس table را تشکیل داد.
مثال بعدی :
استفاده از table برای صفحه آرایی صفحه وب. در بخشی از این برنامه، تصویری به صفحه وب اضافه می شود. اگر تصویری در صفحه خود دارید، آن را به جای فایل armnet.gif در دستور IMG تایپ کنید.
<“DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN!>
<HTML>
<HEAD>
< Table Layouto <TITLE< </TITLE
</HEAD>
<BODY >
<TABLE CELLSPACING=”0″ CELLPADDING=”10″ BORDER=”1″ WIDTH=”550″>
<TR>
<“TD COLSPAN=”2” ALIGN=”Center>
<“FONT FACE=”Arial blak, helvetica, scans-seif” SIZE=”+2>
INSTITUDE: OLOMRAYANEH<FONT></TD>
<TR>
<TR>
<“TD WIDTH=”50%” VALIGN=”middle>
<“FONT FACE=”Arial, Helvetica, Scans-serif” SIZE=”4>
<B> Olomrayaneh is a publiser that publishes books about computer science. Already it published 12 books. </B></FONT></TD>
<“TD WIDTH=”50” ALIGN=”center>
<IMG SRC=”C:armnet.gif” WIDTH=”90″ HEIGHT=”90 BORDER=”0″>
<TD/>
</TR>
<TR>
<“TD COLSPAN=”2″ ALIGN”=”center”> <FONT FACE=”Arial, Helvetica, Scans-serif SIZE=”4>
<B><i> OLOMRAYANEH IS SUCCESSFULL. GOOD LUCKY.</i></B></FONT></TD>
</TR>
<TR>
<TD WIDTH=”50%” VALIN=”top” > <B> Olomraneh’s books are very useful. Mr. Jafarnezahd is it’s manager,
He is very serius in his works.</B></TD>
TD WIDTH=”50%” VALIGN=”top”><B> Some of olomrayaneh’s
books are: Computer Networks, C++, Delphi, Assembly,
Web page design, Pascal, Visual C++, Internet,
Database systems./B>
</TD>
</TR>
</TABLE>
<BODY >
<ΗΤΜL>
با استفاده از table می توان صفحات بسیار زیبا و در عین حال پیچیده را مورد استفاده قرار داد. ترکیبی از متن ها وتصاویر، صفحات زیبایی را ایجاد می کند ولی هرچه میزان تصاویر در صفحات وب بیشتر باشد، سرعت استفاده از آن کاهش می یابد. نمونه ای از کاربرد پیچیده جدول را در مثال بعدی خواهید دید.
مثال :
برنامه ای که با استفاده از table، صفحه ای را به کمک متن و تصویر ایجاد می کند. دقت داشته باشید که برای اجرای این برنامه، باید فایل های تصویری را در دسترسی داشته باشید.
!>DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN<“
<HTML>
<HEAD>
<TITLE> Rayaneh Publisher Home page.</TITLE>
</HEAD>
<BODY >
<“TABLE BORDER=”0″ CELLPADDING=”0″ CELLSPACING=”0” WIDTH=”570>
<TR>
<TD>
<“IMG SRC=”c:armnet.gif” BORDER=”0″ HEIGHT =”45″ WIDTH=”45>
</TD>
<“TD COLSPAN=”4>
<“IMG SRC=”c:rayaneh.gif” BORDER=”O” HEIGHT=”45″ WIDTH=”446>
</TD>
</TR>
<TR>
<TD VALIGN=”top” ROWSPAN=”7″ WIDTH=”124″>
<“IMG SRC=”c:univer.gif”BORDER=”0″ HEIGHT=”248” WIDTH=”124>
</TD>
<TD ROWSPAN=”7″ VALIGN=”top” WIDTH=”185″>
<IMG SRC-“c:subject.gif” BORDER=”O” HEIGHT=”45″ WIDTH=”185″>
And now, thanks to our merger with Massive Industries, we are now the world’s largest manufacturer of Gadgets™ and other useless products. <BR>< BR>
To learn more about our products or our growing monopoly, click on any of the links to the right.
</TD>
<“TD ROWSPAN=”2″ WIDTH=”68” VALIGN=”top>
<“IMG SRC=”c:blank.gif” BORDER=”O” HEIGHT=”108″ WIDTH=”68>
</TD>
<TD COLSPAN=”2″ WIDTH=”193″ VALIGN=”top”>
<“IMG SRC=”c:blank.gif. BORDER=”0″ HEIGHT=”35” WIDTH=”193>
</TD>
<TR>
<TR>
<TD COLSPAN=”2″ WIDTH=”193″ VALIGN=”top”>
<IMG SRC-“c:car.gif. BORDER=”0″ HEIGHT=”35″ WIDTH=”193”> </TD>
</TR>
<TR>
<TD COLSPAN=”2″ WIDTH=”193″ VALIGN=”top”>
<IMG SRC–”gadgets.gif” BORDER=”O” HEIGHT=”38″ WIDTH=”193″> </TD>
<TR/>
<TR>
<TD COLSPAN=”2″ ROWSPAN=”4″ WIDTH=”136″ VALIGN=”top”> <IMG SRC=”armnet.gif” >
</ΤD>
</TR>
<TR>
<TD COLSPAN=”2″ WIDTH=”309″> </TD>
<TD WIDTH=”68″> </TD>
<TD WIDTH=”68″> </TD>
<TD VALIGN=”top” WIDTH=”125″>
<IMG SRC=”lowcurve.gif” BORDER=”O” HEIGHT=”31″ WIDTH=”125″>
</TD>
</TR>
</TABLE>
</BODYS >
<HTML/>
