Etiqueta TABLE

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>

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.

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…

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>

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.

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.

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>

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