گروه مقاله : HTML 4
تاريخ انتشار : 1394/02/22 - 11:26
كد :434
وب سایت ها معمولا محتویات خود را در چندین ستون نشان می دهند (مانند مجله یا روزنامه).
با استفاده از عناصر <div> یا <table> می توان حالت چند ستونی را ایجاد نمود.
نکته : هرچند می توان به وسیله جداول HTML، صفحه بندی نمود اما باید دانست که جداول برای ارائه داده ها در قالب جدول هستند نه ابزاری برای صفحه بندی و معمولا از عنصر <div> برای صفحه بندی صفحات وب استفاده می شود،زیرا به راحتی می توان آن را در CSS قرار داد.
صفحه بندی با استفاده از عناصر <div>
عنصر <div> یک عنصر block می باشد که برای گروه بندی عناصر HTML استفاده می شود.
توجه: CSS برای چیدمان عناصر یا ایجاد پس زمینه یا نمای رنگی برای صفحات استفاده می شود.
در مثال زیر، از پنج عنصر div برای صفحه بندی استفاده شده است. همچنین از CSS برای تعیین مکان عناصر، ایجاد پس زمینه رنگی و مشخص کردن عرض و ارتفاع عناصر استفاده شده است:
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>
صفحه بندی با استفاده از جداول
راه ساده ایجاد یک صفحه بندی، استفاده از تگ <table> می باشد.
حالت چند ستونی به وسیله عناصر <div> یا <table> ایجاد می شود. CSS برای تعیین مکان عناصر یا ایجاد پس زمینه یا نمایی رنگی برای صفحات استفاده می شود.
نکته : استفاده از جداول برای حالت چند ستونی، کاربرد درستی از عنصر <table> نمی باشد. هدف از عنصر <table> نمایش داده ها در قالب جدول است.
در مثال زیر، از یک جدول با سه سطر و دو ستون استفاده شده است. با استفاده از خصوصیت colspan سلول های سطرهای اول و آخر با هم ادغام شده اند.
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</html>
نکات مهم
نکته: بزرگترین مزیت استفاده از CSS این است که اگر کد CSS را در یک style sheet بیرونی قرار دهید سایت شما خیلی راحت تر حفظ می شود. شما می توانید صفحه بندی کل وب سایتتان را با ویرایش یک فایل تغییر دهید.
نکته: به دلیل اینکه ایجاد صفحه بندی های پیشرفته زمان گیر است، گزینه سریعتر، استفاده از یک الگو(template) می باشد. با جستجو در گوگل می توانید وب سایت های رایگانی را که این الگو ها را ارائه می دهند بیابید. (می توانید از آنها استفاده کنید و آنها را سفارشی کنید.)