Estructura básica de una tabla
El ejemplo a continuación muestra una tabla que consta de tres columnas y tres filas de datos:
Fruta
Calorías
Proteínas
Naranja
53g
1g
Manzana
45g
0.2g
Descripción
Si miramos la table pensando en HTML podremos ver que cada existen tres filas que contienen:
- Una fila con los títulos para cada columna.
- La segunda y tercera columna que contienen datos almacenados en "celdas".
Esto se traduce como código así:
<table>
<tr>
<th>Fruta</th>
<th>Calorías</th>
<th>Proteínas</th>
</tr>
<tr>
<td>Naranja</td>
<td>53g</td>
<td>1g</td>
</tr>
<tr>
<td>Manzana</td>
<td>45g</td>
<td>0.2g</td>
</tr>
</table>
Etiquetas HTML para definir partes de una tabla
A diferencia de una tabla normal, las tablas en HTML no definen literalmente una columna. Éstas están determinadas por el número de "celdas" en cada fila. Si nuestra tabla contiene 3 columnas, debemos asegurarnos de incluir 3 celdas en cada fila.
- <table>
- La etiqueta "table" se utiliza para identificar el comienzo y fin de una tabla. La tabla debe incluir directamente las filas que la compondrán.
- <tr>
- La etiqueta "tr" define una fila dentro de la tabla. Éstas a su vez sólo pueden contener celdas (<th> o <td>).
- <th> y <td>
- La etiqueta "th" define un tipo especial de celda y nos ayuda a definir una cabecera o título de la tabla. La etiqueta "td" representa una celda del la tabla y dentro de ella podemos agregar cualquier tipo de contenido.
Más información acerca de las tablas
Existe una serie de etiquetas y atributos más avanzados que nos ayudan a mejorar nuestras tablas, puedes ver ejemplos y tutoriales de esto aquí:
Tablas en HTML