Crea tu Web: Indice de diseño

Ahora también
> HTML versión 5 <
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      Las tablas
      Tablas

      La organización del texto en una página es posible gracias a las tablas. Muchas páginas web son como páginas de revistas, y la forma más simple de emular las funciones de maquetación son las tablas. Una tabla no es más que una colección de listas y columnas a cuyas interseccinoes le vamos a llamar celdas, y es en esas celdas donde podmeos colocar textos o imágenes. Las tablas se pueden incluso anidar y las celdas se pueden agrupar unas con otras para lograr disposiciones de texto e imagen prácitcamente similares a las que se podrían conseguir en páginas de revistas gracias a los programas de maquetación.

      arriba


      Definir tablas

      Para definir una tabla tan solo debemos definar las filas que la componen. Y dentro de estas las características de las celdas. Por ejemplo la siguiente tabla posee 2 filas (2 <TR></TR>) y 3 columnas (3 pares <TD></TD> en cada fila) así:

      <TABLE>
        <TR>
          <TD>1,1</TD>
          <TD>1,2</TD>
          <TD>1,3</TD>
        </TR>
        <TR>
          <TD>2,1</TD>
          <TD>2,2</TD>
          <TD>2,3</TD>
        </TR>
      </TABLE>
      1,1 1,2 1,3
      2,1 2,2 2,3

      Pero la definición va más allá, podemos poner bordes, colores de fondo a las celdas, definir márgenes en las celdas, aumentar o disminuir el espaciado entre celdas. Resumimos todo esto en la siguiente tabla de atributos:

      WIDTH Anchura de la tabla. Puede ir en pixels o en porcentaje de la anchura total disponible.
      ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
      BORDER Especifica el grosor del borde que se dibujará alrededor de las tabla y celdas.
      BORDERCOLOR Define el color de los bordes de la tabla
      CELLSPACING Espacio entre celdas, en pixels.
      CELLPADDING Borde interior de las celdas, en pixels.

      Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:

      1,1 1,2 1,3
      2,1 2,2 2,3

      El contenido escrito son las coordenadas de la celda, así 1,2 indica que esa celda es la correspondiente a la fila 1 y la columna 2.

      arriba


      Definiendo las filas

      La definición de cada fila se inicia con la etiquete <TR> y finaliza con </TR>, entre ellas colocaremos las celdas. Cada etiqueta TR tiene los siguientes atributos:

      ALIGN Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
      VALIGN Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
      arriba


      Defiminiendo las celdas

      Ya sólo nos queda definir cada celda para lo que disponemos de las TD y TH. Esta última es una celda especial que se verá destacada, como un título para la columna: en negrita y centrado. Ambas etiquetas admiten los siguientes atributos:

      ALIGN Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
      VALIGN Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
      WIDTH Especifica la anchura de la celda. También se puede especificar tanto en pixels como en porcentaje, teniendo en cuenta que, en este último caso, será un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador).
      NOWRAP Impide que, en el interior de la celda, se rompa la línea en varias lineas.
      COLSPAN Número de celdas de una fila agrupadas.
      ROWSPAN Número de celdas de la columna agrupadas.

      Los dos últimos parámetros se usan para fundir celdas de una misma fila o de una misma columna. Por ejemplo veamos una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:

      <TABLE BORDER=1>
        <TR>
          <TD COLSPAN=2>1,1 y 1,2</TD>
          <TD>1,3</TD>
        </TR>
        <TR>
          <TD ROWSPAN=2>2,1 y 3,1</TD>
          <TD>2,2</TD>
          <TD>2,3</TD>
        </TR>
        <TR>
          <TD>3,2</TD>
          <TD>3,3</TD>
        </TR>
      </TABLE>
      1,1 y 1,2 1,3
      2,1 y 3,1 2,2 2,3
      3,2 3,3

      Si te fijas cuando una celda con un colspan = 2 equivale a dos celdas a la hora de calcular el número de celdas de la fila. Algo similar ocurre con el rowspan pero referido a celdas unidas en vertical.

      arriba


      Titulares

      Ya hemos dicho que hay un tipo de celdas utilizable como encabezamiento o titular, pero la tabla al completo puede llevar un título, que irá en una zona fuera de cualquier celda o fila. Esta es la etiqueta CAPTION. Su uso es muy simple como puedes ver en este ejemplo:

      <TABLE BORDER=1>
        <CAPTION>
          Números</CAPTION>
      ...
      </TABLE>
      Números
      1,1 y 1,2 1,3
      2,1 y 3,1 2,2 2,3
      3,2 3,3

      Con el parámetro ALIGN, podemos controlar que el título aparezca arriba (por defecto TOP) o abajo de la tabla , con el valor BOTTOM.

      arriba


      Comunidad Virtual. Alojamiento gratis