Tablas en HTML

Tablas en html rowspan colspan

En este artículo te enseñare a crear tablas básicas y avanzadas.
Las tabla se componen de dos elementos: Las filas y las columnas. La combinación de una fila con una columna forma una celda. Una celda es un lugar donde almacenamos información, no te preocupes si no lo entiendes, sigue leyendo y te será más claro.

Una columna determina la posición vertical de una celda.
Una fila determina la posición horizontal de una celda.

La sintaxis básica de una tabla es la siguiente:

Tablas en HTML

El resultado del código anterior es el siguiente:
Tablas en html celdas

Como puedes observar, la etiqueta <tr> nos permite seleccionar el inicio y el fin de una columna, en cambio, la etiqueta <td> nos permite agregar filas a la columna. La combinación de una columna con una celda, forma una celda. Ejemplo: Columna 2, fila 3 = Celda 6.

Podemos definir un título para cada columna de nuestras tablas, para que quede de la siguiente manera:

Tablas con titulos en html

Para esto, es necesaria la etiqueta <th>, es muy simple de usar, ya que, en vez de escribir en la primera columna la etiqueta <td>, escribimos esta etiqueta.

Tablas con titulo en negritas html td th tr

Ahora supongamos que queremos llevar a cabo la siguiente tabla:

Tablas en html rowspan colspan
Puedes notar que la celda que dice “Total:” utiliza 3 filas, podemos hacer esto gracias a la propiedad colspan, cuya sintaxis es:

<td colspan=”x”>

Nota: x=número de filas a ocupar, en nuestro caso son 3.

Con esa sentencia le decimos al navegador que reserve 3 filas para esa celda.

Aquí está el código de la tabla anterior:

Tablas en HTML usando colspan y rowspan
Si queremos utilizar más de una columna para alguna celda, necesitamos utilizar la propiedad rowspan.
Ejemplo de una tabla con rowspan=”2″:
Ejemplo de tablas con rowspan="2"
Debes tener cuidado al unir filas y/o columnas, ya que un error puede producir un resultado indeseado.
Espero que este artículo les haya sido de utilidad.

Encontrarás más información sobre tablas en la página oficial del  W3C.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s