Disposición en HTML

¿A qué nos referimos con disposición?

Disposición es como ordenamos el contenido de nuestra página para que sea más simple de navegar o más atractiva.
Muchas veces deseamos que el texto de nuestra página esté dividido en 2 o más columnas.
Otras veces queremos insertar una imagen en algún lugar determinado de la página.
Para ello nos valemos del uso de las tablas, sin bordes y definiendo los diferentes anchos de cada una de las columnas.

Otro sistema más efectivo, es el uso de estilos para la disposición de los diferentes elementos dentro de la página. Pero ese tema lo estudiaremos en el tutorial de CSS.

Usando tablas

El uso más común es el de las tablas para dar forma a la disposición de los textos en la página.

Esta sección de la página está diseñada en dos columnas.

Para lograr este efecto debemos usar la etiqueta <table> y dividir el texto en 2 columnas.

El secreto está en usar la tabla sin bordes y agregarle un pequeño valor a cellpadding.

Se puede diseñar mucho más de dos columnas.

No importa cuanto texto le agregue a la página, siempre estará dentro de los bordes de la columna.

Código del ejemplo

<html>
<head>
<title>Disposición del texto</title>
</head>

<body>
<table width="100%" border="0" cellpadding="5">
   <tr>
      <td>Texto de la primera columna.</td>
      <td>Texto de la segunda columna.</td>
   </tr>
</table>
</body>
</html>

Disposición de una página estándard

Este es un pequeño ejemplo de como diseñar una página estándard.

Por supuesto que a cada sección se le puede agregar un color distinto o gráfica que le de vida a la página.

Acá ubicamos el banner

Menú

Vínculo 1

Vínculo 2

Vínculo 3

Acá va el contenido

Código del ejemplo

	
<table width="100%" height="250px" cellspacing="1px" cellpadding="0" border="1px">
   <tr height="50px">
      <td colspan="2px">

         <table title="Banner" border="0">
            <tr>
               <td>Acá ubicamos el banner</td>
            </tr>
         </table>

      </td>
   </tr>
   <tr height="200px">
      <td>

         <table title="Menu" border="0" width="100px">
            <tr><td>Menú</td></tr>
            <tr><td>Vínculo 1</td></tr>
            <tr><td>Vínculo 2</td></tr>
            <tr><td>Vínculo 3</td></tr>
         </table>

      </td>
      <td>

         <table title="Contenido" border="0" width="400px">
            <tr>
               <td>Acá va el contenido</td>
            </tr>
         </table>

     </td>
  </tr>
</table>

¿No encuentras lo que buscas?

Búsqueda

Otros tutoriales

CSS
Herramientas Utiles
Diseño de formularios

Diseño Web

Sitios amigos

LaWebdelProgramador
Desarrolloweb
Frogx.three

Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.

webmaster@virtualnauta.com

Mapa del sitio

HTML

Básico

Colores

Avanzado

Ejemplos y Examen

Guías de referencia

Disposición en HTML

¿A qué nos referimos con disposición?

Usando tablas

Código del ejemplo

Disposición de una página estándard

Código del ejemplo

¿No encuentras lo que buscas?

Búsqueda

Otros tutoriales

Diseño Web

Sitios amigos