Crear tablas HTML

por Alex el 11/8/2010, 10:28 am

CREAR TABLAS HTML

¡¡Hola a todos!!

En este tutorial aprenderéis a crear sencillas tablas pero muy útiles en HTML. Construir tablas con HTML puede parecer, al principio, complicado, pero si no pierdes la calma y andas con ojo, en realidad es de lo más lógico: como todo en HTML.

Antes de nada, 3 cosas para tener claras en las tablas HTML:

* La etiqueta de inicio <table> y la etiqueta de cierre </table> inician y finalizan la tabla. Lógico.
* <tr> es la abreviatura de "table row" (es decir, fila de la tabla) e inicia y finaliza las filas horizontales. Lógico también.
* <td> es la abreviatura de "table data" (es decir, datos de la tabla). Esta etiqueta inicia y finaliza cada una de las celdas que componen las filas de la tabla. Todo sencillo y lógico.

Veamos para empezar algo básico, lo primero que haremos será crear una tabla sin bordes. Utilizaremos este código:

Código:: <table> <tr> <td>Celda 1</td> <td>Celda 2</td> <tr> <td>Celda 3</td> <td>Celda 4</td> </table>

Y veremos una cosa así en nuestro navegador:

Celda 1 Celda 2
Celda 3 Celda 4

Bien, ahora os preguntaréis, ¿pero porqué no tiene bordes?. Bien esto se llaman atributos, uno de ellos es el borde, que se aplica mediante la palabra "border"

Veamos un código de ejemplo para que sirva de guía y podáis crearla a vuestro gusto obviamente con el borde.

Código:: <table bgcolor="blue" border="4" bordercolor="yellow" cellpadding="2" cellspacing="2" align="center"> <tr> <td>Celda 1</td> <td>Celda 2</td> <tr> <td>Celda 3</td> <td>Celda 4</td> </table>

Y veremos algo así:

Ahora les explicare cada atributo del codigo para que puedan modificarlo a su gusto...

bgcolor="blue": podemos reemplazar "blue" por otro color pero atencion los colores se reemplazan con los nombres pero en ingles.

border="4":con esto podemos definir el grosor del borde reemplazandolo siempre con un numero.

bordercolor="yellow":aca podremos modificar el color del borde segun el nombre en ingles del color que quieras.

cellpadding="2":indica el espacio entre el borde de la celda y el contenido de la celda.

cellspacing="2":indica el espacio entre cada celda.

align="center":indica la alineacion de la tabla si es,center o right o left.

----------------

Eso es todo, decir que el tutorial está 100% creado por mi. Espero que os sea útil y que lo disfrutéis.

Tutorial Creado por : puduk - 11/08/2010
Tutorial Actualizado por : Lopezito - 11/08/2010
Copyrigth © HAZBLOG.COM