Los sitios web suelen mostrar contenido en múltiples columnas (like a magazine or newspaper) .
Galería de la ciudad
París
Tokio
Londres
Londres es la capital de Inglaterra. Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.
Situada en el río Támesis, Londres ha sido un acuerdo importante por dos milenios, su historia se remonta a su fundación por los romanos, que la llamaron Londinium.
Usando diseño HTML <div> Elementos
La <div> elemento se utiliza a menudo como una herramienta de diseño, ya que fácilmente se puede colocar con CSS.
Este ejemplo utiliza cuatro <div> elementos para crear un diseño de varias columnas:
Ejemplo
<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> Inténtalo tú mismo " El 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>Diseño de sitio web usando HTML5
HTML5 ofrece nuevos elementos semánticos que definen diferentes partes de una página web:
 |
|
En este ejemplo se utiliza <header> , <nav> , <section> y <footer> para crear un diseño de varias columnas:
Ejemplo
<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> Inténtalo tú mismo " El 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>Uso de tablas de diseño HTML
La <table> elemento no fue diseñado para ser una herramienta de diseño.
El propósito de la <table> elemento es para mostrar datos tabulares.
Layout se puede lograr utilizando el <table> elemento, porque los elementos de tabla pueden ser de estilo con CSS:
Ejemplo
<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> Inténtalo tú mismo " El CSS:
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp th {
width:40px;
}
</style>Advertencia: La creación diseño con tablas no está mal, pero no es recomendable! Evitar la creación de tablas de diseño.