Tablas
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>
Listado 2-40: Creando una tabla
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.
Figura 2-24: Tabla con estilos por defecto
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>
Listado 2-41: Creando una tabla con cabecera
2|P á g i n a HTML
Por defecto, los navegadores muestran las cabeceras con el texto en negrita y centrado.
Figura 2-25: Cabecera de tabla con estilos por defecto
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>
Listado 2-42: Estirando celdas
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
Lo básico: HTML también incluye los elementos <thead>, <tbody>, y
<tfoot> para representar la cabecera, el cuerpo, y el pie de la tabla,
respectivamente, y otros elementos como <colgroup> para agrupar
columnas. Para obtener más información, visite nuestro sitio web y siga los
enlaces.
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.
<p>My favorite movie is <span translate="no">Two Roads</span></p>
Listado 2-43: Usando el atributo translate
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.
Figura 2-27: texto traducido por el navegador
Hágalo usted mismo: inserte el código del Listado 2-43 en la sección
principal de su documento y abra el documento en su navegador. Los
navegadores como Google Chrome ofrecen una opción para traducir el
documento en un menú contextual cuando hacemos clic con el botón
derecho del ratón. Si la traducción no se realiza de forma automática,
seleccione esta opción para traducir el texto. Una vez traducido el texto,
debería ver algo similar a lo que se muestra en la Figura 2-27.
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.
<p>Mi película favorita es <span contenteditable>Casablanca</span></p>
Listado 2-44: Usando el atributo contenteditable para editar contenido
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.
IMPORTANTE: las modificaciones introducidas por el usuario solo se
encuentran disponibles en su ordenador. Si queremos que los cambios se
almacenen en el servidor, tenemos que subir esta información con un
programa en JavaScript usando Ajax.
HTML 5|P á g i n a
