Guía práctica de HTML

  • Ejemplos de Tablas
  • Regreso a Guía de HTML


    Tabla de tres columnas y dos filas.

    <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>
    A B C
    D E F


    Dos ejemplos de ROWSPAN.

    1.- Tabla con la celda 2 expandida dos filas.

    <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

    2.- Tabla con la celda 1 expandida dos filas.

    <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>

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


    Ejemplo de COLSPAN

    Tabla con la celda 2 expandida dos columnas.

    <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>
    Item 1 Item 2
    Item 3 Item 4 Item 5


    Tabla con HEADERS <TH ...>

    <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>
    Head1 Head2 Head3
    A B C
    D E F


    Ejemplo de COLSPAN más HEADERS que se expanden dos columnas.

    <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>
    Head1 Head2
    A B C D
    E F G H


    Tabla de múltiples HEADERS, más COLSPAN, con un par expandido en dos columnas.

    <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>
    Head1 Head2
    Head 3 Head 4 Head 5 Head 6
    A B C D
    E F G H


    Ejemplos de tablas con HEADERS laterales

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


    Ejemplos de HEADERS laterales, más ROWSPAN, con un HEADER expandiéndose en dos filas.

    <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>
    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


    Tabla de ejemplo, combinando todo lo anterior

    <TABLE BORDER=1>
    <TR> <TH ROWSPAN=4>Promedio</TH>
    </TR>
    <TR>
    <TD COLSPAN=2> <TD> <TH>Altura</TH> <TH>Peso</TH>
    </TR>
    <TR> <TH ROWSPAN=2>Género</TH>
    <TH>Hombres</TH> <TD>1.9</TD> <TD>0.003</TD>
    </TR>
    <TR> <TH>Mujeres</TH> <TD>1.7</TD> <TD>0.002</TD>
    </TR>
    </TABLE>
    Promedio
      AlturaPeso
    Género Hombres1.90.003
    Mujeres1.70.002


    Utilizando márgenes y bordes

    Una tabla sin BORDES

    <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>
    Item 1 Item 2 Item 3
    Item 4 Item 5

    Tabla con BORDE de 10

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


    CELLPADDING y CELLSPACING

    1.- La siguiente tabla se hará usando CELLPADDING, pero no CELLSPACING

    <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

    2.- La siguiente tabla se hará usando CELLSPACING, pero no CELLPADDING

    <TABLE BORDER CELLSPACING=10 CELLPADDING=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

    3.- La siguiente tabla se hará usando CELLSPACING y CELLPADDING

    <TABLE BORDER CELLSPACING=5 CELLPADDING=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

    CELLPADDING establece la distancia entre el borde de la celda y el texto. CELLSPACING determina la separación entre las dos líneas del borde.


    Tabla con múltiples líneas de texto en las celdas.

    <TABLE BORDER>
    <TR>
    <TH>Enero</TH>
    <TH>Febrero</TH>
    <TH>Marzo</TH>
    </TR>
    <TR>
    <TD>Esta es la celda 1</TD>
    <TD>Celda 2</TD>
    <TD>Otra celda,<br> celda 3</TD>
    </TR>
    <TR>
    <TD>Celda 4</TD>
    <TD>y ahora esta<br>es celda 5</TD>
    <TD>Celda 6</TD>
    </TR>
    </TABLE>
    Enero Febrero Marzo
    Esta es la celda 1 Celda 2 Otra celda,
    celda 3
    Celda 4 y ahora esta
    es celda 5
    Celda 6
    Como la tabla y las celdas carecen de ancho (width) el navegador determina éste según la longitud del texto en cada celda.


    ALIGN=left|right|center

    Tabla que muestra diferentes posibilidades de alineamiento de texto.

    NOTA : este formato se puede aplicar a celdas individuales o a todas las filas.

    <TABLE BORDER=1 WIDTH=100%>
    <TR>
    <TH>Enero</TH>
    <TH>Febrero</TH>
    <TH>Marzo</TH>
    </TR>
    <TR ALIGN=center>
    <TD>Celda 1</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 izquierda</TD>
    </TR>
    </TABLE>
    Enero Febrero Marzo
    Celda 1 Celda 2 Otra celda
    Celda 3
    Alineado a la derecha Alineado al centro Por defecto
    Alineado a la izquierda


    VALIGN=top|bottom|middle

    Tabla que muestra diferentes posibilidades de alineamiento vertical de texto y alineamiento dentro de las celdas de la tabla.

    NOTA : este formato se puede aplicar a celdas individuales o a todas las filas.

    <TABLE BORDER=1 WIDTH=100%>
    <TR>
    <TH>Enero</TH>
    <TH>Febrero</HT>
    <TH>Marzo</TH>
    </TR>
    <TR>
    <TD>Celda 1</TD>
    <TD>y esta es<br>la celda 2</TD>
    <TD>Celda 3</TD>
    </TR>
    <TR HEIGHT=50>
    <TD VALIGN=top>Alineado arriba</TD>
    <TD VALIGN=bottom>Alineado abajo</TD>
    <TD>Por defecto,<br>centro</TD>
    </TR>
    </TABLE>
    Enero Febrero Marzo
    Celda 1 y esta es
    la celda 2
    Celda 3
    Alineado arriba Alineado abajo Por defecto centro


    CAPTION=top|bottom [TÍTULO]

    1.- Tabla con CAPTION arriba.

    <TABLE BORDER> <CAPTION ALIGN=top><B>CAPTION [TÍTULO] arriba</B></CAPTION>
    <TR>
    <TH>January</TH>
    <TH>February</TH>
    <TH>March</TH>
    </TR>
    <TR>
    <TD>This is cell 1</TD>
    <TD>Cell 2</TD>
    <TD>Another cell,<br> cell 3</TD>
    </TR>
    </TABLE>
    CAPTION [TÍTULO] arriba
    January February March
    This is cell 1 Cell 2 Another cell,
    cell 3

    2.- Tabla con CAPTION abajo.

    <TABLE BORDER>
    <CAPTION ALIGN=bottom><B>CAPTION [TÍTULO] abajo</B></CAPTION>
    <TR>
    <TH>January</TH>
    <TH>February</TH>
    <TH>March</TH>
    </TR>
    <TR>
    <TD>This is cell 1</TD>
    <TD>Cell 2</TD>
    <TD>Another cell,<br> cell 3</TD>
    </TR>
    </TABLE>
    CAPTION [TÍTULO] abajo
    January February March
    This is cell 1 Cell 2 Another cell,
    cell 3


    Tablas ANIDADAS

    Tabla anidada dentro de otra tabla. La tabla ABCD está dentro de la tabla 123456.

    <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>
    1 2 3
    A B
    C D
    4 5 6


    ANCHO de la tablas y ubicación:

    Diferentes anchos de tabla.

    1.- Tabla con ancho de 50% (del ancho de la página).

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

    2.- Observe que si las celdas tienen contenidos diferentes, esto afecta el ancho de cada celda en relación con el ancho de la tabla.

    <TABLE BORDER WIDTH="50%">
    <TR> <TD>Esta tiene texto que amplía el ancho de la celda.</TD><TD>2</TD>
    </TR>
    <TR> <TD>3</TD><TD>4</TD>
    </TR>
    </TABLE>
    Esta tiene texto que amplía el ancho de la celda.2
    34

    3.- También se puede colocar el ancho de la tabla en pixeles, en este caso 300:

    <TABLE BORDER WIDTH="300">
    <TR> <TD>Width=300</TD><TD>2</TD>
    </TR>
    <TR> <TD>3</TD><TD>4</TD>
    </TR>
    </TABLE>
    Width=3002
    34

    Centrando una tabla

    <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>

    A B C
    D E F

    ANCHO (WIDTH) de tabla en tablas anidadas

    Se observa dos tablas anidadas, utilizando el atributo de ancho de la tabla inicial para determinar el ancho de la segunda tabla.

    <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>
    Item 1Item 2
    Item AItem B
    Item 4


    ALTURA (HEIGHT)

    Tabla con altura de 50% (referente a la parte de la página que se ve.)

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

    También se puede colocar la altura de la tabla en pixeles, en este caso 100:

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


    Esta Guía fué preparada por Carlos Crismatt Mouthon E-mail: crismatt@hotmail.com