Ir directamente al contenido de esta página

codexexempla.org

Elementos de tabla

Tabla de contenidos

  1. caption
  2. col
  3. colgroup
  4. table
  5. tbody
  6. td
  7. tfoot
  8. th
  9. thead
  10. tr

caption

Descripción
Define el título para una tabla.
Atributos
¿Vacío?
No.
Modelo de contenido
Puede contener texto y/o cualquier número de elementos en línea.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Notas
Debe incluirse inmediatamente después de la apertura del elemento table y antes de cualquier otro elemento que ésta contenga.

col

Descripción
Especifica una columna.
Atributos
  • align: Especifica la alineación horizontal de los contenidos de las celdas de la columna:
    • left: Alinea el contenido a la izquierda.
    • center: Centra el contenido.
    • right: Alinea el contenido a la derecha.
    • justify: Justifica el texto.
    • char: Alinea el texto tomando como referente un caracter. Si no se especifica ninguno por medio del atributo char, el valor por defecto es el caracter que se emplee para indicar los decimales de una cifra, según el idioma especificado para el documento.
  • char: Un caracter que se emplea como eje para alinear los contenidos de las celdas de la columna.
  • charoff: Un número natural que representa una longitud en píxeles o un porcentaje para el desplazamiento con respecto al margen izquierdo —para los idiomas con un sentido natural de izquierda a derecha— o derecho —para los idiomas con un sentido natural de derecha a izquierda— de la primera ocurrencia del caracter que se emplea como eje de alineación. Si una línea no contiene tal caracter, se sitúa al final de esa posición.

    Ilustración del párrafo anterior
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • id: Un identificador.
  • span: Un número natural que indica la cantidad de celdas por las que se extiende la columna; su valor por defecto es 1.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • valign: Especifica la alineación vertical de los contenidos de las celdas de la columna:
    • top: El contenido comienza en la parte superior de su celda.
    • middle: El contenido se centra respecto al eje horizontal de su celda.
    • bottom: La parte inferior del contenido se sitúa en la perte inferior de la celda.
    • baseline: El contenido de cada celda se alinea con la línea de base más baja de los contenidos de las celdas de la misma fila. Veamos la imagen siguiente:

      Comparativa de los valores top y baseline de valign

      Para las celdas de la primera fila, tendríamos valign="top", y marcadas con azul sus líneas de base. Por el tamaño de fuente de cada celda, éstas no coinciden. Para la fila de abajo, con valign="baseline", los contenidos se alinean verticalmente con la línea de base de la tercera celda, que es la más baja puesto que los caracteres tienen un cuerpo mayor.

  • width: Un número natural que representa una longitud en píxeles o un porcentaje, y que especifica el ancho de la columna.
  • xml:lang: Un código de idioma.
¿Vacío?
Sí.
Modelo de contenido
No aplicable.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

colgroup

Descripción
Marca un grupo de columnas.
Atributos
  • align: Especifica la alineación horizontal de los contenidos de las celdas del grupo de columnas:
    • left: Alinea el contenido a la izquierda.
    • center: Centra el contenido.
    • right: Alinea el contenido a la derecha.
    • justify: Justifica el texto.
    • char: Alinea el texto tomando como referente un caracter. Si no se especifica ninguno por medio del atributo char, el valor por defecto es el caracter que se emplee para indicar los decimales de una cifra, según el idioma especificado para el documento.
  • char: Un caracter que se emplea como eje para alinear los contenidos de las celdas del grupo de columnas.
  • charoff: Un número natural que representa una longitud en píxeles o un porcentaje para el desplazamiento con respecto al margen izquierdo —para los idiomas con un sentido natural de izquierda a derecha— o derecho —para los idiomas con un sentido natural de derecha a izquierda— de la primera ocurrencia del caracter que se emplea como eje de alineación. Si una línea no contiene tal caracter, se sitúa al final de esa posición. Recomiendo echar un vistazo a la ilustración de este atributo para col.
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • id: Un identificador.
  • span: Un número natural que indica la cantidad de celdas por las que se extiende la columna; su valor por defecto es 1.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • valign: Especifica la alineación vertical de los contenidos de las celdas del grupo de columnas:
    • top: El contenido comienza en la parte superior de su celda.
    • middle: El contenido se centra respecto al eje horizontal de su celda.
    • bottom: La parte inferior del contenido se sitúa en la perte inferior de la celda.
    • baseline: El contenido de cada celda se alinea con la línea de base más baja de los contenidos de las celdas de la misma fila. Recomiendo leer la descripción de este atributo para col.
  • width: Un número natural que representa una longitud en píxeles o un porcentaje, y que especifica el ancho del grupo de columnas.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Puede contener cualquier número de elementos col. También puede presentarse vacío, y agrupar columnas por medio de su atributo span.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

table

Descripción
Crea una tabla de datos.
Atributos
  • border: Un número natural que representa el grosor en píxeles del marco de la tabla.
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • frame: Indica los lados del marco de una tabla que deben ser visibles:
    • void: Ninguno de los cuatro lados.
    • above: Sólo el lado superior.
    • below: Sólo el lado inferior.
    • hsides: Los lados horizontales.
    • lhs: Sólo el lado izquierdo.
    • rhs: Sólo el lado derecho.
    • vsides: Los lados verticales.
    • box: Los cuatro lados.
    • border: Igual que box.
  • id: Un identificador.
  • rules: Especifica las reglas —líneas de separación— entre celdas:
    • none: No debe aparecer regla alguna.
    • groups: Deben presentarse reglas entre grupos, tanto de columnas como de filas.
    • rows: Deben presentarse reglas entre las filas.
    • cols: Deben presentarse reglas entre las columnas.
    • all: Deben presentarse reglas entre todas las filas y todas las columnas.
  • style: Una o varias declaraciones de CSS.
  • summary: Un texto plano que resume el contenido de la tabla.
  • title: Un texto plano.
  • width: Un número natural que representa una longitud en píxeles o un porcentaje, y que especifica el ancho de la tabla.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Puede contener un elemento caption —pero sólo uno—, puede contener cualquier número de elementos colgroup y/o col, puede contener un elemento thead —pero sólo uno—, un elemento tfoot —pero sólo uno—, y debe contener al menos un elemento tbody o un elemento tr, pero no tbody y tr como hijos simultáneamente. Este código es correcto:

    <table>
        <tbody>
            <tr><td><td><td></td></tr>
            <tr><td><td><td></td></tr>
        </tbody>
    </table>
                    
Lo mismo que éste:

    <table>
        <tr><td><td><td></td></tr>
        <tr><td><td><td></td></tr>
    </table>
                    
Pero éste no:

    <table>
        <tbody>
            <tr><td><td><td></td></tr>
        </tbody>
        <tr><td><td><td></td></tr>
    </table>
                    
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

tbody

Descripción
Delimita un grupo de filas dentro del cuerpo de datos de una tabla.
Atributos
  • align: Especifica la alineación horizontal de los contenidos de las celdas del grupo de filas:
    • left: Alinea el contenido a la izquierda.
    • center: Centra el contenido.
    • right: Alinea el contenido a la derecha.
    • justify: Justifica el texto.
    • char: Alinea el texto tomando como referente un caracter. Si no se especifica ninguno por medio del atributo char, el valor por defecto es el caracter que se emplee para indicar los decimales de una cifra, según el idioma especificado para el documento.
  • char: Un caracter que se emplea como eje para alinear los contenidos de las celdas del grupo de filas.
  • charoff: Un número natural que representa una longitud en píxeles o un porcentaje para el desplazamiento con respecto al margen izquierdo —para los idiomas con un sentido natural de izquierda a derecha— o derecho —para los idiomas con un sentido natural de derecha a izquierda— de la primera ocurrencia del caracter que se emplea como eje de alineación. Si una línea no contiene tal caracter, se sitúa al final de esa posición. Recomiendo echar un vistazo a la ilustración de este atributo para col.
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • id: Un identificador.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Debe contener uno o más elementos tr.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Notas
A diferencia de thead y tfoot, se puede emplear más de un tbody dentro de una misma tabla, para establecer grupos de filas significativos al igual que los que se pueden crear para las columnas por medio de colgroup. El siguiente código es correcto:

    <table>
        <tbody>
            <tr><td><td><td></td></tr>
            <tr><td><td><td></td></tr>
        </tbody>
        <tbody>
            <tr><td><td><td></td></tr>
            <tr><td><td><td></td></tr>
        </tbody>
    </table>
                    

td

