El propósito de una tabla es organizar la información. En el pasado, antes de que CSS fuera bien soportado por los navegadores, las tablas también se usaban para dar formato a los diseños de páginas web. Una tabla HTML se compone de filas y columnas, como una hoja de cálculo. Cada celda individual de la tabla está en la intersección de una fila y columna específica.

  • Cada tabla comienza con una etiqueta <table> y termina con una etiqueta </table>.
  • Cada fila de la tabla comienza con una etiqueta <tr> y termina con una etiqueta </tr>.
  • Cada celda (datos de la tabla) comienza con una etiqueta <td> y termina con una etiqueta </td>.
  • Las celdas de la tabla pueden contener texto, gráficos y otros elementos HTML.

El siguiente código muestra una tabla con tres filas y tres columnas: Observa cómo se codifica la tabla fila por fila. Además, cada fila está codificada celda por celda.

<table>
<tr>
<td>Curso</td>
<td>Nivel</td>
<td>Plataforma</td>
</tr>
<tr>
<td>HTML</td>
<td>Principiante</td>
<td>Aprender desde Cero</td>
</tr>
<tr>
<td>CSS</td>
<td>Avanzado</td>
<td>Aprender desde Cero</td>
</tr>
</table>

1. Elemento <table>

Un elemento table es un elemento de visualización de bloque que contiene información tabular. La tabla comienza con una etiqueta <table> y termina con una etiqueta </table>.

Ten en cuenta que la mayoría de los atributos enumerados en la siguiente Tabla están obsoletos en HTML5 y deben evitarse. Aunque estos atributos están obsoletos en HTML5, a medida que trabajas con la Web, verás muchas páginas web codificadas con versiones anteriores de HTML5 y es útil conocer incluso los atributos obsoletos. Los desarrolladores web modernos prefieren configurar el estilo de tablas con propiedades CSS en lugar de con atributos HTML. Un atributo prominente que permanece en uso es el atributo de border.

AtributoValorPropósito
alignleft (default), right, centerAlineación horizontal de la tabla (obsoleta en HTML5)
bgcolorValor de color validoColor de fondo de la tabla (obsoleto en HTML5).
border0/1–100Defecto; no hay un borde visible / Borde visible con ancho de píxel especificado
cellpaddingValor numéricoEspecifica el número de píxeles de relleno entre el contenido de una celda de la tabla y su borde (obsoleto en HTML5).
cellspacingValor numéricoEspecifica el número de píxeles de espacio entre los bordes de cada celda en una tabla (obsoleta en HTML5).
summaryDescripción de textoProporciona accesibilidad con una descripción de texto que brinda una descripción general y el contexto para la información en la tabla (obsoleta en HTML5)
titleDescripción de textoUna breve descripción de texto que proporciona una visión general de la tabla; Algunos navegadores pueden mostrarlo como información sobre herramientas.
widthValor numérico o porcentajeEspecifica el ancho de la tabla (obsoleto en HTML5).

Atributo border

En versiones anteriores de HTML (como HTML4 y XHTML), el propósito del atributo border era indicar la presencia y el ancho de un borde de tabla visible. El atributo border se usa de manera diferente en HTML5. La siguiente sintaxis HTML5, border="1" hace que el navegador genere los bordes predeterminados alrededor de la tabla y las celdas de la tabla. CSS se utiliza para el estilo del borde de una tabla. Obtendrás práctica de estilo de una tabla con CSS más adelante…

2. Elemento <caption>

El elemento caption se usa a menudo con una tabla para describir su contenido. caption comienza con una etiqueta <caption> y termina con una etiqueta </caption>. El texto contenido dentro del elemento caption se muestra en la página web sobre la tabla, aunque verás más adelante que puedes configurar la ubicación con CSS.

La tabla que se muestra a continuación utiliza el elemento caption para establecer el título de la tabla con “Cursos desde Cero”. Observa que el elemento caption se codifica en la línea inmediatamente después de la etiqueta <table> de apertura. El HTML para la tabla es:

<table border="1">
<caption>Cursos desde Cero</caption>
<tr>
<td>Curso</td>
<td>Nivel</td>
</tr>
<tr>
<td>HTML</td>
<td>Principiante</td>
</tr>
<tr>
<td>CSS</td>
<td>Avanzado</td>
</tr>
</table>

3. Elemento table row <tr>

