Curso de HTML, Tema 10, las tablas

Publicado el 30 diciembre 2013 por Liher

En esta nueva entrega del curso de HTML os voy a hablar de las tablas. En su día, antes de la aparición del CSS las tablas se usaban para posicionar los elementos dentro de una pagina web. Digamos que se hacia una especia de mapa con la tabla y dentro de ella se colocaban los elementos, era una forma de posicionar el contenido de la pagina web. Hoy en día con el CSS eso no hace falta. Os voy a mostrar como es la sintaxis de una tabla en la siguiente pagina web:

<html>

<body>

<h1>Ejercicio con una tabla</h1>

<tr>

<td>Numero de usuarios</td><td>500</td>

</tr>

<tr>

<td>Numero de paginas</td><td>30000</td>

</tr>

</table>

</body>

</html>

Una tabla es como un cuadro dividido en partes. La sintaxis es muy sencilla, primero iniciamos la tabla con la etiqueta "<table>", después con "<tr>" indicamos el inicio de una fila y cada elemento de dicha fila lo ponemos con "<td>". La etiqueta "<table>" tiene un atributo que podemos poner aunque no es obligatorio, pero lo he puesto para que veías las separaciones de la table y es "border="1"". El numero indica el grosor de los bordes. Si lo quitamos no veremos las divisiones de la tabla. Al ejecutar el código anterior veremos lo siguiente en el navegador:

Vemos como hemos creado la tabla y cada parte. Tenemos la posibilidad de juntar tanto filas como columnas. Esto se hace de una forma bastante sencilla con los atributos "rowspan" y "colspan". En el ejemplo anterior vamos a juntar las dos columnas de la primera fila, hay que tener en cuenta que al juntar los columnas de una fila pasaremos a tener un elemento en vez de dos en esa fila, por lo tanto solo habrá que poner un texto entre "<td>" y "</td>" como os muestro en el código siguiente:

<html>

<body>

<h1>Ejercicio con una tabla</h1>

<tr>

<td colspan="2">Numero de usuarios 500</td>

</tr>

<tr>

<td>Numero de paginas</td><td>30000</td>

</tr>

</table>

</body>

</html>

Ahora en el navegador veremos lo siguiente :

Como veis se han juntado las dos columnas de la primera fila. Si queremos juntar en el primer ejemplo las dos filas de la primera columna se hará de la siguiente manera:

<html>

<body>

<h1>Ejercicio con una tabla</h1>

<tr>

<td rowspan="2">Numero de usuarios y numero de paginas</td><td>500</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Con este código veremos en el navegador lo siguiente:

Como podéis ver en el código cuando juntamos columnas o filas hay que tener presente que si juntamos dos columnas de una fila, por ejemplo, el numero de elementos para no poner de mas o de menos. Si miráis bien el código podéis comprobar lo que os digo. De todas formas si alguien tiene dudas me lo puede decir que le atenderé gustosamente.

Si te ha gustado el contenido o te ha servido para algo compártelo en las redes sociales y así puede que le sirva también a otra persona, muchas gracias.