Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.
Tabla de contenidos
Bypass table of contentsEl elemento HTML table inserta una tabla en el documento. Las tablas son una característica muy útil y poderosa del lenguaje HTML, ya que brindan una solución a la hora de insertar cuanlquier tipo de información tabulada en un documento.
Este elemento es el principal contenedor de una tabla, pero muchos otros son necesarios para definir una tabla correctamente. Otros elementos que constituyen a una tabla son:
Una tabla HTML puede ser básicamente considerada como un conjunto de filas que contienen celdas, pero no al revés. Esto se debe a que el elemento HTML tr está diseñado para contener elementos de celdas (HTML td y HTML th).
Una tabla puede ser dividida horizontalmente, definiendo las siguientes secciones:
Además, las columnas pueden ser temáticamente agrupadas mediante el uso del elemento HTML colgroup.
Finalment, el elemento HTML col puede ser usado para aplicar atributos de estilo a todas las celdas en un número consecutivo de columnas al mismo tiempo.
Nota que el atributo "align" de este elemento ha sido desaprobado en HTML 4.01 en favor de las hojas de estilo. Su uso ya no es recomendable.
Para expandir esta información lee el tutorial "Tablas en HTML".
El siguiente ejemplo muestra una tabla simple con el contenedor (HTML table element), filas (elemento HTML tr) y las celdas en cada fila (elemento HTML td). Un título (atributo "summary" del elemento HTML table) también es provisto.
| Nombre | 4.0 | 5.0 | 6.0 |
|---|---|---|---|
| index.html | Ok | Ok | Ok |
| fullfunc.html | Malo | Parcial | Ok |
| nofunc.html | Ok | Ok | Ok |
| panel.html | Malo | Parcial | Ok |
En el próximo ejemplo, la tabla es ampliada para incluir otro navegador. En este caso, las columans son agrupadas temáticamente (Internet explorer y Mozilla Firefox). Un encabezado (elemento HTML thead) y un cuerpo (elemento HTML tbody) también son definidos.
Muchas otras características son usadas en este ejemplo que no están descritas en esta página. Puedes aprender sobre ellas leyendo las referencias de los otros elementos de la tabla.
| Navegador | Internet Explorer | Mozilla Firefox | |||
|---|---|---|---|---|---|
| Nombre | 4.0 | 5.0 | 6.0 | 2.0 | 3.0 |
| index.html | Ok | Ok | Ok | Ok | Ok |
| fullfunc.html | Malo | Parcial | Parcial | ||
| nofunc.html | Ok | Ok | Ok | ||
| panel.html | Malo | Parcial | Parcial | ||
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).
El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.
Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").
Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.
Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".
El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.
Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".
Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es válido.
Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
Provee un resumen de la estructura y/o propósito de la tabla. Se supone que la información en este atributos expande el contenido del elemento HTML caption.
Los resúmenes deben ser tan cortos, precisos y descriptivos como sea posible, ya que pueden ser claves a la hora de ayudar a personas con discapacidades visuales a interpretar el contenido de la tabla.
Este atributo especifica el ancho deseado de toda la tabla. Si el mismo no es especificado de alguna forma, los agentes de usuario determinan su valor.
especifica qué lados de recuadro alrededor de la tabla serán mostrados. Los valores posibles son (insensibles a mayúsculas/minúsculas):
Especifica qué reglas deben ser mostradas entre las celdas en una tabla. Los valores posibles son (insensibles a mayúsculas/minúsculas):
Define el acho del border de una tabla como número de píxeles.
Define el ancho del espacio entre que se dejará entre las celdas. También se refiere al espacio entre el borde de una tabla y las celdas adyacentes.
| Cell 1 | Cell 2 | Cell 3 |
Define el ancho del espacio que se dejará entre el contenido de las celdas y sus bordes.
| Cell 1 | Cell 2 | Cell 3 |
Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.
Decide la alineación horizontal de la tabla. Los valores posibles son (insensibles a mayúsculas/minúsculas):
Ve a la lista completa de eventos en HTML.
Diseño y desarrollo: Latitud29.com