El elemento de fila de la tabla (table row o tr) configura una fila dentro de una tabla en una página web. La fila de la tabla comienza con una etiqueta <tr> y termina con una etiqueta </tr>.

La siguiente tabla muestra atributos obsoletos del elemento de fila de la tabla. Las páginas web codificadas con versiones anteriores de HTML pueden usar estos atributos obsoletos. Los desarrolladores web modernos configuran la alineación y el color de fondo con CSS en lugar de con HTML

AtributoValorPropósito
alignleft (default), right, centerAlineación horizontal de la tabla (obsoleta en HTML5)
bgcolorValor de color validoColor de fondo de la tabla (obsoleto en HTML5).

4. Elemento table data <td>

El elemento de datos de la tabla (table data o td) configura una celda dentro de una fila en una tabla en una página web. La celda de la tabla comienza con una etiqueta <td> y termina con una etiqueta </td>.

Consulta la siguiente Tabla para conocer los atributos del elemento de celda de datos de la tabla. Algunos atributos son obsoletos y deben ser evitados. Explorarás la configuración de estilos de tablas con CSS más adelante.

AtributoValorPropósito
alignleft (default), right, centerAlineación horizontal de la tabla (obsoleta en HTML5)
bgcolorValor de color validoColor de fondo de la tabla (obsoleto en HTML5).
colspanValor numéricoEl número de columnas abarcadas por una celda.
headersLos valores de id de una celda de encabezado de columna o fila.Asocia las celdas de datos de tabla con celdas de encabezado de tabla; puede ser accedido por lectores de pantalla.
heightValor numérico o porcentajeAltura de la celda (obsoleta en HTML5).
rowspanValor numéricoEl número de filas que ocupa una celda.
scoperow, colEl alcance del contenido de la celda del encabezado de la tabla (fila o columna); puede ser accedido por lectores de pantalla.
valigntop, middle (default), bottomLa alineación vertical de los contenidos de la celda (obsoleta en HTML5).
widthValor numérico o porcentajeEspecifica el ancho de la tabla (obsoleto en HTML5).

5. Elemento table header <th>

El elemento de encabezado de tabla (table header o th) es similar al elemento table data y configura una celda dentro de una fila en una tabla en una página web. Su propósito es configurar los encabezados de columna y fila. El texto que se muestra dentro de un elemento de encabezado <th> de tabla está centrado y en negrita.

El elemento del encabezado de la tabla comienza con una etiqueta <th> y termina con una etiqueta </th>. El siguiente ejemplo muestra una tabla con encabezados de columna configurados por etiquetas <th>. Observa que la primera fila usa etiquetas <th> en lugar de <td>:

<table border="1">
<tr>
<th>Curso</th>
<th>Nivel</th>
</tr>
<tr>
<td>HTML</td>
<td>Básico</td>
</tr>
<tr>
<td>CSS</td>
<td>Intermedio</td>
</tr>
</table>

Puedes alterar el aspecto de cuadrícula de una tabla aplicando los atributos colspan y rowspan a los elementos table data o table header. A medida que te adentres en configuraciones de tablas más complejas como estas, asegúrate de dibujar la tabla en papel antes de comenzar a escribir el HTML.

Atributo colspan

El atributo colspan especifica el número de columnas que ocupará una celda. El siguiente ejemplo muestra una celda de tabla que abarca dos columnas.

<table border="1">
<tr>
<td colspan="2">Esto abarca dos columnas</td>
</tr>
<tr>
<td>Columna 1</td>
<td>Columna 2</td>
</tr>
</table>

Atributo rowspan

El atributo rowspan especifica el número de filas que ocupará una celda. El siguiente ejemplo muestra  una celda de tabla que abarca dos filas.

<table border="1">
<tr>
<td rowspan="2">Esto abarca dos filas</td>
<td>Fila 1 Columna 2</td>
</tr>
<tr>
<td>Fila 2 Columna 2</td>
</tr>
</table>

Atributo headers

Las tablas pueden ser útiles para organizar la información en una página web, pero ¿qué sucede si no puede ver la tabla y confía en la tecnología de asistencia como un lector de pantalla para leer la tabla? Escucharía el contenido de la tabla tal como está codificado, fila por fila, celda por celda. Esto puede ser difícil de entender.

W3C recomienda asociar específicamente los valores de las celdas de datos de la tabla con sus encabezados correspondientes. La técnica recomendada utiliza el atributo id (generalmente en una etiqueta <th>) para identificar una celda de encabezado específica y el atributo headers en una etiqueta <td>.

