A veces, tienes grandes cantidades de datos que quieres organizar de una forma coherente. Además, tienes que ordenarlos de una forma que sea clara y ordenada para que transmitan lo que representan. En este sentido las tablas HTML son tu solución.
Es una forma muy buena de organizar datos de forma tabulada, una forma de visualizar la información que te ayuda a descubrir y comparar diferentes rangos de datos muy fácil y eficazmente.
La tabla más básica
Empezaré con el código semántico HTML necesario para implementar un tabla básica:
<table> <tr> <td>Nombre</td> <td>Apellido</td> <td>Teléfono</td> </tr> <tr> <td>Raül</td> <td>Bocache</td> <td>697543123</td> </tr> <tr> <td>Antonio</td> <td>García</td> <td>623678654</td> </tr> <tr> <td>Pedro</td> <td>Fernández</td> <td>612323575</td> </tr> </table>
La representación de este código es la siguiente:
Ahora analizaré el código implementado:
- Etiqueta
<table>...</table: Este elemento es necesario para indicar al navegador que se quiere insertar una tabla. Es decir, todos los demás elementos para implementar una tabla deben estar entre la etiqueta<table>y su correspondiente etiqueta de cierre</table>. - Etiqueta
<tr>...</tr>: Indican que queremos insertar una fila,<tr>significa table row. - Etiqueta
<td>...</td>: Entre estas etiquetas colocarás los datos de cada una de las celdas. Tienes que utilizar sólo los elementos<td>que sean necesarios. No utilices elementos<td>vacíos para crear espacios en blanco, ya que esto lo harás con CSS. Su significado sería algo así como table date.
¡La idea es clara! Como cada grupo de instrucciones representa una fila, primero implementas los datos que representa cada columna (título) y después los datos de cada entidad; en el ejemplo, nombre, apellido y número de teléfono.
Añade título y encabezados
A partir de la tabla anterior voy a añadir un título a la tabla y unos encabezamientos a las columnas. Estas mejoras ayudan a la compresión de la tabla, además de más legibilidad por parte de los lectores de pantalla, que como ya sabes, mejora la vida y la UX de las personas con problemas visuales.
<table> <caption>Lista de amigos y teléfonos</caption> <tr> <th>Nombre</th> <th>Apellido</th> <th>Teléfono</th> </tr> <tr> <td>Raül</td> <td>Bocache</td> <td>697543123</td> </tr> <tr> <td>Antonio</td> <td>García</td> <td>623678654</td> </tr> <tr> <td>Pedro</td> <td>Fernández</td> <td>612323575</td> </tr> </table>
Este código se verá así:
Los elementos nuevos son los siguientes:
<caption>...</caption>: Con este elemento he añadido un título a la tabla.<th>...</th>: Esta etiqueta indica al navegador que el contenido de estas celdas corresponde al título de las columnas. El significado de<th>es table head.
Todas estas etiquetas son semánticamente importantes. La mayoría de los navegadores centran el <caption> y ponen en negrita las etiquetas <th>.
Acaba de completar tu tabla
Ahora completaremos la tabla para que semánticamente sea perfecta para todos los usuarios:
<table summary="Esta tabla contiene el nombre y los apellidos, junto con su teléfono de mis mejores amigos"> <caption>Lista de amigos y teléfonos</caption> <thead> <tr> <th scope="col">Nombre</th> <th scope="col">Apellido</th> <th scope="col">Teléfono</th> </tr> </thead> <tbody> <tr> <td scope="row">Raül</td> <td>Bocache</td> <td>697543123</td> </tr> <tr> <td scope="row">Antonio</td> <td>García</td> <td>623678654</td> </tr> <tr> <td scope="row">Pedro</td> <td>Fernández</td> <td>612323575</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">Actualización: dd/mm/aaaa</td> </tr> </tfoot> </table>
El código se representa así:
Habrás observado que visualmente no mejora demasiado, pero lo que aquí estoy implementando es la semántica de la tabla, es decir, estoy implementado el código para que Google entienda perfectamente que demonios significan estos datos. Después mediante CSS puedes embellecerla todo lo que quieras, pero aquí no es lo que toca.
El código añadido significa lo siguiente:
- Elementos
<thead>, <tbody>y<tfoot>: Definen, por orden, la cabecera (títulos), el cuerpo y el pie de la tabla. Normalmente, estas estructuras se suelen usar cuando la tabla es muy compleja. Es una forma muy eficaz de ordenar y facilitar la comprensión de cara al navegador y otros dispositivos, incluso para ti mismo. - El atributo
colspan: Crea una celda de la tabla que ocupa más de una columna. En el ejemplo, he añadido una fila que ocupa las 3 columnas existentes para mostrar la fecha de actualización. También existe el atributorowspancon el mismo objetivo, pero para las filas. - Atributo
summary: Se utiliza para indicar al navegador y a los lectores de pantalla un resumen del contenido de la tabla. Actualmente, si una tabla tiene el elemento<caption>se podría prescindir de él. - Atributo
scope: Este atributo sólo se utiliza para las etiquetas<th>y indica que las celdas donde está implementado también son títulos. Algunos navegadores muestran el contenido en negrita de forma predeterminada, no es el caso de chrome.
Deja una respuesta