كثيرا ما تعرض مواقع المحتوى في أعمدة متعددة (like a magazine or newspaper) .
معرض مدينة
باريس
طوكيو
لندن
لندن هي عاصمة إنجلترا. وهذه هي المدينة الأكثر اكتظاظا بالسكان في المملكة المتحدة، مع المنطقة الحضرية لأكثر من 13 مليون نسمة.
يقف على نهر التايمز، وكانت لندن والاستيطانية الكبرى لألفي سنة، وتاريخها يعود إلى تأسيسها على يد الرومان، الذي أطلقوا عليه اسم بتأسيس مدينة.
HTML تخطيط باستخدام <div> عناصر
و <div> وكثيرا ما يستخدم عنصر كأداة تخطيط، لأنه يمكن بسهولة وضعه مع CSS.
يستخدم هذا المثال أربعة <div> العناصر لإنشاء تخطيط عمود متعددة:
مثال
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo
</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 © w3ii.com
</div>
</body> انها محاولة لنفسك » وCSS:
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>تخطيط الموقع باستخدام HTML5
تقدم HTML5 عناصر الدلالات الجديدة التي تحدد أجزاء مختلفة من صفحة ويب:
 |
|
يستخدم هذا المثال <header> ، <nav> ، <section> ، و <footer> لإنشاء تخطيط عمود متعددة:
مثال
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo
</nav>
<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>
</section>
<footer>
Copyright © w3ii.com
</footer>
</body> انها محاولة لنفسك » وCSS:
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>HTML تخطيط باستخدام الجداول
و <table> لم يكن مصمما العنصر ليكون أداة تخطيط.
الغرض من <table> عنصر هو عرض جداول البيانات.
لا يمكن أن يتحقق تخطيط باستخدام <table> عنصر، لأن عناصر الجدول يمكن أن تكون على غرار مع CSS:
مثال
<body>
<table class="lamp">
<tr>
<th>
<img src="../images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body> انها محاولة لنفسك » وCSS:
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp th {
width:40px;
}
</style>تحذير: إنشاء تخطيط مع الجداول ليس عيبا، ولكن ليس من المستحسن! تجنب الجداول لإنشاء التخطيط.