Taller
>> Taller >> Curso de HTML by BenKo >> Cap. 7, Las odiadas tablas.

Capítulo 7

Las odiadas tablas


Aaaagghhh!!! Tablas...Las odio. Kuando estaba aprendiendo HTML nunca me gustaron porque eran muy pesadas de hacer (y de aprender). De todas maneras, tarde o temprano tendrás que utilzar las tablas, porque la verdad es que son muy útiles.

Etiquetas necesarias para hacer una tabla:

  • WIDTH: Ancho de la tabla. Se pone de manera absoluta (cantidad de pixels) o relativa al tamaño de la pantalla (%). De no indicar ningún tamaño la tabla se adapta al contenido.
  • BORDER: Grosor del borde de la tabla. Por defecto es 1. Si no quieres borde tienes que poner un 0.
  • BACKGROUND: Imagen de fondo.
  • BGCOLOR: Color de fondo
  • BORDERCOLOR: Color del borde
  • BORDERCOLORDARK: Color del lado sombreado del borde.
  • BORDERCOLORLIGHT: Color del lado iluminado del borde.
  • ALIGN: Alineación del texto interior. Puede tomar estos valores: RIGHT (derecha), CENTER (centro) y LEFT (izquierda). Valor por defecto LEFT
  • VALIGN: Alineación vertical del centro. Estos valores: TOP (arriba) MIDDLE (centro) y BOTTOM (abajo). Valor por defecto MIDDLE.
  • ROWSPAN: Número de filas que okupa.
  • COLSPAN: Número de columnas ke okupa.
  • WIDTH, BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORDARK y BORDERCOLORLIGHT: Igual que la etiqueta <TABLE>

Ahora sabrás por qué odio las tablas... Komo supongo que lo de arriba habrá sido una especie de shock, vamos a tomarnos las cosas con calma. Una tabla sencillita de 2x2:

<TABLE>
<TR>
	<TD>AAA</TD>
	<TD>BBB</TD>
</TR>
<TR>
	<TD>CCC</TD>
	<TD>DDD</TD>
</TR>
</TABLE>
AAA BBB
CCC DDD

Bieeeeen....Ahora lo mismo, pero con celdas de encabezamiento.

<TABLE>
<TR>
	<TH>AAA</TH>
	<TH>BBB</TH>
</TR>
<TR>
	<TD>CCC</TD>
	<TD>DDD</TD>
</TR>
</TABLE>
AAA BBB
CCC DDD

Ahora hacemos una celda que okupe dos columnas, para ello usamos, COLSPAN:

<TABLE>
<TR>
	<TH COLSPAN=2>AAA</TH>
</TR>
<TR>
	<TD>BBB</TD>
	<TD>CCC</TD>
</TR>
</TABLE>

 

AAA
BBB CCC

Guaauuuu...que chuli...Ahora vamos a hacer que una celda okupe dos filas y dos columnas (con ROWSPAN y COLSPAN):

<TABLE>
<TR>
	<TH ROWSPAN=2 COLSPAN=2>AAA</TH>
	<TH>BBB</TH>
</TR>
<TR>
	<TD>CCC</TD>
</TR>
</TABLE>
AAA BBB
CCC

Y ahora que sabemos más o menos cómo funcionan las tablas, sólo nos queda enterarnos qué elementos pueden estar dentro de una tabla: CUALKIER KOSA: Imágenes, links, GIF's animados, formularios, etc.

Bueno, lo mejor para aprender a usar tablas es practicar, así que ya sabes. Experimenta con los parámetros, cambia los colores, el borde, etc.

¿A ké esperas? ¡Pilla el Bloc de Notas ya!

 

P' atrás | Principio | P' alante