HTML - Lección 10: Datos tabulados en tablas

Cuando hablamos de datos tabulados nos estamos refiriendo a una serie de datos que están distribuídos por filas y por columnas. Cada dato estará en la intersección de una fila y una columna, a esta intersección se la conoce como celda.

En html, la estructura que alberga datos tabulados, como en general, se denomina tabla. Esta tabla tiene diferentes elementos; los dos más fundamentales son la fila y la columna.

Por otra parte, a la intersección de una fila con una columna se le denomina celda. En la siguiente tabla se te muestra las etiquetas para dar forma a una tabla.

La etiqueta <table> sirve para contener la tabla, es decir, para albergar dentro de ella toda la estructura de la tabla: las filas, las celdas y los encabezados. La etiqueta <tr> nos habilita las filas de la tabla. Con las etiquetas <td> y <th> podemos establecer celdas, pero con una direfencia: <th> es para el encabezado de la tabla.

Veamos un código html en donde se implementa una tabla para que queden los conceptos claros:

<table> <!-- habilitamos la tabla -->
  <tr> <!-- primera fila -->
    <th>Meses</th> <!-- celdas de encabezado -->
    <th>Kg de cebada</th>
    <th>Kg de aceitunas</th>
  </tr>
  <tr> <!-- segunda fila -->
    <td>Enero</td> <!-- celdas normales -->
    <td>8</td>
    <td>6</td>
  </tr>
  <tr> <!-- tercera fila -->
    <td>Febrero</td> 
    <td>4</td>
    <td>7</td>
  </tr>
</table>

En primer lugar tenemos la tabla definida a partir de la etiqueta <table>. Dentro de ésta hay tres bloques similaries que corresponden a cada fila de la tabla. En la primera fila hemos puesto celdas de encabezado a través de la etiqueta <th>. Finalmente, en la dos siguientes filas, hemos puesto tres celdas en cada una.

Así es como se visualizaría el código que hemos hecho en el navegador:

Figura 14. Con html se pueden presentar
datos tabulados.

Sin duda, la tabla que acabamos de hacer le falta diseño; pero es mejor dejarlo así y acudir al curso de CSS para darle diseño. Tampoco hemos visto ciertos detalles para configurar celdas, lo dejaremos para más tarde para no dificultar el aprendizaje.