Las tablas HTML
El elemento <table> no fue planteado para ser una herramienta de diseño visual!! El propósito del elemento <table> es mostrar datos tabulados. Así que, no uses las tablas como medios de diseño visual para tu pagina! Harán un gran desorden de tu código. E imagina cuán difícil será rediseñar tu sitio luego de un par de meses.
Consejo: No uses tablas para el diseño visual de tu pagina!
Las plataformas o estructuras CSS
Si quieres aplicar un diseño visual rápidamente, puedes usar una plataforma como Bootstrap.
Los flotables con CSS
Es algo común hacer diseños visuales web enteros usando la propiedad CSS float. Es fácil de aprender – solo necesitas recordar cómo funcionan las propiedades float y clear.
Desventajas: Los elementos flotantes están sujetos al flujo del documento (la dirección, la interrupción y continuación en el diseño visual... espacio y posición que tiene un elemento HTML, inferidas en el código que se interpreta como la pagina web), lo cual puede afectar la flexibilidad o adaptabilidad.
Aprenderás mas de las propiedades CSS float y clear en un capitulo futuro.
Ejemplo con float:
Capitales del Mundo
Berlín
Es la capital de Alemania y uno de los dieciséis estados federados alemanes. Se localiza al noreste de Alemania. Por la ciudad fluyen los ríos Spree, Havel, Panke, Dahme y Wuhle. Con una población de 3,5 millones de habitantes, Berlín es la ciudad más poblada del país y de Europa Central, así como la segunda ciudad en tamaño y la quinta aglomeración urbana entre los países de la Unión Europea.
El código HTML y CSS que se haya tras este ejemplo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div#pizarrón-inflexible { width: 100%; border: 1px solid brown; } header.extremo, footer.extremo { padding: 5px; color: white; background-color: brown; text-align: center; } nav#canoa { float: left; max-width: 30%; padding: 5px; } nav#canoa ul { list-style-type: none; padding: 0px; } nav#canoa ul a { text-decoration: none; } article#tramo { border-left: 1px solid brown; padding: 5px; overflow: auto; } </style> </head> <body> <div id="pizarrón-inflexible"> <header class="extremo"> <h1>Capitales del Mundo</h1> </header> <nav id="canoa"> <ul> <li><a href="#">Berlín</a></li> <li><a href="#">Otra capital</a></li> <li><a href="#">Otra capital mas</a></li> </ul> </nav> <article id="tramo"> <h1>Berlín</h1> <p>Es la capital de Alemania y uno de los dieciséis estados federados alemanes. Se localiza al noreste de Alemania. Por la ciudad fluyen los ríos Spree, Havel, Panke, Dahme y Wuhle. Con una población de 3,5 millones de habitantes, Berlín es la ciudad más poblada del país y de Europa Central, así como la segunda ciudad en tamaño y la quinta aglomeración urbana entre los países de la Unión Europea.</p> </article> <footer class="extremo">Derecho de autor © Atlas.com</footer> </div> </body> </html>
No hay comentarios.:
Publicar un comentario