Completo tutorial de HTML - Tablas en HTML

Una tabla en un conjunto de celdas organizadas dentro de las cuales
podemos alojar distintos contenidos.

---

En un principio nos podría parecer que las tablas son raramente útiles y que
pueden ser utilizadas principalmente para listar datos como agendas, resultados
y otros datos de una forma organizada. Nada más lejos de la realidad.

---

Hoy, gran parte de los diseñadores de páginas basan su maquetación en este tipo
de artilugios. En efecto, una tabla nos permite organizar y distribuir los
espacios de la manera más optima. Nos puede ayudar a generar texto en columnas
como los periódicos, prefijar los tamaños ocupados por distintas secciones de la
página o poner de una manera sencilla un pie de foto a una imagen.

---

Puede que en un principio nos resulte un poco complicado trabajar con estas
estructuras pero, si deseamos crear una página de calidad, tarde o temprano
tendremos que vérnoslas con ellas y nos daremos cuenta de las posibilidades nos
ofrecen.

---

Para empezar, nada más sencillo que por el principio: las tablas son definidas
por las etiquetas <table> y </table>.

---

Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e
imágenes que darán forma y contenido a la tabla.

---

Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas
líneas es definida por otra etiqueta y su cierre: <tr> y </tr>

---

Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas
celdas será definida por otro par de etiquetas: <td> y </td>. Dentro de estas
etiquetas será donde coloquemos nuestro contenido.

---

Aquí tenéis un ejemplo de estructura de tabla:

---

<table>

---

<tr>

---

<td>Celda 1, linea 1</td>

---

<td> Celda 2, linea 1</td>

---

</tr>

---

<tr>

---

<td> Celda 1, linea 2</td>

---

<td> Celda 2, linea 2</td>

---

</tr>

---

</table>

---

El resultado:

|| Celda 1, linea 1 || Celda 2, linea 1 ||
|| Celda 1, linea 2 || Celda 2, linea 2 ||

---

|| Nota: Hasta aquí hemos visto todas las etiquetas que necesitamos conocer para crear tablas. Existen otras etiquetas, pero lo que podemos conseguir con éllas se puede conseguir también usando las que hemos visto.

---

Por poner un ejemplo, señalamos la etiqueta <th>, que sirve para crear una
celda cuyo contenido esté formatedo como un título o cabecera de la tabla.
En la práctica, lo que hace es poner en negrita y centrado el contenido de
esa celda, lo que se puede conseguir aplicando las correspondientes
etiquetas dentro de la celda. Así:

---

<td align="center"><b>contenido de la celda</b></td>. ||

---

A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud
cuando les incorporamos toda una batería de atributos aplicados sobre cada tipo
de etiquetas que las componen. A lo largo de los siguientes capítulos nos
adentraremos en el estudio de estos atributos de manera a proporcionaros los
útiles indispensables para una buena puesta en página.