Descripción
Define una celda de datos dentro de una tabla.
Atributos
  • abbr: Un texto plano que resume el contenido de la celda. Su finalidad es reducir la verbosidad del discurso para un usuario que emplee un lector de pantalla para leer la tabla.
  • align: Especifica la alineación horizontal de su contenido:
    • left: Alinea el contenido a la izquierda.
    • center: Centra el contenido.
    • right: Alinea el contenido a la derecha.
    • justify: Justifica el texto.
    • char: Alinea el texto tomando como referente un caracter. Si no se especifica ninguno por medio del atributo char, el valor por defecto es el caracter que se emplee para indicar los decimales de una cifra, según el idioma especificado para el documento.
  • axis: Una cadena de caracteres que relaciona conceptualmente ciertas celdas para una posible consulta del usuario, y cuyo significado no se corresponde excatmente con la información que proporcionan los encabezados. Como es un poco confuso, aquí dejo el ejemplo de la especificación para axis (inglés).
  • char: Un caracter que se emplea como eje para alinear los contenidos de las celdas del grupo de filas.
  • charoff: Un número natural que representa una longitud en píxeles o un porcentaje para el desplazamiento con respecto al margen izquierdo —para los idiomas con un sentido natural de izquierda a derecha— o derecho —para los idiomas con un sentido natural de derecha a izquierda— de la primera ocurrencia del caracter que se emplea como eje de alineación. Si una línea no contiene tal caracter, se sitúa al final de esa posición. Recomiendo echar un vistazo a la ilustración de este atributo para col.
  • class: Uno o más identificadores de clase.
  • colspan: Un número natural que indica la cantidad de columnas por las que se extiende la celda; su valor por defecto es 1.
  • dir: Un sentido de lectura.
  • headers: Una serie de valores separados por espacios que coinciden con los id de otras celdas y que aportan la información de contexto necesaria para interpretar el valor de la celda. Se verá más claro en «Tablas accesibles».
  • id: Un identificador.
  • rowspan: Un número natural que indica la cantidad de filas por las que se extiende la celda; su valor por defecto es 1.
  • scope1: Indica las celdas para las que puede ser relevante el contenido de la celda actual:
    • row: Se refiere a las celdas de la fila en la que se incluye.
    • col: Se refiere a las celdas de la columna en la que se incluye.
    • rowgroup: Se refiere a las celdas del grupo de columnas en el que se incluye.
    • colgroup: Se refiere a las celdas del grupo de filas en el que se incluye.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • valign: Especifica la alineación vertical de los contenidos de las celdas del grupo de filas:
    • top: El contenido comienza en la parte superior de su celda.
    • middle: El contenido se centra respecto al eje horizontal de su celda.
    • bottom: La parte inferior del contenido se sitúa en la perte inferior de la celda.
    • baseline: El contenido de cada celda se alinea con la línea de base más baja de los contenidos de las celdas de la misma fila. Recomiendo leer la descripción de este atributo para col.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Puede contener texto y/o cero o más encabezados, elementos de bloque, elementos de línea y listas.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

tfoot

Descripción
Define una o varias filas dentro de una tabla como su pie.
Atributos
  • align: Especifica la alineación horizontal de los contenidos de las celdas del grupo de filas:
    • left: Alinea el contenido a la izquierda.
    • center: Centra el contenido.
    • right: Alinea el contenido a la derecha.
    • justify: Justifica el texto.
    • char: Alinea el texto tomando como referente un caracter. Si no se especifica ninguno por medio del atributo char, el valor por defecto es el caracter que se emplee para indicar los decimales de una cifra, según el idioma especificado para el documento.
  • char: Un caracter que se emplea como eje para alinear los contenidos de las celdas del grupo de filas.
  • charoff: Un número natural que representa una longitud en píxeles o un porcentaje para el desplazamiento con respecto al margen izquierdo —para los idiomas con un sentido natural de izquierda a derecha— o derecho —para los idiomas con un sentido natural de derecha a izquierda— de la primera ocurrencia del caracter que se emplea como eje de alineación. Si una línea no contiene tal caracter, se sitúa al final de esa posición. Recomiendo echar un vistazo a la ilustración de este atributo para col.
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • id: Un identificador.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Debe contener uno o más elementos tr.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Notas
El elemento tfoot es opcional, pero si aparece sólo puede hacerlo una vez, e inmediatamente después de thead y antes del/los tbody.
En la impresión de una tabla, debería aparecer en cada página impresa que sea necesaria para presentar la misma.

th

