Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.
A continuación se muestra el código HTML de una tabla sencilla:
<html> <head><title>Ejemplo de tabla sencilla</title></head> <body> <h1>Estadísticas de grandes jugadores de fútbol</h1> <table> <tr> <td><strong>Jugador</strong></td> <td><strong>Partidos</strong></td> <td><strong>Goles</strong></td> <td><strong>Asistencias</strong></td> <td><strong>Goles generados</strong></td> <td><strong>Promedio Goles generados por partido</strong></td> </tr> <tr> <td>Messi</td> <td>792</td> <td>687</td> <td>271</td> <td>958</td> <td>1,21</td> </tr> <tr> <td>Ronaldo</td> <td>916</td> <td>688</td> <td>210</td> <td>898</td> <td>0,98</td> </tr> <tr> <td>Maradona</td> <td>589</td> <td>311</td> <td>208</td> <td>519</td> <td>0,88</td> </tr> </table> </body> </html>
Si se visualiza el código anterior en cualquier navegador, se obtiene una tabla como la que muestra la siguiente imagen:
La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr> (del inglés “table row”) definen cada fila de la tabla y encierran todas las columnas. Por último, la etiqueta <td> (del inglés “table data cell”) define cada una de las columnas de las filas, aunque realmente HTML no define columnas sino celdas de datos.
Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuación en las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas <tr> aparecen antes que las etiquetas <td>.
| Etiqueta | <table> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | summary = "texto" – Permite describir el contenido de la tabla (lo utilizan los buscadores y las personas discapacitadas) |
| Tipo de elemento | Bloque |
| Descripción | Se emplea para definir tablas de datos |
| Etiqueta | <tr> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | – |
| Tipo de elemento | Bloque |
| Descripción | Se emplea para definir cada fila de las tablas de datos |
| Etiqueta | <td> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | abbr = "texto" – Permite describir el contenido de la celda (empleado sobre todo en los navegadores utilizados por personas discapacitadas)headers = "lista_de_id" – Indica las celdas que actúan como cabeceras para esta celda (los títulos de las columnas y filas). Se indica como una lista de valores del atributo “id” de celdasscope = "col, row, colgroup, rowgroup" – Indica las celdas para las que esta celda será su cabecera. Ej: scope=”col” indica que esta celda es la cabecera de todas las demás celdas que están en la misma columnacolspan = "numero" – Número de columnas que ocupa esta celdarowspan = "numero" – Número de filas que ocupa esta celda |
| Tipo de elemento | Bloque |
| Descripción | Se emplea para definir cada una de las celdas que forman las filas de una tabla, es decir, las columnas de la tabla |
De todos los atributos disponibles para las celdas, los más utilizados son rowspan y colspan, que se emplean para construir tablas complejas como las que se ven más adelante. Entre los demás atributos, sólo se utiliza de forma habitual el atributo scope, sobre todo con las celdas de cabecera que se ven a continuación.
Normalmente, algunas de las celdas de la tabla se utilizan como cabecera de las demás celdas de la fila o de la columna. En este caso, HTML define la etiqueta <th> (del inglés “table header cell”) para indicar que una celda es cabecera de otras celdas.
| Etiqueta | <th> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | abbr = "texto" – Permite describir el contenido de la celda (empleado sobre todo en los navegadores utilizados por personas discapacitadas)headers = "lista_de_id" – Indica las celdas que actúan como cabeceras para esta celda (los títulos de las columnas y filas). Se indica como una lista de ID de celdasscope = "col, row, colgroup, rowgroup" – Indica las celdas para las que esta celda será su cabecera. Ej: scope=”col” indica que esta celda es la cabecera de todas las demás celdas que están en la misma columnacolspan = "numero" – Número de columnas que ocupa esta celdarowspan = "numero" – Número de filas que ocupa esta celda |
| Tipo de elemento | Bloque |
| Descripción | Se emplea para definir las celdas que son cabecera de una fila o de una columna de la tabla |
Los atributos de la etiqueta <th> son idénticos que los atributos definidos para la etiqueta <td>. En este caso, el atributo más utilizado es scope, que permite indicar si la celda es cabecera de la fila o de la columna (<th scope="row"> y <th scope="col"> respectivamente).
Por otra parte, HTML define la etiqueta <caption> para establecer la leyenda o título de una tabla. La etiqueta debe colocarse inmediatamente después de la etiqueta <table> y cada tabla sólo puede incluir una etiqueta <caption>.
| Etiqueta | <caption> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | – |
| Tipo de elemento | En línea |
| Descripción | Se emplea para definir la leyenda o título de una tabla |
Ejercicio 1:
Descubrir el por medio de ingeniería inversa, el siguiente código:
Utilizar las celdas de cabecera donde sea necesario y añadir todos los atributos posibles.
Veamos la respuesta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de tabla sencilla</title>
</head>
<body>
<h1>Kit para hacer videos en YouYube</h1>
<table>
<tr>
<th scope="col">Nombre producto</th>
<th scope="col">Precio unitario</th>
<th scope="col">Unidades</th>
<th scope="col">Subtotal</th>
</tr>
<tr>
<td>Micrófono</td>
<td>20.000</td>
<td>2</td>
<td>40.000</td>
</tr>
<tr>
<td>Cámara</td>
<td>60.000</td>
<td>1</td>
<td>60.000</td>
</tr>
<tr>
<td>Flash para iluminación</td>
<td>10.000</td>
<td>4</td>
<td>40.000</td>
</tr>
<tr>
<th scope="row">TOTAL</th>
<td>-</td>
<td>7</td>
<td><strong>140.000</strong></td>
</tr>
</table>
</body>
</html>Ejercicio 2:
Vamos a complicarlo un poco más, debemos descubrir el siguiente código:
Utilizar las celdas de cabecera donde sea necesario y añadir todos los atributos posibles.
Veamos el resultado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comprando artículos para los videos de YouTube</title>
</head>
<body>
<h1>Resultado de la búsqueda en la tienducha de práctica</h1>
<table summary="Tabla con los datos de los resultados de la búsqueda">
<caption>Resultado de la búsqueda</caption>
<tr>
<th abbr="Imagen del producto" scope="col">Imagen</th>
<th abbr="Datos del producto" scope="col">Datos</th>
</tr>
<tr>
<td>
<img src="/nuevo proyecto/mic.jpg" alt="Imagen del Micrófono" width="200" />
</td>
<td>
<h4><a href="#" title="Ver más información sobre el Micrófono">Micrófono</a></h4>
<p><a href="#" title="Comprar el Micrófono">Comprar:</a> <del>30.000 $</del> <strong>20.000 $</strong></p>
</td>
</tr>
<tr>
<td><img src="/nuevo proyecto/cam.jpg" alt="Imagen de la Cámara" width="200" /></td>
<td>
<h4><a href="#" title="Ver más información sobre la Cámara">Cámara</a></h4>
<p><a href="#" title="Comprar la Cámara">Comprar:</a> <del>70.000 $</del> <strong>60.000 $</strong></p>
</td>
</tr>
<tr>
<td><img src="/nuevo proyecto/flash.jpg" alt="Imagen del Flash" width="200" /></td>
<td>
<h4><a href="#" title="Ver más información sobre el Flash">Flash</a></h4>
<p><a href="#" title="Comprar el Flash">Comprar:</a> <del>15.000 $</del> <strong>10.000 $</strong></p>
</td>
</tr>
</table>
</body>
</html>