informaticaPC

Tutorial de HTML

Tablas


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

Crear una tabla

Las tablas se usan principalmente para mostrar datos tabulados, y aunque se suelen usar también para maquetar la página web se recomienda usar la etiqueta <div> para ello.

Para crear una tabla se usa la etiqueta HTML <table>, con <tr> y con <td> las columnas.

Veamos sus atributos más importantes (aparte de los estándar):


<table
    align: alineación de la tabla (center | left | right). Sólo en modo transitional.
    background: imagen de fondo de la tabla.
    bgcolor: color de fondo (nombre del color | hexadecimal). Sólo en modo transitional.
    border: grosor del borde (en píxels).
    bordercolor: color del borde.
    cellpadding: márgenes interiores entre el borde de la celda y su contenido (en píxels).
    cellspacing: define el margen entre las celdas, y de éstas con respecto al borde (en píxels).
    frame: borde de la tabla (above | below | border | box | hsides | lhs | rhs | void | vsides)
    rules: borde de las celdas (all | cols | groups | none | rows).
    height: alto de la tabla (en píxels o porcentaje).
    width: ancho de la tabla (en píxels o porcentaje).
>
</table>

* NOTA: No todos los navegadores web soportan un porcentaje como valor en cellspacing y cellpadding.

* NOTA: frame y rules no se ven igual en todos los navegadores web.


<tr
    align: alineación horizontal del contenido de las celdas en la fila (center | justify | left | right).
    bgcolor: color de fondo (nombre del color | hexadecimal). Sólo en modo transitional.
    bordercolor: color del borde.
    valign: alineación vertical del contenido de las celdas en la fila (baseline | bottom | middle | top).
>
</tr>


<td
    align: alineación horizontal del contenido de la celda (center | justify | left | right).
    background: imagen de fondo de la tabla.
    bordercolor: color del borde.
    bgcolor: color de fondo (nombre del color | hexadecimal). Sólo en modo transitional.
    colspan: número de columnas que se desean unir.
    height: alto de la columna (píxels). Sólo en modo transitional.
    nowrap: impide que el texto se ajuste automáticamente dividiéndose en filas, en caso de que el ancho de
    la celda no sea suficiente para mostrarlo. Sólo en modo Transitional.
    rowspan: número de filas que se desean unir.
    valign: alineación vertical del contenido de la celda (baseline | bottom | middle | top).
    width: ancho de la tabla (en píxels o porcentaje).
>
</td>

En el siguiente código HTML de ejemplo creamos una tabla de 400 píxels de ancho, con dos filas y tres columnas en cada una de ellas, y un borde:

<html>
    <head>
        <title>Mi primera página WEB: tablas</title>
    </head>
    <body>
        <table border="1" width="400">
            <tr>
                <td>Fila 1 Columna 1</td>
                <td>Fila 1 Columna 2</td>
                <td>Fila 1 Columna 3</td>
            </tr>
            <tr>
                <td>Fila 2 Columna 1</td>
                <td>Fila 2 Columna 2</td>
                <td>Fila 2 Columna 3</td>
            </tr>
        </table>
    </body>
</html>

Descargar ejemplo

Tablas

Por último, indicar que poniendo la etiqueta HTML <caption> a continuación de <table> podremos dar un título a la tabla:


<caption
    align: lugar el que se mostrará el título de la tabla (bottom | top). Sólo en modo transitional.
>
</caption>

Información

Los atributos align, bgcolor, height, width y nowrap se encuentran desactualizadas en HTML 4: se recomienda usar Hojas de Estilo CSS en su lugar.

Agrupar por filas

Otra forma de crear una tabla es usando las etiquetas <thead>, <tfoot> y <tbody>, para agrupar las celdas que compondrán encabezado, pie y cuerpo de la tabla, respectivamente.


    align: alineación de la tabla (center | left | right). Sólo en modo transitional.
    bgcolor: color de fondo (nombre del color | hexadecimal). Sólo en modo transitional.
    valign: alineación vertical del contenido de las celdas en la fila (baseline | bottom | middle | top).

También podemos definir un título para la tabla usando la etiqueta HTML <caption> (observa también cómo en el siguiente ejemplo usamos la etiqueta <th> en lugar de <td>, para crear las celdas de encabezados. Ambas admiten los mismos atributos):

<html>
    <head>
        <title>Mi primera página WEB: tablas</title>
    </head>
    <body>
        <table border="1">
          <caption>I. Tabla de ejemplo</caption>

          <thead>
            <tr>
              <th>AÑO</th>
              <th>VENTAS</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>2010</td>
              <td>100.000</td>
            </tr>
            <tr>
              <td>2011</td>
              <td>110.000</td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td>TOTAL</td>
              <td>210.000</td>
            </tr>
          </tfoot>

        </table>
    </body>
</html>

Descargar ejemplo

Tablas

Más información

Relacionado: [ Tablas en CSS ]

Agrupar por columnas

También es posible agrupar columnas utilizando <colgroup> y <col>, pero dado que la mayoría de los atributos más importantes de dichas tags HTML no están soportados por los navegadores web más importantes, no merece la pena explicarlas con más detalle.

Ejemplos de tablas

<html>
    <head>
        <title>Mi primera página WEB: tablas</title>
    </head>
    <body>
        <table width="340" height="300" bgcolor="gray" border="2" bordercolor="red">
            <tr>
                <td>Fila 1 Columna 1</td>
                <td>Fila 1 Columna 2</td>
                <td>Fila 1 Columna 3</td>
            </tr>
            <tr>
                <td>Fila 2 Columna 1</td>
                <td>Fila 2 Columna 2</td>
                <td>Fila 2 Columna 3</td>
            </tr>
        </table>
    </body>
</html>

Descargar ejemplo

Tablas

En este otro ejemplo observa cómo hemos definido las filas y columnas de la tabla, utilizando atributos como colspan (para unir columnas horizontalmente) y nowrap (para que el texto no se ajuste al ancho de la celda), entre otros:

<html>
    <head>
        <title>Mi primera página WEB: tablas</title>
    </head>
    <body>
        <table width="500" border="1" bgcolor="lightgray">
            <tr height="80">
                <td width="300" rowspan="2">Fila 1 Columna 1</td>
                <td>Fila 1 Columna 2</td>
                <td colspan="2">Fila 1 Columna 3</td>
            </tr>
            <tr height="100">
                <td>Fila 2 Columna 1</td>
                <td>Fila 2 Columna 2</td>
                <td nowrap>Fila 2 Columna 3 con nowrap</td>
            </tr>
        </table>
    </body>
</html>

Descargar ejemplo

Tabla

Fíjate en el uso de rowspan y colspan para unir columnas, así como de nowrap para que el texto no se ajuste al tamaño de la celda dividiéndose en filas.

Primera página Anterior Anterior Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso