HTML - Tablas

  »   HTML  »   Tutorial HTML - Tablas

Las tablas pueden parecer difíciles al principio, pero con un poco de paciencia y práctica veras que las cosas no son como parecen. La etiqueta <table> se usa para abrir una tabla. Dentro de esta etiqueta encontraremos otras dos etiquetas típicas, <tr> (lineas de la tabla) y <td> (columnas de la tabla). Pero la mejor explicación es siempre un ejemplo:

html<table border="1">
	<tr>
		<td>Fila 1 Celda 1</td>
		<td>Fila 1 Celda 2</td>
	</tr>
	<tr>
		<td>Fila 2 Celda 1</td>
		<td>Fila 2 Celda 2</td>
	</tr>
</table>

Demo

Fila 1 Celda 1Fila 1 Celda 2
Fila 2 Celda 1Fila 2 Celda 2

El contenido será ubicado dentro de las filas de la tabla. Una fila representa lo que está entre <td> y </td>. El atributo border establece el ancho del borde la de tabla.

HTML - Tablas asimétricas

Para formar tablas asimétricas usaremos 'rospawn' para unir más de una linea y 'colspan' para unir más de una columna. Ademas, si queremos que la primera linea sirva como linea de título para las columnas usaremos la etiqueta <th>. Estas serán escritas con letras en negrilla como veremos en el siguiente ejemplo:

html<table border="1">
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
		<th>Column 3</th>
	</tr>
	<tr>
		<td rowspan="2">Fila 1 Celda 1</td>
		<td>Row 1 Cell 2</td>
		<td>Fila 1 Celda 3</td>
	</tr>
	<tr>
		<td>Row 2 Cell 2</td>
		<td>Linea 2 Celda 3</td>
	</tr>
	<tr>
		<td colspan="3">Linea 3 Celda 1</td>
	</tr>
</table>

Demo

Column 1Column 2Column 3
Fila 1 Celda 1Row 1 Cell 2Fila 1 Celda 3
Row 2 Cell 2Linea 2 Celda 3
Linea 3 Celda 1

HTML - Espacio entre las celdas

Con la ayuda de los atributos 'cellpadding' y 'cellspacing' podemos establecer la distancia entre la celdas. cellspacing determina el tamaño del borde, y cellspadding la distancia entre el marco y el contenido. En el siguiente ejemplo hemos añadido también poco de color.

html<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
	<tr>
		<th>Columna 1</th>
		<th>Columna 2</th>
	</tr>
	<tr>
		<td>Fila 1 Celda 1</td>
		<td>Fila 1 Celda 2</td>
	</tr>
	<tr>
		<td>Fila 2 Celda 1</td>
		<td>Fila 2 Celda 2</td>
	</tr>
</table>

Para mostrar mejor la diferencia puedes borrar el borde del ejemplo anterior.

La distancia entre las celdas y el borde será interpretado en pixeles por el navegador. Sabiendo esto, un valor de 10 significa en realidad 10 pixeles. Este atributo no es el único que usa como unidad de medida los pixeles, pero aprenderemos sobre los demás a medida que avancemos en los siguientes tutoriales.