miércoles, 19 de noviembre de 2008

Tablas en código HTML: Número de Filas, celdas y columnas.

Como ya he explicado en diferentes ocasiones, el lenguaje por el que se crean las web se denomina código HTML, y actualemente, estamos llegando al XHTML. Y cómo éste código es con el que se crea las webs, todo lo que veas en una web es porque anteriormente se ha estado haciendo con dicho código, es decir, todo lo que se te ocurra se puede hacer con HTML.

Uno de los elementos más comunes y prácticos son las tablas, que acontinuación explico cómo crear. Las tablas están formadas por dos tipos de unidades, las filas y las columnas, y el punt donde se une una fila con una columna es denominado celda.

CREACIÓN DE TABLAS

En el código HTML hay tres tipos de etiquetas esenciales de una tabla: table -> Indica el inicio y fin de una tabla. tr -> Indica el inicio de una nueva fila. td -> Indica el inicio de una nueva celda (para que quede más claro, sería una nueva columna dentro de una fila). Como ya se sabe, siempre se ponen estas etiquetas dentro de los símbolos <>; y para cerrar las etiquetas se indica el mismo código pero incluyendo el símbolo / delante de la etiqueta. Veamos un ejemplo:



Rojo
Amarillo
Naranja


CREACIÓN DE TABLAS

Si lo que se quiere es poner varias filas, después de cerrar una etiqueta tr se vuelve a abrir otra similar.


ANCHO DEL BORDE

En el caso anterior vemos tan sólo las palabras porque no tenemos ningún borde. Para poder verlo tendríamos que incluir la etiqueta border Esta etiqueta la colocamos justo detrás de la palabra table y después de incluyen los símbolos ="Valor".


Rojo
Amarillo
Naranja

FILAS DE ENCABEZADO

Además podemos hacer que algunas de las filas sean filas de encabezado (normalmente la primera) y los navegadores la distinguen destacándola sobre las demás, normalmente la colocan en negrita y centrada en el centro. Su etiqueta es th.


RojoAmarilloNaranja
FresaLimónMelocotón


UNIR CELDAS

Otra de las opciones en la modificación de las tablas es la de unir varias celdas, para ello se utilizan las etiquetas rowspan (para unir de forma vertical) y colspan (para unir de forma horizontal).

InglaterraPortugalBrasil
EuropaAmérica

EuropaEspaña
Francia
AméricaCanadá

PRÓXIMAMENTE

Lógicamente, las opciones de definir una tabla no sólo se limitan al número de celdas, filas y columnas, también se pueden modificar los tamños de las celdas, los colores y anchos de los bordes, los colores de fondo, etc.
Pero estos apartados los trataré más adelante, de momento, nos quedamos con decidir el número de cedas que usaremos en las tablas.

1 comentario:

Neutralidad Digital dijo...

Muy buen trabajo. Saludos!

ah y gracias por el link ;)

Fecha

Proyecto final

Ya queda menos...