<table border="1">
<caption>Cursos de Programación Web</caption>
<tr>
<th id="curso">Curso</th>
<th id="nivel">Nivel</th>
</tr>
<tr>
<td headers="curso">HTML</td>
<td headers="nivel">Básico</td>
</tr>
<tr>
<td headers="curso">CSS</td>
<td headers="nivel">Intermedio</td>
</tr>
</table>

6. Secciones de tabla: <thead>, <tbody>, <tfoot>

Hay muchas opciones de configuración para codificar tablas. Las filas de la tabla se pueden unir en tres tipos de grupos: encabezado de tabla con <thead>, cuerpo de tabla con <tbody> y pie de tabla con <tfoot>.

Estos grupos pueden ser útiles cuando necesitas configurar las áreas de la tabla de diferentes maneras, usando atributos o CSS. La etiqueta <tbody> es obligatoria si configuras un área <thead> o <tfoot>, aunque puedes omitir el encabezado de la tabla o el pie de la tabla si lo deseas. Cuando utilizas grupos de filas de la tabla, las secciones <thead> y <tfoot> deben codificarse antes de la sección <tbody> para pasar la validación XHTML de W3C.

Ejemplo Práctico

El siguiente ejemplo de código configura una tabla y demuestra el uso de CSS para configurar una cabecera de tabla, cuerpo de tabla y pie de tabla con diferentes estilos.

<table>
<caption>Hoja de tiempo</caption>
<thead>
<tr>
<th id="day">Día</th>
<th id="hours">Horas</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="day">Lunes</td>
<td headers="hours">4</td>
</tr>
<tr>
<td headers="day">Martes</td>
<td headers="hours">3</td>
</tr>
<tr>
<td headers="day">Miércoles</td>
<td headers="hours">5</td>
</tr>
<tr>
<td headers="day">Jueves</td>
<td headers="hours">3</td>
</tr>
<tr>
<td headers="day">Viernes</td>
<td headers="hours">3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td headers="day">Total</td>
<td headers="hours">18</td>
</tr>
</tfoot>
</table>
table { width: 200px;
margin: auto; }
caption { font-size: 2em;
font-weight: bold; }
thead { background-color: #eaeaea; }
tbody { font-family: Arial, sans-serif;
font-size: .90em; }
tbody td { border-bottom: 1px #000033 dashed;
padding-left: 25px; }
tfoot { background-color: #eaeaea;
font-weight: bold;
text-align: center; }

Los estilos CSS son: una tabla centrada de 200 píxeles de ancho con un título que se representa en letra grande y en negrita; una sección de cabecera de tabla con un color de fondo gris claro (#eaeaea); una sección de cuerpo de tabla con un texto un poco más pequeño (.90em) que usa fuente Arial o sans-serif; los selectores del elemento td del cuerpo de la tabla se configuran para mostrarse con algo de relleno izquierdo y un borde inferior discontinuo; y una sección de pie de tabla que está centrado, el texto en negrita y un color de fondo gris claro (#eaeaea).

Etiqueta TABLE
5 (100%) 9 votos




Alex Walton

Alex Walton

Aprender desde Cero es tu web para conocer todo sobre informática. Mi nombre es Alex y me gustaría que dejes tu comentario ante cualquier duda o aporte.
"Si no lo consigues a la primera, llámalo versión 1.0"

Comparte este artículo:

Facebook
Google+
Twitter
LinkedIn
WhatsApp
Email
Deja tu comentario
Contenido Relacionado
Etiqueta VIDEO HTML5 con ejemplo

Etiqueta VIDEO

El nuevo elemento video HTML5 es compatible con la reproducción nativa de archivos de vídeo en el navegador sin necesidad ...
Leer Más
Etiqueta AUDIO HTML5 con ejemplo

Etiqueta AUDIO

El nuevo elemento audio de HTML5 soporta la reproducción nativa de archivos de audio en el navegador sin la necesidad ...
Leer Más
Etiqueta EMBED HTML5 con ejemplos

Etiqueta EMBED

El elemento embed es un elemento autónomo, o vacío (no se utiliza etiqueta de cierre), cuyo propósito es proporcionar un ...
Leer Más
SOBRE NOSOTROS

Somos una web que busca el libre conocimiento en temas relacionados a la informática.

Todos los cursos son gratis. La publicidad nos mantiene activos así que por favor visita a nuestros anunciantes.

RECIBE MUCHOS REGALOS