Tablas HTML5
Tablas HTML5
Tablas HTML5
Las tablas organizan información en filas y columnas. Debido a sus características, se usaron
durante mucho tiempo para estructurar documentos HTML, pero con la introducción de CSS, los
desarrolladores pudieron lograr el mismo efecto implementando otros elementos. Aunque ya no
se recomienda usar tablas para definir la estructura de un documento, todavía se utilizan para
presentar información tabular, como estadísticas o especificaciones técnicas, por ejemplo. HTML
incluye varios elementos para crear una tabla. Los siguientes son los más utilizados.
<table>—Este elemento define una tabla. Incluye etiquetas de apertura y cierre para
agrupar el resto de los elementos que definen la tabla.
<tr>—Este elemento define una fila de celdas. Incluye etiquetas de apertura y cierre para
agrupar las celdas.
<td>—Este elemento define una celda. Incluye etiquetas de apertura y cierre para
delimitar el contenido de la celda y puede incluir los atributos colspan y rowspan para
indicar cuántas columnas y filas ocupa la celda.
<th>—Este elemento define una celda para la cabecera de la tabla. Incluye etiquetas de
apertura y cierre para delimitar el contenido de la celda y puede incluir los atributos
colspan y rowspan para indicar cuántas columnas y filas ocupa la celda.
Para incluir una tabla en el documento, primero tenemos que declarar el elemento
<table> y luego describir las filas una por una con los elementos <tr> y <td>, como muestra
el siguiente ejemplo.
<article>
<table>
<tr>
<td>IT</td>
<td>Stephen King</td>
<td>1986</td>
</tr>
<tr>
<td>Carrie</td>
<td>Stephen King</td>
<td>1974</td>
</tr>
<tr>
<td>El Resplandor</td>
<td>Stephen King</td>
<td>1977</td>
</tr>
</table>
</article>
HTML 1|P á g i n a
Debido a que el navegador interpreta el documento de forma secuencial desde la parte
superior a la inferior, cada vez que declaramos una fila, tenemos que declarar las celdas que
corresponden a esa fila y su contenido. Siguiendo este patrón, en el Listado 2-40, creamos una
tabla para mostrar libros, uno por fila. La primer celda de cada fila representa el título del
libro, la segunda celda representa el autor, y la tercera celda el año de publicación. Cuando el
navegador abre este documento, muestra la información en el orden en el que se ha
declarado en el código y con el tamaño determinado por el contenido de las celdas.
Si queremos incluir una cabecera para describir el contenido de cada columna, podemos
crear una fila de celdas adicional representadas con el elemento <th>.
<article>
<table>
<tr>
<th>Título</th>
<th>Autor</th>
<th>Año</th>
</tr>
<tr>
<td>IT</td>
<td>Stephen King</td>
<td>1986</td>
</tr>
<tr>
<td>Carrie</td>
<td>Stephen King</td>
<td>1974</td>
</tr>
<tr>
<td>El Resplandor</td>
<td>Stephen King</td>
<td>1977</td>
</tr>
</table>
</article>
2|P á g i n a HTML
Por defecto, los navegadores muestran las cabeceras con el texto en negrita y centrado.
Las celdas se pueden estirar para que ocupen más de una columna con los atributos
colspan y rowspan. Por ejemplo, podemos usar solo una celda de cabecera para identificar
el título y el autor del libro.
<article>
<table>
<tr>
<th colspan="2">Libro</th>
<th>Año</th>
</tr>
<tr>
<td>IT</td>
<td>Stephen King</td>
<td>1986</td>
</tr>
<tr>
<td>Carrie</td>
<td>Stephen King</td>
<td>1974</td>
</tr>
<tr>
<td>El Resplandor</td>
<td>Stephen King</td>
<td>1977</td>
</tr>
</table>
</article>
El ejemplo del Listado 2-42 incluye una celda de cabecera con el título Libro para las
primeras dos columnas. Debido al valor asignado al atributo colspan, esta celda se estira
para que ocupe el espacio de dos. El resultado se muestra en la Figura 2-26.
HTML 3|P á g i n a
Figura 2-26: Celdas de múltiples columnas
Atributos Globales
La mayoría de los navegadores actuales automáticamente traducen el contenido del
documento cuando detectan que se ha escrito en un idioma diferente al del usuario, pero en
algunos casos la página puede incluir frases o párrafos enteros que no se deben alterar, como
nombres de personas o títulos de películas. Para controlar el proceso de traducción, HTML
ofrece un atributo global llamado translate. Este atributo puede tomar dos valores: yes y
no. Por defecto, el valor es yes (si). En el siguiente ejemplo, usamos un elemento <span>
para especificar la parte del texto que no se debería traducir.
El elemento <span> se diseñó para presentar texto, pero a diferencia del elemento <p> no
asigna ningún estilo al contenido, por lo que el texto se presenta en la misma línea y con el
tipo de letra y tamaño por defecto. La Figura 2-27 muestra lo que vemos en la ventana del
navegador después de traducirlo.
4|P á g i n a HTML
Otro atributo útil que podemos agregar a un elemento HTML es contenteditable. Este
es un atributo booleano que, si está presente, permite al usuario editar el contenido del
elemento. Si el usuario hace clic en un elemento que contiene este atributo, puede cambiar su
contenido. El siguiente ejemplo implementa el elemento <span> nuevamente para permitir a
los usuarios editar el nombre de una película.
Hágalo usted mismo: reemplace el párrafo del Listado 2-43 por el párrafo
del Listado 2-44 y abra el documento en su navegador. Haga clic en el
nombre de la película para cambiarlo.
HTML 5|P á g i n a