HTML Tablas primera parte

Tablas en HTML

Hay muchas formas de mostrar datos en html, y aunque parecen pocas las posibilidades que nos ofrece una tabla, se le puede sacar mucho partido a la misma. Usaremos para crear una tabla la etiqueta <table></table>, dentro de esta etiqueta irá nuestro contenido.
A diferencia de lo que podemos esperar de una tabla en una hoja excel, donde trabajamos con filas y columnas, en html se trabaja con filas y celdas, es decir, no podemos definir como tal una columna, quizás con la finalidad de no complicar el código cuando queremos algo más simple.
Para insertar una fila usaremos la etiqueta <tr></tr>, iniciales de Table Row.
Para insertar una celda dentro de una fila, introducimos la etiqueta <td></td>, iniciales de Table Data cell.
La estructura tomará este aspecto (recuerdo que introducir intro entre etiquetas no influye en el aspecto final de la página facilitando considerablemente la lectura del código):

 <table>
<tr>
<td>A1</td><td>A2</td><td>A3</td>
</tr>
<tr>
<td>B1</td><td>B2</td><td>B3</td>
</tr>
<tr>
<td>C1</td><td>C2</td><td>C3</td>
</tr>
</table>

 El aspecto final quedaría de la siguiente manera:

A1	A2	A3
B1	B2	B3
C1	C2	C3

Como todo, las tablas en html tienen una parte sencilla y una compleja. Para añadir por ejemplo celdas de cabecera que dispongan de un estilo más acentuado usamos la etiqueta <th></th> (Table Header cell)

Podemos también agrupar filas (que no unirlas) diferenciando cabecera, cuerpo y pie de tabla, las etiquetas correspondientes serían:
<thead></thead> Cabecera
<tbody></tbody> Cuerpo
<tfoot></tfoot> Pie


<table>
<thead>
<th>A1</th><td>A2</td><td>A3</td>
</thead>
<tr>
<td>B1</td><td>B2</td><td>B3</td>
</tr>
<tr>
<td>C1</td><td>C2</td><td>C3</td>
</tr>
</table>

A1	A2	A3
B1	B2	B3
C1	C2	C3

Para continuar con la segunda parte de tablas clickea aquí.