Tablas

Hay momentos en los que queremos mostrar los datos que se ordenan en columnas y filas. Esto se conoce como datos tabulares y HTML tiene una etiqueta <table> y elementos secundarios para la organización de tales datos.Por ejemplo, una tabla de comparación de vegetales pueden ser nombres de vegetales y su color correspondiente o el valor nutritivo. Vamos a construir una tabla simple.

Para empezar, abrimos la etiqueta <table>:

<table>

Inmediatamente después de la etiqueta <table>, podemos incluir una etiqueta <caption> para informar rápidamente al lector el propósito de la tabla.

<caption>Una tabla de colores vegetales.</caption>

Las tablas se componen de filas y columnas. La fila de la tabla de etiqueta <tr> se utiliza para separar las filas de la tabla, mientras que la tabla de datos <td> se ajusta a cada fila.

También tenga en cuenta que la primera fila de esta tabla se reservará para la tabla de encabezados <th>.  Los encabezados dejan que un lector sepa lo que cada columna o fila de una tabla representa.

<tr>

  <th>Nombre de vegetal</th>

  <th>Color</th>
</tr>

La tabla adicional de filas <tr> y tabla de datos <td> seguirá el mismo formato que los encabezados de tabla <th>, es decir, que se escribe en el mismo orden.

<tr>

  <td>Zanahoria</td>

  <td>Naranja</td>
</tr>
<tr>

  <td>Espárragos</td>

  <td>Verde</td>
</tr>

Por último, vamos a cerrar la etiqueta de tabla.

</table>

Recursos externos

Hackbook: Tables

Mi ejemplo:

https://thimble.webmaker.org/p/fuzy