TABLAS EN HTML

tablas en HTML

Las tablas se definen con la etiqueta <table>.

Las tablas se dividen en filas de la tabla con la etiqueta <tr>.

Las tablas se dividen en filas con la etiqueta <td>.

Por ejemplo, esta es una tabla con dos filas y dos columnas (En todos los ejemplos pongo primero el código y luego cómo se vería en la web):

<table>

<tr>

<td>Fila 1, Columna 1</td>

<td> Fila 1, Columna 2</td>

</tr>

<tr>

<td>Fila 2, Columna 1</td>

<td>Fila 2, Columna 2</td>

</tr>

</table>

Fila 1, Columna 1	Fila 1, Columna 2
Fila 2, Columna 1	Fila 2, Columna 2

Puesta así como está en el ejemplo anterior la tabla tiene estructura de tabla, pero no tiene bordes, por lo que su visualización puede ser algo complicada. Para poner borde hay que añadir el atributo border en la etiqueta table. La primera fila de la tabla puede convertirse en el encabezado de la tabla con la etiqueta <th>. Veamos un ejemplo de esto con una tabla sencilla donde aparezcan los ganadores de una carrera:

<table border=”1″>

<tr>

<th>Puesto</th>

<th>Corredor</th>

</tr>

<tr>

<td>Usain Bolt</td>

<td>1</td>

</tr>

<tr>

<td>Chema Martinez</td>

<td>2</td>

</tr>

<tr>

<td>Shabbir Hussein</td>

<td>3</td>

</tr>

</table>

Puesto	Corredor
Usain Bolt	1
Chema Martinez	2
Shabbir Hussein	3

Bien, ya tienes una tabla con bordes. El border=1 significa que el borde mide un solo pixel.

Otros atributos interesantes son colspan (para combinar dos o más columnas en una sola) y rowspan (para combinar dos o más filas en una sola).

<table border=”1″>

<tr>

<th>Columna 1</th>

<th>Columna 2</th>

<th>Columna 3</th>

</tr>

<tr><td rowspan=”2″>Fila 1 Celda 1</td><td>Fila 1 Celda 2</td><td>Fila 1 Celda 3</td></tr>

<tr><td>Fila 2 Celda 2</td><td>Fila 2 Celda 3</td></tr>

<tr><td colspan=”3″>Fila 3 Celda 1</td></tr>

</table>

Columna 1	Columna 2	Columna 3
Fila 1 Celda 1	Fila 1 Celda 2	Fila 1 Celda 3
	Fila 2 Celda 2	Fila 2 Celda 3
Fila 3 Celda 1

Puede establecer una anchura y altura de la tabla usando los atributos width y heigght respectivamente. Puedes especificar la anchura o altura de la tabla en píxeles o en términos de porcentaje de área de pantalla disponible.

Ejemplos:

<table border=”1″ width=”400″ height=”150″>

<table border=”1″ width=”100%” height=”50%”>