LA
   
  Ayuda Web
  Manual HTML 3ª parte
 

Otros efectos en el texto

Una o varias líneas de texto, pueden estar centradas respecto a los márgenes de la ventana. Esto afecta sólo al texto que hay entre <CENTER> y </CENTER>, pero no a todo el párrafo. Por ejemplo:

texto texto texto texto texto texto texto texto texto texto texto texto 
<CENTER>texto centrado texto centrado</CENTER>
texto texto texto texto texto texto texto texto texto texto texto texto

Se verá:

texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto texto

texto centrado texto centrado

texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto texto

Esto, además de a texto sólo, se puede aplicar a una tabla, una imagen o cualquier otra cosa.

Quedan algunos otros elementos que modifican el aspecto del texto. Algunos, aparentemente, hacen la misma cosa, y otros no funcionan con el visualizador de Netscape, por lo que se omiten aquí.

Texto en negrita:
<B>Texto en negrita</B>
Texto realzado:
<STRONG>Texto realzado</STRONG>
Texto en itálica:
<I>Texto en itálica</I>
Texto con énfasis:
<EM>Texto con énfasis</EM>
Texto ejemplo de código:
<CODE>Texto ejemplo de código</CODE>
Texto teletipo:
<TT>Texto teletipo</TT>
Texto subrayado:
<U>Texto subrayado</U>
Texto tachado:
<STRIKE>Texto tachado</STRIKE>
Texto de dirección:
<ADDRESS>Texto de dirección</ADDRESS>
Texto intermitente
<BLINK>Texto intermitente</BLINK>
Texto superíndiceTexto normal
<SUP>Texto Superíndice</SUP>
Texto subíndiceTexto nomal
<SUB>Texto Subíndice</SUB>
Texto grande
<BIG>Texto grande</BIG>
Texto pequeño
<SMALL>Texto pequeño</SMALL>

En los navegadores de última generación se ha implementado un efecto que permite incluir explicaciones ocultas que aparecen al pasar el ratón por encima (sin pulsar), pero sin cambiar de página ni abrir ninguna ventana nueva. Por ejemplo, si escribes:

<ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM>

Al pasar el ratón sobre la palabra HTML, se desvela su significado: HTML

De funcionamiento similar al anterior también tenemos el elemento <abbr>

<abbr TITLE="Hyper Text Markup Language">HTML</abbr>

Y este es el aspecto que toma el texto: HTML     Este último elemento NO funciona con el navegador IE. Como puedes ver, los dos trabajan de la misma forma que el parámetro title que se aplica al elemento <A> y se diferencian de éste solamente por el tipo de subrayado, que es más ligero. 

Listas y menús

Hay elementos que permiten crear texto con varios formatos de listado: Estos pueden ser ordenados <OL> (se refiere a numerados, no ordenados por algun criterio), desordenados <UL> (no numerados), directorios <DIR>, menu <MENU> y listados de definición <DL>. Veamos cómo es la sintaxis básica y apariencia de estos elementos, a partir de los cuales, pueden hacerse combinaciones muy complejas mediante anidamientos de unos con otros, hasta conseguir prácticamente cualquier presentación deseada:

Esto es una lista ordenada (numerada):

  1. Primera linea
  2. Segunda linea

Se escribe:

<OL>
<LI>Primera linea
<LI>Segunda linea
</OL>

Fíjate en que los elementos <LI> no necesitan cierre. Terminan cuando aparece otro igual o se cierra la lista. Puede ser conveniente poner el cierre </LI> si se van a aplicar instrucciones de estilo.


Esto es una lista desordenada ( no numerada):

  • Primera linea
  • segunda linea

Se escribe:

<UL>
<LI>Primera linea
<LI>Segunda linea
</UL>

En este caso los números han sido sustituidos por unos puntos gruesos. Esa es la apariencia por defecto; se puede cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC). Con el valor CIRCLE se verá:

  • Primera linea
  • segunda linea

Se escribe:

<UL TYPE=CIRCLE>
<LI>Primera linea
<LI>Segunda linea
</UL>

También puede usarse el valor SQUARE. Así:

  • Primera linea
  • segunda linea

Se escribe:

<UL TYPE=SQUARE>
<LI>Primera linea
<LI>Segunda linea
</UL>

Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores: TYPE=1 (por defecto) para números, TYPE=A para letras mayúsculas, TYPE=a para letras minúsculas, TYPE=I para numeración romana en mayúsculas y TYPE=i para numeración romana en minúsculas.

Esto es una lista ordenada con letras mayúsculas:

  1. Primera linea
  2. Segunda linea
  3. Tercera linea
  4. Cuarta linea

Se escribe:

<OL TYPE=A>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

Esto es una lista ordenada con letras minúsculas:

  1. Primera linea
  2. Segunda linea
  3. Tercera linea
  4. Cuarta linea

Se escribe:

<OL TYPE=a>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

Esto es una lista ordenada con numeración romana en mayúsculas:

  1. Primera linea
  2. Segunda linea
  3. Tercera linea
  4. Cuarta linea

Se escribe:

<OL TYPE=I>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

Esto es una lista ordenada con numeración romana en minúsculas:

  1. Primera linea
  2. Segunda linea
  3. Tercera linea
  4. Cuarta linea

Se escribe:

<OL TYPE=i>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

En algunos casos puede interesarnos que la lista no comience por el número 1 (por ejemplo si es una lista que continua en otra página). Se puede conseguir con el atributo START combinado con TYPE.

Esto es una lista ordenada con letras mayúsculas y que comienza por la E:

  1. Primera linea
  2. Segunda linea
  3. Tercera linea
  4. Cuarta linea

Se escribe:

<OL TYPE=A START=5>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

El número que pones en el atributo START indica en que número o letra comenzará la lista. la E es la quinta letra.


Esto es un menú:

  • Primera linea
  • Segunda linea
  • Se escribe:

    <MENU>
    <LI>Primera linea
    <LI>Segunda linea
    </MENU>

    La diferencia entre un menú y una lista desordenada, es que las líneas en la lista desordenada comienzan en el margen izquierdo y las del menú unas posiciones más a la derecha (aunque eso depende del visualizador, con Netscape se ven igual).


    Esto es un directorio:

  • Primera linea
  • Segunda linea
  • Se escribe:

    <DIR>
    <LI>Primera linea
    <LI>Segunda linea
    </DIR>

    Ocurre lo mismo que con el menú, con Netscape no se aprecia diferencia.


    Esto es una lista de definicion:

    Primera linea
    Segunda linea

    Se escribe:

    <DL>
    <DT>Primera linea
    <DD>Segunda linea
    </DL>

    Fíjate que ahora en lugar del elemento <LI> se utiliza <DT> y <DD>, y como tipo <DL>. Estos tres nuevos elementos también se pueden usar con cualquiera de los anteriores tipos de lista, alterando por completo su apariencia. Para hacerse una idea de la variedad de aspectos que se pueden conseguir, lo mejor es ver ejemplos:
     

    Ejemplos de listas y menús

    Desordenadas

    Desordenada simple con marcas

    • Linea de texto 1
    • Linea de texto 2
    • Linea de texto 3

    Se escribe:

    <UL>
    <LI>Linea de texto 1
    <LI>Linea de texto 2
    <LI>Linea de texto 3
    </UL>

    Desordenada simple sin marcas. Comienzo en margen izquierdo

    Linea de texto 1
    Linea de texto 2
    Linea de texto 3

    Se escribe:

    <DL>
    <DT>Linea de texto 1
    <DT>Linea de texto 2
    <DT>Linea de texto 3
    </DL>

    Desordenada simple sin marcas. Comienzo una posición a la derecha

      Linea de texto 1
      Linea de texto 2
      Linea de texto 3

    Se escribe:

    <UL>
    <DT>Linea de texto 1
    <DT>Linea de texto 2
    <DT>Linea de texto 3
    </UL>

    Desordenada simple con marcas. Comienzo una posición a la derecha

    • Linea de texto 1
    • Linea de texto 2
    • Linea de texto 3

    Se escribe:

    <UL>
    <LI>Linea de texto 1
    <LI>Linea de texto 2
    <LI>Linea de texto 3
    </UL>

    Desordenada simple sin marcas. Comienzo dos posiciones a la derecha

      Linea de texto 1
      Linea de texto 2
      Linea de texto 3

    Se escribe:

    <UL>
    <DD>Linea de texto 1
    <DD>Linea de texto 2
    <DD>Linea de texto 3
    </UL>

    Desordenada simple sin marcas. Comienzo tres posiciones a la derecha

        Linea de texto 1
        Linea de texto 2
        Linea de texto 3

    Se escribe:

    <UL>
    <UL>
    <DD>Linea de texto 1
    <DD>Linea de texto 2
    <DD>Linea de texto 3
    </UL>
    </UL>

    Desordenada simple con marcas. Comienzo dos posiciones a la derecha

      • Linea de texto 1
      • Linea de texto 2
      • Linea de texto 3

    Se escribe:

    <UL>
    <UL TYPE=DISC>
    <LI>Linea de texto 1
    <LI>Linea de texto 2
    <LI>Linea de texto 3
    </UL>
    </UL>

    Desordenada con 4 niveles sin marcas

    Linea de texto 1
    Linea de texto 2
    Linea de texto 3
    Linea de texto 3.1
    Linea de texto 3.2
    Linea de texto 3.2.1
    Linea de texto 3.2.2
    Linea de texto 3.2.2.1
    Linea de texto 3.2.2.2
    Linea 4 de texto

    Se escribe:

    <DL>
    <DT>Linea de texto 1
    <DT>Linea de texto 2
    <DT>Linea de texto 3
    <DL>
    <DT>Linea de texto 3.1
    <DT>Linea de texto 3.2
    <DL>
    <DT>Linea de texto 3.2.1
    <DT>Linea de texto 3.2.2
    <DL>
    <DT>Linea de texto 3.2.2.1
    <DT>Linea de texto 3.2.2.2
    </DL>
    </DL>
    </DL>
    <DT>Linea 4 de texto
    </DL>

    Desordenada con 4 niveles con marcas

    • Linea de texto 1
    • Linea de texto 2
    • Linea de texto 3
      • Linea de texto 3.1
      • Linea de texto 3.2
        • Linea de texto 3.2.1
        • Linea de texto 3.2.2
          • Linea de texto 3.2.2.1
          • Linea de texto 3.2.2.2
    • Linea 4 de texto

    Se escribe:

    <UL>
    <LI>Linea de texto 1
    <LI>Linea de texto 2
    <LI>Linea de texto 3
    <UL>
    <LI>Linea de texto 3.1
    <LI>Linea de texto 3.2
    <UL>
    <LI>Linea de texto 3.2.1
    <LI>Linea de texto 3.2.2
    <UL>
    <LI>Linea de texto 3.2.2.1
    <LI>Linea de texto 3.2.2.2
    </UL>
    </UL>

    </UL>
    <LI>Linea 4 de texto
    </UL>

    Ordenadas

    Ordenada simple

    1. Linea de texto 1
    2. Linea de texto 2
    3. Linea de texto 3

    Se escribe:

    <OL>
    <LI>Linea de texto 1
    <LI>Linea de texto 2
    <LI>Linea de texto 3
    </OL>

    Ordenada con 4 niveles, todos ordenados

    1. Linea de texto 1
    2. Linea de texto 2
    3. Linea de texto 3
      1. Linea de texto 3.1
      2. Linea de texto 3.2
        1. Linea de texto 3.2.1
        2. Linea de texto 3.2.2
          1. Linea de texto 3.2.2.1
          2. Linea de texto 3.2.2.2
    4. Linea de texto 4

    Se escribe:

    <OL>
    <LI>Linea de texto 1
    <LI>Linea de texto 2
    <LI>Linea de texto 3
    <OL>
    <LI>Linea de texto 3.1
    <LI>Linea de texto 3.2
    <OL>
    <LI>Linea de texto 3.2.1
    <LI>Linea de texto 3.2.2
    <OL>
    <LI>Linea de texto 3.2.2.1
    <LI>Linea de texto 3.2.2.2
    </OL>
    </OL>
    </OL>

    <LI>Linea de texto 4
    </OL>

    Ordenada con 4 niveles, todos ordenados. Numeración romana en mayúsculas y minúsculas

    1. Linea de texto 1
    2. Linea de texto 2
    3. Linea de texto 3
      1. Linea de texto 3.1
      2. Linea de texto 3.2
        1. Linea de texto 3.2.1
        2. Linea de texto 3.2.2
          1. Linea de texto 3.2.2.1
          2. Linea de texto 3.2.2.2
    4. Linea de texto 4

    Se escribe:

    <OL TYPE=I>
    <LI>Linea de texto 1
    <LI>Linea de texto 2
    <LI>Linea de texto 3
    <OL TYPE=i>
    <LI>Linea de texto 3.1
    <LI>Linea de texto 3.2
    <OL TYPE=i>
    <LI>Linea de texto 3.2.1
    <LI>Linea de texto 3.2.2
    <OL TYPE=i>
    <LI>Linea de texto 3.2.2.1
    <LI>Linea de texto 3.2.2.2
    </OL>
    </OL>
    </OL>

    <LI>Linea de texto 4
    </OL>

    Ordenada con 4 niveles, 2 desordenados con marcas

    1. Linea de texto 1
    2. Linea de texto 2
    3. Linea de texto 3
      1. Linea de texto 3.1
      2. Linea de texto 3.2
        • Linea de texto 3.2.1
        • Linea de texto 3.2.2
          • Linea de texto 3.2.2.1
          • Linea de texto 3.2.2.2
    4. Linea de texto 4

    Se escribe:

    <OL>
    <LI>Linea de texto 1
    <LI>Linea de texto 2
    <LI>Linea de texto 3
    <OL>
    <LI>Linea de texto 3.1
    <LI>Linea de texto 3.2
    <UL TYPE=SQUARE>
    <LI>Linea de texto 3.2.1
    <LI>Linea de texto 3.2.2
    <UL TYPE=CIRCLE>
    <LI>Linea de texto 3.2.2.1
    <LI>Linea de texto 3.2.2.2
    </UL>
    </UL>
    </OL>
    <LI>Linea de texto 4
    </OL>

    Ordenada con 4 niveles, 2 desordenados sin marcas

    1. Linea de texto 1
    2. Linea de texto 2
    3. Linea de texto 3
      1. Linea de texto 3.1
      2. Linea de texto 3.2
        Linea de texto 3.2.1
        Linea de texto 3.2.2
        Linea de texto 3.2.2.1
        Linea de texto 3.2.2.2
    4. Linea de texto 4

    Se escribe:

    <OL>
    <LI>Linea de texto 1
    <LI>Linea de texto 2
    <LI>Linea de texto 3
    <OL>
    <LI>Linea de texto 3.1
    <LI>Linea de texto 3.2
    <DL>
    <DD>Linea de texto 3.2.1
    <DD>Linea de texto 3.2.2
    <DL>
    <DD>Linea de texto 3.2.2.1
    <DD>Linea de texto 3.2.2.2
    </DL>
    </DL>
    </OL>
    <LI>Linea de texto 4
    </OL>

     

    Tablas

    Las tablas son sin duda uno de los elementos más potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, links... Por supuesto, además de permitir cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado. Por defecto se autodimensionan, es decir, se adaptan en tamaño a su contenido, pero también es posible definirlo de forma fija. Las tablas han sido utilizadas largo tiempo para maquetar el contenido de las páginas, y aunque las nuevas tendencias aconsejen hacer esto con bloques (capas XHTML), no es un elemento que vaya a desaparecer, y es mucho más sencillo de utilizar.

    El elemento básico de definición de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row) <TH> para definir una cabecera (Header) <TD> para definir una celda de datos (Data). Estos sub elementos también han de llevar sus correspondientes cierres: </TR> </TH> </TD>.

    Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma automática el texto de su contenido recibe los atributos de negrita y centrado. Sólo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez.

    He aquí una tabla-resumen de los elementos utilizados y los atributos que admite cada uno:

     

    Resumen de tablas
      TABLE TR TD TH CAPTION
    BORDER X - - - -
    BORDERCOLOR X - - - -
    ROWSPAN - - X X -
    COLSPAN - - X X -
    ALIGN - X X X X
    VALIGN - - X - -
    WIDTH X - X - -
    HEIGTH X - X - -
    CELLPADDING X - - - -
    CELLSPACING X - - - -
    NOWRAP - - X - -
    EVENTS X X X X -

    Veamos el significado de cada atributo:

    • BORDER    Indica el ancho de los bordes de la tabla. Se mide en píxels. Si no se escribe este atributo, es equivalente a BORDER=0 (por defecto).
    • BORDERCOLOR    Establece el color de los bordes de la tabla. No funciona igual en todos los navegadores.
    • CELLSPACING    Indica el número de píxels que separan una celda de otra. Aunque pueda parecerlo, no hace lo mismo que BORDER. Su valor por defecto es 2.
    • CELLPADDING  Indica los píxels de separación entre el borde de la celda y su contenido. Su valor por defecto es 1.
    • WIDTH    Según donde se escriba, sirve para controlar el ancho de toda la tabla o de sus columnas. Si se incluye en <TABLE> puede indicar el tamaño tanto en píxels como en porcentaje respecto al ancho de la pantalla.
    • ALIGN    Indica la alineación horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro).
    • VALIGN    Indica la alineación vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro).
    • ROWSPAN    Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de filas.
    • COLSPAN    Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de columnas.
    • NOWRAP    Para impedir que las líneas de texto dentro de una celda se trunquen en los espacios en blanco.
    • EVENTS    Se pueden capturar todos los eventos típicos de los navegadores en cualquiera de las partes de una tabla. Para ello es necesario JavaScript, y no es compatible con todos los navegadores.
      Por ejemplo: <TABLE BORDER onMouseOver="javascript:alert('Aviso')"> ... </TABLE>

    Recientemente se han implementado al elemento <TABLE> algunos atributos muy interesantes que permiten definir qué bordes o líneas de la tabla se mostrarán:

    Este atributo sirve para definir qué bordes del marco de la tabla serán visibles: <TABLE FRAME="valor"> ... </TABLE> donde valor puede ser:

    • void - Ningún lado (por defecto).
    • above - Sólo el borde superior
    • below - Sólo el borde inferior.
    • hsides - Sólo los bordes superior e inferior.
    • vsides - Sólo los lados derecho e izquierdo.
    • lhs - Sólo el lado izquierdo.
    • rhs - Sólo el lado derecho.
    • box - Los cuatro lados.
    • border - Los cuatro lados (no es lo mismo que el ya conocido)

    Y este otro sirve para definir qué bordes de la tabla serán visibles: <TABLE RULES="valor"> ... </TABLE> donde valor puede ser:

    • none - Ninguna línea de división (por defecto).
    • groups - Sólo aparecen líneas de división entre grupos de filas y grupos de columnas.
    • cols - Sólo aparecerán líneas de división entre filas.
    • rows - Sólo aparece líneas de división entre columnas.

    Estos últimos atributos no funcionan igual en todos los navegadores, y no funcionan en absoluto si no son de la última generación. Según el navegador de que se trate, puede que haya que combinar más de un atributo para conseguir el efecto deseado. Lo mejor es hacer pruebas con algunas versiones para asegurarse.

    Las posibilidades son tan amplias, que lo mejor es ver los ejemplos:

    Ejemplos de tablas

    Tabla básica de 3x2

    A B C
    D E F

    <TABLE BORDER>
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    Dos ejemplos de línea expandida <ROWSPAN>

    Item 1 Item 2 Item 3
    Item 4 Item 5

    <TABLE BORDER>
    <TR>
    <TD>Item 1</TD>
    <TD ROWSPAN=2>Item 2</TD>
    <TD>Item 3</TD>
    </TR>
    <TR>
    <TD>Item 4</TD> <TD>Item 5</TD>
    </TR>
    </TABLE>

    Item 1 Item 2 Item 3 Item 4
    Item 5 Item 6 Item 7

    <TABLE BORDER>
    <TR>
    <TD ROWSPAN=2>Item 1</TD>
    <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
    </TR>
    <TR>
    <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
    </TR>
    </TABLE>

    Ejemplo de columna expandida <COLSPAN>

    Item 1 Item 2
    Item 3 Item 4 Item 5

    <TABLE BORDER>
    <TR>
    <TD>Item 1</TD>
    <TD COLSPAN=2>Item 2</TD>
    </TR>
    <TR>
    <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
    </TR>
    </TABLE>

    Tabla con cabeceras <TH>

    Head1 Head2 Head3
    A B C
    D E F

    <TABLE BORDER>
    <TR>
    <TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
    </TR>
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    Combinación de columna expandida y cabecera

    Head1 Head2
    A B C D
    E F G H

    <TABLE BORDER>
    <TR>
    <TH COLSPAN=2>Head1</TH>
    <TH COLSPAN=2>Head2</TH>
    </TR>
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
    </TR>
    <TR>
    <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
    </TR>
    </TABLE>

    Combinación de cabeceras múltiples y columnas expandidas

    Head1 Head2
    Head 3 Head 4 Head 5 Head 6
    A B C D
    E F G H

    <TABLE BORDER>
    <TR>
    <TH COLSPAN=2>Head1</TH>
    <TH COLSPAN=2>Head2</TH>
    </TR>
    <TR>
    <TH>Head 3</TH> <TH>Head 4</TH>
    <TH>Head 5</TH> <TH>Head 6</TH>
    </TR>
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
    </TR>
    <TR>
    <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
    </TR>
    </TABLE>

    Cabeceras laterales

    Head1 Item 1 Item 2 Item 3
    Head2 Item 4 Item 5 Item 6
    Head3 Item 7 Item 8 Item 9

    <TABLE BORDER>
    <TR><TH>Head1</TH>
    <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
    <TR><TH>Head2</TH>
    <TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
    <TR><TH>Head3</TH>
    <TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
    </TABLE>

    Combinación de cabeceras laterales y líneas expandidas

    Head1 Item 1 Item 2 Item 3 Item 4
    Item 5 Item 6 Item 7 Item 8
    Head2 Item 9 Item 10 Item 3 Item 11

    <TABLE BORDER>
    <TR><TH ROWSPAN=2>Head1</TH>
    <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
    </TR>
    <TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD>
    </TR>
    <TR><TH>Head2</TH>
    <TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD>
    </TR>
    </TABLE>

    Combinación de cabeceras superiores y laterales. Tabla centrada. Contenidos centrados. Título al pie.

    Resumen de tablas
      TABLE TR TD TH CAPTION
    BORDER X - - - -
    ROWSPAN - - X X -
    COLSPAN - - X X -
    ALIGN - X X X X
    VALIGN - - X - -
    WIDTH X - X - -
    HEIGTH X - X - -
    CELLPADDING X - - - -
    CELLSPACING X - - - -
    <CENTER>
    <TABLE BORDER>
    <CAPTION ALIGN=bottom>Resumen de tablas</CAPTION>
    <TR>
    <TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH></TD>
    </TR>

    <TR ALIGN=CENTER>
    <TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
    </TR>

    <TR ALIGN=CENTER>
    <TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
    </TR>

    <TR ALIGN=CENTER>
    <TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
    </TR>

    <TR ALIGN=CENTER>
    <TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD>
    </TR>

    <TR ALIGN=CENTER>
    <TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
    </TR>

    <TR ALIGN=CENTER>
    <TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
    </TR>

    <TR ALIGN=CENTER>
    <TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
    </TR>

    <TR ALIGN=CENTER>
    <TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
    </TR>

    <TR ALIGN=CENTER>
    <TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
    </TR>
    </TABLE>
    </CENTER>

    Ejemplo con todos los elementos y parámetros

        Media
      Altura Peso
    Sexo Hombres 1.9 85
    Mujeres 1.7 60

    <TABLE BORDER>
    <TR> <TD><TH ROWSPAN=2></TH>
    <TH COLSPAN=2>Media</TH></TD>
    </TR>
    <TR> <TD><TH>Altura</TH><TH>Peso</TH></TD>
    </TR>
    <TR> <TH ROWSPAN=2>Sexo</TH>
    <TH>Hombres</TH><TD>1.9</TD><TD>85</TD>
    </TR>
    <TR> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD>
    </TR>
    </TABLE>

    Otro ejemplo de línea y columna expandidos

    A 1 2
    3 4
    C D

    <TABLE BORDER>
    <TR>
    <TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
    <TD>1</TD>
    <TD>2</TD>
    </TR>
    <TR>
    <TD>3</TD>
    <TD>4</TD>
    </TR>
    <TR>
    <TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
    <TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
    </TR>
    <TR>
    </TR>
    </TABLE>

    Ajustando márgenes y bordes

    Tabla sin bordes

    Item 1 Item 2 Item 3
    Item 4 Item 5

    <TABLE>
    <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD>
    </TR>
    <TR> <TD>Item 4</TD> <TD>Item 5</TD>
    </TR>
    </TABLE>

    Aquí no es visible el borde de las celdas debido a que se ha omitido el atributo BORDER del elemento <TABLE>. La omisión o no es equivalente a parametrizarlo; se consigue lo mismo así: BORDER=0, y como ya habrás deducido, el valor de BORDER puede ser variable. Mira el siguiente ejemplo:


    Tabla con borde de 10 puntos

    Item 1 Item 2
    Item 3 Item 4

    <TABLE BORDER=10>
    <TR> <TD>Item 1</TD> <TD> Item 2</TD>
    </TR>
    <TR> <TD>Item 3</TD> <TD>Item 4</TD>
    </TR>
    </TABLE>

    Dimensionado de celdas

    A B C
    D E F

    <TABLE BORDER CELLPADDING=10 CELLSPACING=0>
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    A B C
    D E F

    <TABLE BORDER CELLPADDING=0 CELLSPACING=10>
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    A B C
    D E F

    <TABLE BORDER CELLPADDING=10 CELLSPACING=10>
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    A B C
    D E F

    <TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    Alineación, títulos y subtablas

    Líneas múltiples en un tabla

    Enero Febrero Marzo
    Celda 1 Celda 2 Otra celda
    Celda 3
    Celda 4 y esta
    es la celda 5
    Celda 6

    <TABLE BORDER>
    <TR>
    <TH>Enero</TH>
    <TH>Febrero</TH>
    <TH>Marzo</TH>
    </TR>
    <TR>
    <TD>Celda 1</TD>
    <TD>Celda 2</TD>
    <TD>Otra celda<br> Celda 3</TD>
    </TR>
    <TR>
    <TD>Celda 4</TD>
    <TD>y esta<br>es la celda 5</TD>
    <TD>Celda 6</TD>
    </TR>
    </TABLE>

    Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTER

    Se puede aplicar individualmente a una celda o a toda la línea

    Enero Febrero Marzo
    Todas alineadas al centro Celda 2 Otra celda
    Celda 3
    Alineado a la derecha Alineado al centro Por defecto
    Alineado a la izquierda

    <TABLE BORDER>
    <TR>
    <TH>Enero</TH>
    <TH>Febrero</TH>
    <TH>Marzo</TH>
    </TR>
    <TR ALIGN=center>
    <TD>Todas alineadas al centro</TD>
    <TD>Celda 2</TD>
    <TD>Otra celda<br> Celda 3</TD>
    </TR>
    <TR>
    <TD ALIGN=right>Alineado a la derecha</TD>
    <TD ALIGN=center>Alineado al centro</TD>
    <TD>Por defecto<br>Alineado a la izquierdat</TD>
    </TR>
    </TABLE>

    Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM | MIDDLE

    Se puede aplicar individualmente a una celda o a toda la columna

    Enero Febrero Marzo
    Todas alineadas arriba Esta es la
    Celda 2
    Celda 3
    Alineado arriba Alineado abajo Por defecto
    Alineado al centro

    <TABLE BORDER>
    <TR>
    <TH>Enero</TH>
    <TH>Febrero</TH>
    <TH>Marzo</TH>
    </TR>
    <TR VALIGN=top>
    <TD>Todas alineadas arriba</TD>
    <TD>Esta es la<br>Celda 2</TD>
    <TD>Celda 3</TD>
    </TR>
    <TR>
    <TD VALIGN=top>Alineado arriba</TD>
    <TD VALIGN=bottom>Alineado abajo</TD>
    <TD>Por defecto<br>Alineado al centro</TD>
    </TR>
    </TABLE>

    Titulando las tablas. CAPTION=TOP | BOTTOM

    Título arriba
    Enero Febrero Marzo
    Celda 1 Celda 2 Celda 3

    <TABLE BORDER>
    <CAPTION ALIGN=top>Titulo arriba</CAPTION>
    <TR>
    <TH>Enero</TH>
    <TH>Febrero</TH>
    <TH>Marzo</TH>
    </TR>
    <TR>
    <TD>Celda 1</TD>
    <TD>Celda 2</TD>
    <TD>Celda 3</TD>
    </TR>
    </TABLE>

    Título abajo
    Enero Febrero Marzo
    Celda 1 Celda 2 Celda 3

    <TABLE BORDER>
    <CAPTION ALIGN=bottom>Titulo abajo</CAPTION>
    <TR>
    <TH>Enero</TH>
    <TH>Febrero</TH>
    <TH>Marzo</TH>
    </TR>
    <TR>
    <TD>Celda 1</TD>
    <TD>Celda 2</TD>
    <TD>Celda 3</TD>
    </TR>
    </TABLE>

    Anidando tablas. La tabla ABCD dentro de la tabla 12345

    1 2 3
    A B
    C D
    4 5 6

    <TABLE BORDER>
    <TR> <!-- ROW 1, TABLE 1 -->
    <TD>1</TD>
    <TD>2</TD>
    <TD>3
    <TABLE BORDER>
    <TR> <!-- ROW 1, TABLE 2 -->
    <TD>A</TD>
    <TD>B</TD>
    </TR>
    <TR> <!-- ROW 2, TABLE 2 -->
    <TD>C</TD>
    <TD>D</TD>
    </TR>
    </TABLE>
    </TD>
    </TR>
    <TR> <!-- ROW 2, TABLE 1 -->
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD>
    </TR>
    </TABLE>

    Longitud horizontal de las tablas

    Tabla que ocupa el 50 % de la pantalla, y cuyas celdas están dimensionadas al 50 % cada una respecto a la longitud total de la tabla

    Width=50% Width=50%
    Celda 3 Celda 4

    <TABLE BORDER WIDTH="50%">
    <TR><TD>Width=50%</TD><TD>Width=50%</TD>
    </TR>
    <TR><TD>Celda 3</TD><TD>Celda 4</TD>
    </TR>
    </TABLE>

    Tabla dimensionada al 50 % de la pantalla, celdas sin dimensionar. Obsévese que se alargan más de lo que lo harían sin forzar la longitud de la tabla

    Celda 1 2
    Celda 3 4

    <TABLE BORDER WIDTH="50%">
    <TR><TD>Celda 1</TD><TD>2</TD>
    </TR>
    <TR><TD>Celda 3</TD><TD>4</TD>
    </TR>
    </TABLE>

    El mismo efecto anterior, pero con la tabla dimensionada al 100 %

    WIDTH=100% Celda 2
    3 Celda 4

    <TABLE BORDER WIDTH="100%">
    <TR><TD>WIDTH=100%</TD><TD>Celda 2</TD>
    </TR>
    <TR><TD>3</TD><TD>Celda 4</TD>
    </TR>
    </TABLE>

    Centrado de una tabla en la página

     

    A B C
    D E F
    <CENTER>
    <TABLE BORDER WIDTH="50%">
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>
    </CENTER>

    Tabla forzada al 50 % de la página, conteniendo otra tabla anidada en una de sus celdas. La segunda tabla está forzada a ocupar el 100 % de la celda receptora.

    Item 1 Item 2
    Item A Item B
    Item 4

    <TABLE BORDER WIDTH="50%">
    <TR><TD>Item 1</TD><TD>Item 2</TD>
    </TR>
    <TR><TD>
    <TABLE BORDER WIDTH=100%>
    <TR><TD>Item A</TD><TD>Item B</TD>
    </TR>
    </TABLE>
    </TD>
    <TD>Item 4</TD>
    </TR>
    </TABLE>

    Longitud vertical de las tablas

    Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical. HEIGHT=25%

    HEIGHT=25% Item 2
    3 4

    <TABLE BORDER WIDTH="50%" HEIGHT="25%">
    <TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
    </TR>
    <TR><TD>3</TD><TD>4</TD>
    </TR>
    </TABLE>

    Fondos de colores o gráficos en las tablas

    Una tabla de cuatro celdas. Cada una de un color.

    Texto ROJO Texto VERDE
    Texto AZUL Texto AMARILLO

    <TABLE BORDER>
    <TR><TD BGCOLOR="RED">Texto ROJO</TD>
    <TD BGCOLOR="green">Texto VERDE</TD>
    </TR>

    <TR><TD BGCOLOR="blue">Texto AZUL</TD>
    <TD BGCOLOR="YELLOW">Texto AMARILLO</TD>
    </TR>
    </TABLE>

    En este ejemplo se ha dado color individualmente a cada celda. El atributo BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos globales. Por ejemplo, para hacer toda la tabla en rojo, sólo sería necesario escribir:

     

    <TABLE BORDER BGCOLOR="red">
    ....
    ....
    </TABLE>

    Para toda la línea:

     

    <TABLE BORDER>
    <TR BGCOLOR="red"><TD> texto </TD></TR>
    ....
    </TABLE>

    También se puede usar una imagen como fondo de toda la tabla:

     

    <TABLE BORDER BACKGROUND="yellow_r.gif">
    ....
    ....
    </TABLE>

    De sólo una celda:

     

    <TABLE BORDER>
    <TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR>
    ....
    </TABLE>

    O de toda la fila:

     

    <TABLE BORDER >
    <TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR>
    ....
    </TABLE>

    Bordes de colores en las tablas

    Se puede cambiar el color de los bordes de una tabla, aunque este atributo no funciona igual en todos los navegadores, ya que en el IE el color afecta a todas las líneas de la tabla, y en Mozilla solamente a los bordes exteriores. Por ejemplo:

    Ejemplo de bordes de color rojo
    Ejemplo de bordes de color rojo

     

    <TABLE BORDER=2 bordercolor="red" >
    <TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR>
    <TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR>
    </TABLE>

    Atributos de última generación

    Tabla que solamente muestra los cuatro bordes

    A B C
    D E F

    <TABLE FRAME="border" RULES="none">
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    Tabla que solamente muestra los bordes superior e inferior

    A B C
    D E F

    <TABLE FRAME="hsides" RULES="none">
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    Tabla que solamente muestra los bordes izquierdo y derecho

    A B C
    D E F

    <TABLE FRAME="vsides" RULES="none">
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    Tabla que solamente muestra las líneas de división entre columnas

    A B C
    D E F

    <TABLE FRAME="void" RULES="cols">
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    Tabla que solamente muestra las líneas de división entre filas

    A B C
    D E F

    <TABLE FRAME="void" RULES="rows">
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    Ejemplo de tabla con agrupamientos de columnas y filas

    Ejemplo de grupos de columnas y líneas
    Columna1 Columna2 Columna3 Columna4 Columna5 Columna6 Columna7
    C1L1 C2L1 C3L1 C4L1 C5L1 C6L1 C7L1
    C1L2 C2L2 C3L2 C4L2 C5L2 C6L2 C7L2
    C1L3 C2L3 C3L3 C4L3 C5L3 C6L3 C7L3
    C1L4 C2L4 C3L4 C4L4 C5L4 C6L4 C7L4
    C1L5 C2L5 C3L5 C4L5 C5L5 C6L5 C7L5
    C1L6 C2L6 C3L6 C4L6 C5L6 C6L6 C7L6
    C1L7 C2L7 C3L7 C4L7 C5L7 C6L7 C7L7

    <TABLE border="1" frame="border" rules="groups">
    <CAPTION>Ejemplo de grupos de columnas y líneas</CAPTION>
    <COLGROUP align="center">
    <COLGROUP align="left">
    <COLGROUP align="center" span="2">
    <COLGROUP align="center" span="3">

    <THEAD valign="top">
    <TR>
    <TH>Columna1</TH>
    <TH>Columna2</TH>
    <TH>Columna3</TH>
    <TH>Columna4</TH>
    <TH>Columna5</TH>
    <TH>Columna6</TH>
    <TH>Columna7</TH></TR>
    <TBODY>
    <TR><TD>C1L1<TD>C2L1<TD>C3L1<TD>C4L1<TD>C5L1<TD>C6L1<TD>C7L1</TR>
    <TR><TD>C1L2<TD>C2L2<TD>C3L2<TD>C4L2<TD>C5L2<TD>C6L2<TD>C7L2</TR>
    <TR><TD>C1L3<TD>C2L3<TD>C3L3<TD>C4L3<TD>C5L3<TD>C6L3<TD>C7L3</TR>
    <TR><TD>C1L4<TD>C2L4<TD>C3L4<TD>C4L4<TD>C5L4<TD>C6L4<TD>C7L4</TR>
    <TBODY>
    <TR><TD>C1L5<TD>C2L5<TD>C3L5<TD>C4L5<TD>C5L5<TD>C6L5<TD>C7L5</TR>
    <TR><TD>C1L6<TD>C2L6<TD>C3L6<TD>C4L6<TD>C5L6<TD>C6L6<TD>C7L6</TR>
    <TFOOT>
    <TR><TD>C1L7<TD>C2L7<TD>C3L7<TD>C4L7<TD>C5L7<TD>C6L7<TD>C7L7</TR>
    </TABLE>

    Como puedes ver, existe un agrupamiento desde la línea 1 a la 4, y otro de la 5 a la 6. A su vez, las columnas 3 y 4 forman un grupo, y la 5, 6 y 7 otro.

    Los dos agrupamientos de columnas se definen con las instrucciones:

    <COLGROUP align="center" span="2">
    <COLGROUP align="center" span="3">

    Hay cuatro grupos de filas: La que aparece debajo de las cabeceras la escribe <THEAD> Las dos líneas que separan los grupos de filas centrales las producen las dos instrucciones <TBODY>, Y la última la produce <TFOOT>. Por supuesto, no es obligado que esten todas, puedes poner solamente las que necesites. Todo esto funciona solamente si en la definición de la tabla se incluye el atributo rules="groups"


    Tablas con efectos compatibles con todos los navegadores...

    Como ya has podido ver, muchos de los efectos de última generación mostrados no funcionan igual, o no funcionan en absoluto con todos los navegadores. ¿Qué hacer entonces para conseguir tablas cuyas líneas de bordes se vean siempre bien? Pues la única solución es usar una tabla sin bordes. Sí, ya sé que lo que buscas no es eso, pero si utilizando atributos de tabla para poner líneas de bordes donde queramos hay problemas con algunos navegadores, la solución es utilizar otros recursos del HTML que sean admitidos por todos. No es ninguna solución mágica: solamente tienes que crear un gráfico con un punto (preferiblemente cuadrado) del color y grosor que quieras dar a tus líneas... y listo.

    Supongamos que queremos conseguir con una tabla representar un recuadro con bordes rojos. Para ello, utilizando cualquier editor de gráficos creamos un fichero que contenga un punto de color rojo. Solamente uno, será casi invisible. No necesitamos más. Le llamaremos rojo.gif

    Ejemplo de recuadro con ángulos rectos.

    Y este sería del código necesario:

    <table width="300" height="50" 
    cellspacing="0" cellpadding="0" border="0" bgcolor="#6a7da5" align="center">
    <tr>
    <td rowspan="3" width="1" height="50">
    <img src="rojo.gif" width="1px" height="50" border="0" alt=""></td>
    <td colspan="4" height="1">
    <img src="rojo.gif" width="300" height="1" border="0" alt=""></td>
    <td rowspan="3" width="1">
    <img src="rojo.gif" width="1px" height="50" border="0" alt=""></td>
    </tr>
    <tr>
    <td colspan="4" align="center" height="48">
    <font color="white"><b>Ejemplo de recuadro con ángulos rectos.</b></font></td>
    </tr>
    <tr>
    <td colspan="4" height="1">
    <img src="rojo.gif" width="300" height="1" border="0" alt=""></td>
    </tr>
    </table>

    Como puedes ver, el truco consiste en definir celdas alrededor de la celda que lleva el texto. Estas celdas que rodean a la principal solamente contienen el fichero gráfico con el punto. Para conseguir que aparezcan las líneas, sólo hay que "estirar" el punto contenido en nuestro fichero gráfico rojo.gif. Esto nos permite "dibujar" las líneas que se quieran y donde se quieran, sin problemas de compatibilidad, ya que estos atributos del elemento <IMG> son completamente estandarizados (por lo menos de momento). Fíjate en que además de atributos propios del elemento IMG también se utiliza una instrucción de estilo: width="1px" para asegurar un grosor mínimo de la línea. Este es el aspecto de la misma tabla con los bordes visibles:

    Vertical izquierda Horizontal arriba Vertical derecha
    Ejemplo de recuadro con ángulos rectos.
    Horizontal abajo

     

    --------------------

    Utilizando una técnica parecida, también se pueden conseguir recuadros con las esquinas redondeadas. Al igual que en el anterior ejemplo, es necesario tener un gráfico previamente, pero este nos dará algo más de trabajo. Con cualquier editor de gráficos (el "Paint" de Windows, por ejemplo) generas un círculo del color que quieras, y con el borde transparente o de otro color. A continuación lo cortas en cuatro porciones, como una tarta, y guardas cada trozo con un nombre cualquiera, por ejemplo, angulo1, angulo2, etc. Así

     

     
      Recuadro con ángulos redondeados  
     

    Y este es el código necesario:

     

    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td bgcolor="#DDE0FC" width="20"><img src="angulo1.gif" width="20" height="20"></td>
    <td bgcolor="#DDE0FC"> </td>
    <td bgcolor="#DDE0FC" width="20"><img src="angulo2.gif" width="20" height="20"></td>
    </tr>
    <tr>
    <td bgcolor="#DDE0FC" width="20"> </td>
    <td bgcolor="#DDE0FC">Recuadro con ángulos redondeados</td>
    <td bgcolor="#DDE0FC" width="20"> </td>
    </tr>
    <tr>
    <td bgcolor="#DDE0FC" width="20"><img src="angulo4.gif" width="20" height="20"></td>
    <td bgcolor="#DDE0FC"> </td>
    <td bgcolor="#E5E7FD" width="20"><img src="angulo3.gif" width="20" height="20"></td>
    </tr>
    </table>

    Como puedes ver, para que el efecto sea completo hay que dar el mismo color que tienen los gráficos como fondo de las celdas. Estos son los cuatro gráficos necesarios:

     

    angulo1.gif   angulo2.gif

    angullo4.gif   angulo3.gif 






    Añadir comentario acerca de esta página:
    Tu nombre:
    Tu dirección de correo electrónico:
    Tu página web:
    Tu mensaje:

     
      Hoy habia 6832 visitantes (14343 clics a subpáginas) ¡Aqui en esta página!  
     
    => ¿Desea una página web gratis? Pues, haz clic aquí! <=
    LA