Descripción
Define una celda como un encabezado de fila o columna.
Atributos
  • abbr: Un texto plano que resume el encabezado. Su finalidad es reducir la verbosidad del discurso para un usuario que emplee un lector de pantalla para leer la tabla.
  • align: Especifica la alineación horizontal de su contenido:
    • left: Alinea el contenido a la izquierda.
    • center: Centra el contenido.
    • right: Alinea el contenido a la derecha.
    • justify: Justifica el texto.
    • char: Alinea el texto tomando como referente un caracter. Si no se especifica ninguno por medio del atributo char, el valor por defecto es el caracter que se emplee para indicar los decimales de una cifra, según el idioma especificado para el documento.
  • axis: Una cadena de caracteres que relaciona conceptualmente ciertas celdas para una posible consulta del usuario, y cuyo significado no se corresponde excatmente con la información que proporcionan los encabezados. Como es un poco confuso, aquí dejo el ejemplo de la especificación para axis (inglés).
  • char: Un caracter que se emplea como eje para alinear los contenidos de las celdas del grupo de filas.
  • charoff: Un número natural que representa una longitud en píxeles o un porcentaje para el desplazamiento con respecto al margen izquierdo —para los idiomas con un sentido natural de izquierda a derecha— o derecho —para los idiomas con un sentido natural de derecha a izquierda— de la primera ocurrencia del caracter que se emplea como eje de alineación. Si una línea no contiene tal caracter, se sitúa al final de esa posición. Recomiendo echar un vistazo a la ilustración de este atributo para col.
  • class: Uno o más identificadores de clase.
  • colspan: Un número natural que indica la cantidad de columnas por las que se extiende la celda; su valor por defecto es 1.
  • dir: Un sentido de lectura.
  • headers: Una serie de valores separados por espacios que coinciden con los id de otras celdas y que aportan la información de contexto necesaria para interpretar el valor de la celda. Se verá más claro en «Tablas accesibles».
  • id: Un identificador.
  • rowspan: Un número natural que indica la cantidad de filas por las que se extiende la celda; su valor por defecto es 1.
  • scope: Indica las celdas a las que se aplica el encabezado:
    • row: El encabezado se refiere a las celdas de la fila en la que se incluye.
    • col: El encabezado se refiere a las celdas de la columna en la que se incluye.
    • rowgroup: El encabezado se refiere a las celdas del grupo de columnas en el que se incluye.
    • colgroup: El encabezado se refiere a las celdas del grupo de filas en el que se incluye.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • valign: Especifica la alineación vertical de los contenidos de las celdas del grupo de filas:
    • top: El contenido comienza en la parte superior de su celda.
    • middle: El contenido se centra respecto al eje horizontal de su celda.
    • bottom: La parte inferior del contenido se sitúa en la perte inferior de la celda.
    • baseline: El contenido de cada celda se alinea con la línea de base más baja de los contenidos de las celdas de la misma fila. Recomiendo leer la descripción de este atributo para col.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Puede contener texto y/o cero o más encabezados, elementos de bloque, elementos de línea y listas.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

thead

Descripción
Define una fila o un grupo de filas dentro de una tabla como su cabecera.
Atributos
  • align: Especifica la alineación horizontal de los contenidos de las celdas del grupo de filas:
    • left: Alinea el contenido a la izquierda.
    • center: Centra el contenido.
    • right: Alinea el contenido a la derecha.
    • justify: Justifica el texto.
    • char: Alinea el texto tomando como referente un caracter. Si no se especifica ninguno por medio del atributo char, el valor por defecto es el caracter que se emplee para indicar los decimales de una cifra, según el idioma especificado para el documento.
  • char: Un caracter que se emplea como eje para alinear los contenidos de las celdas del grupo de filas.
  • charoff: Un número natural que representa una longitud en píxeles o un porcentaje para el desplazamiento con respecto al margen izquierdo —para los idiomas con un sentido natural de izquierda a derecha— o derecho —para los idiomas con un sentido natural de derecha a izquierda— de la primera ocurrencia del caracter que se emplea como eje de alineación. Si una línea no contiene tal caracter, se sitúa al final de esa posición. Recomiendo echar un vistazo a la ilustración de este atributo para col.
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • id: Un identificador.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Debe contener uno o más elementos tr.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Notas
El elemento thead es opcional, pero si aparece sólo puede hacerlo una vez, e inmediatamente antes de tbody, o tfoot en caso de que exista.
En la impresión de una tabla, debería aparecer en cada página impresa que sea necesaria para presentar la misma.

tr

Descripción
Define una fila dentro de una tabla.
Atributos
  • align: Especifica la alineación horizontal de los contenidos de las celdas de la fila:
    • left: Alinea el contenido a la izquierda.
    • center: Centra el contenido.
    • right: Alinea el contenido a la derecha.
    • justify: Justifica el texto.
    • char: Alinea el texto tomando como referente un caracter. Si no se especifica ninguno por medio del atributo char, el valor por defecto es el caracter que se emplee para indicar los decimales de una cifra, según el idioma especificado para el documento.
  • char: Un caracter que se emplea como eje para alinear los contenidos de las celdas de la fila.
  • charoff: Un número natural que representa una longitud en píxeles o un porcentaje para el desplazamiento con respecto al margen izquierdo —para los idiomas con un sentido natural de izquierda a derecha— o derecho —para los idiomas con un sentido natural de derecha a izquierda— de la primera ocurrencia del caracter que se emplea como eje de alineación. Si una línea no contiene tal caracter, se sitúa al final de esa posición. Recomiendo echar un vistazo a la ilustración de este atributo para col.
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • id: Un identificador.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Puede contener cualquier combinación de elementos th y td, pero debe contener al menos uno de ellos.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

Notas

  1. Me resulta un tanto extraño que scope pueda aplicarse a td, puesto que si el contenido de la celda aporta información para interpretar los contenidos de otra, ¿no sería acaso un encabezado de celdas y debería marcarse como th? No obstante, la especificación así lo indica (inglés). Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon