Las tablas en HTML | El blog de Liher

En este articulo os voy a mostrar que son y como crear tablas en HTML. Las tablas eran muy usadas hace años para poder organizar los elementos de la pagina web y poder ponerlos en diferentes puntos del navegador. Hoy en día ya no se usan para eso ya que para posicionar los elementos se usa CSS, que es mas flexible y nos permite muchas mas posibilidades.

Una tabla es un conjunto de celdas dispuestos en forma de filas y columnas, y dentro de cada celda podemos poner el contenido que queramos, tanto imágenes como texto. Hoy en día ya solo se usan para mostrar información tabulada, por ejemplo es algo útil para hacer un calendario. La sintaxis de las tablas es sencilla, primero iniciamos la tabla con ta etiqueta «table», cada linea es definida por la etiqueta «tr» y cada elemento de dicha linea por «td». Os pongo un ejemplo de una table de 2 filas y tres columnas:

<html>

<head></head>

<body>
	<table border="1">
		<tr>
			<td>Elemento 1</td><td>Elemento 2</td><td>Elemento 3</td>
		</tr>

		<tr>
			<td>Elemento 4</td><td>Elemento 5</td><td>Elemento 6</td>
		</tr>
	</table>
</body>

</html>

En la etiqueta «table» he añadido el atributo «border» con valor «1» para que se vea el borde de los elementos de la tabla. La pagina mostraría lo siguiente:

Podemos añadir varios atributos a los elementos de una tabla en HTML, tanto a las celdas por separado como a una fila entera de celdas. Los atributos que podemos usar para una linea entera de celdas o para una celda en concreto con los siguiente:

align – sirve para alinear o justificar el texto en sentido horizontal, sus posibles valores son «left» izquierda, «right» derecha y «center» centrado.
valign – para alinear el texto en sentido vertical, sus posibles valores son «top» arriba, «bottom» abajo y «middle» centrado.
bgcolor – da color a la celda elegida o a la linea entera.

Hay otros atributos que solo se los podemos ponemos a las celdas de una en una y son:

background – nos permite poner una imagen de fondo a una celda.
height – para determinar el tamaño de la celda en sentido vertical, se puede indicar en numero con pixels o por porcentaje.
width – para determinar el tamaño de la celda en sentido vertical, también se puede poner en pixels o porcentaje.
colspan – une dos o mas celdas contiguas en sentido horizontal.
rowspan – une dos o mas celdas contiguas en sentido vertical.

Algunos de estos atributos, intentare que sean la mayoría, los aplicare a una tabla que haré dentro de una pagina web al final del articulo para que podáis verlos como funcionan y en el vídeo explicare con ejemplo como funcionan.

También podemos ponerle atributos a la etiqueta «table» y algunos de ellos son los siguientes:

align – alinea la tabla con respecto a su entorno.
background – nos permite poner una imagen de fondo a la tabla.
bgcolor – para poner un color de fondo a la tabla.
border – define si la tabla tiene borde o no y su grosor en pixels.
cellpadding – sirve para indicar la distancia que hay entre el borde de la celda y su contenido.
cellspacing – para definir distancia entre las celdas.
height – define el tamaño en sentido vertical.
width – define el tamaño en sentido horizontal.

Aquí os dejo un ejemplo con algunos de estos atributos:

<html>

<head></head>

<body>
	<table border="1" cellpadding="20" cellspacing="20">
		<tr align="center" bgcolor="blue" valign="middle">
			<td>Elemento 1</td><td height="100" width="100">Elemento 2</td><td>Elemento 3</td><td>Elemento 4</td><td>Elemento 5</td><td>Elemento 6</td>
		</tr>

		<tr>
			<td colspan="2">Elementos 7 y 8</td><td>Elemento 9</td><td>Elemento 10</td><td>Elemento 11</td><td rowspan="2" background="fondo.jpg">Elementos 12 y 18</td>
		</tr>

		<tr>
			<td>Elemento 13</td><td>Elemento 14</td><td>Elemento 15</td><td>Elemento 16</td><td>Elemento 17</td>
		</tr>
	</table>
</body>

</html>

Hay que tener en cuenta que cuando utilizamos el atributo «rowspan» para unir dos celdas en sentido vertical, en la siguiente fila hay que poner un elemento menos y, si unimos dos celdas en sentido horizontal con el atributo «colspan» hay que poner un elemento menos en la fila que lo pongamos.

Todo esto lo veréis mejor en el vídeo donde voy a hacer la pagina que he puesto de ejemplo desde cero y ademas iré cambiando algunas cosas para ver su funcionamiento. Aquí os dejo el vídeo de las tablas en HTML: