HTML de Guerra. Las Tablas de la Ley . Clases Prácticas de HTML VI

Ahora si. Llegamos a la parte donde hablamos del control de la posición de los elementos de tu página. Con tablas.

Bueno, como recordarán, en el capítulo anterior ya teníamos una página web hecha. Pero siempre es interesante poder controlar dónde van colocadas las cosas en nuestras páginas. La página era así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Esta es una página web.</p>
<p>Contiene párrafos</p>
<p>Contiene <a href="http://www.tecnohispanos.com/" target="_blank">enlaces</a></p>
<p>Y contiene imágenes enlazadas:</p>
<p><a href="http://www.tecnohispanos.com" target="_blank">
<img src="imagen.jpg" width="100" height="50" alt="Esta es mi imagen" border="0"></a></p>
</body>
</html>

Ahora lo que queremos hacer es poner dos párrafos uno al lado del otro. Vamos a inventarnos un párrafo:

pour certains d’entre nous, au Festival de Cimiez dans la formation de Stéphane Persiani _ ; l’efficacité de la section rythmique est également à noter: le contrebassiste Clovis Nicolas, que l’on voit actuellement dans de nombreuses formations, et le batteur Franck Aghulon assurent au quintet un groove puissant et riche.
Et Pierre de Bethmann au Fender Rhodes, tout en restant authentique, s’approprie la nouvelle tendance Electro avec finesse.

No me pregunten que dice, yo no hablo francés. Es algo de jazz (Y por supuesto que no lo inventé, me lo copié de una página por ahi).

Bueno, lo primero es crear una tabla en nuestro documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
</table>
</body>
</html>

Pero esa tabla asi no nos sirve de nada. Tenemos que agregarle filas. Para eso utilizamos el tag TR el cual significa Table Row, o fila de tabla.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr></tr>
</table>
</body>
</html>

Listo, ya tenemos un row, ahora nos interesa tener columnas. Lo que usamos para definirlas son los TD que significan Table Data o datos de la tabla. También las llamamos celdas o cells. Vamos a poner dos.

Como podemos ver, ahora nuestra tabla tiene una fila, delimitada por los tags <tr> y </tr>, y dos columnas, delimitadas cada una por los tags <td> y </td>. Le agregamos el atributo border=”1″ para que se vea lo que estamos haciendo. El resultado debe verse asi:

Columna 1 Columna 2

¿Vamos bien? Ok. vamos a ir jugando con esta tabla para que se vayan viendo los diferentes atributos que se le pueden poner a la tabla y a las celdas. Primero vamos a darle un tamaño. Digamos 300 pixels de ancho:

Vamos a concentrarnos sólo en el código de la tabla, asi que eliminaremos lo que sobra para fines didácticos (¿me salio erudito eso eh?) :

<table width=”300″ border=”1″> <tr> <td>Columna 1</td> <td>Columna 2</td> </tr></table>


Debe verse asi:

Columna 1 Columna 2

Ok, analicemos que hemos hecho. La tabla tiene un borde de 1, un ancho (width) de 300 pixels. ¿Ese width no te suena conocido? Claro, lo vimos en la sesión anterior como el ancho de la imagen. Muchos tags html tienen ese atributo.

¿Que te parece si centramos la tabla?

<table width=”300″ border=”1″ align=”center”>
<tr>
<td>Columna 1</td>
<td>Columna 2</td>
</tr>
</table>

Lo cual debe verse asi:

Columna 1 Columna 2

¿Cool eh? Lo hicimos insertando el atributo align con un valor de “center”.

Ahora veamos que podemos hacer con ese texto que esta dentro de las columnas. Digamos que queremos que la Columna 2 este alineada a la derecha. Lo que haríamos sería lo siguiente:

<table width=”300″ border=”1″ align=”center”>
<tr>
<td>Columna 1</td>
<td align=”right”>Columna 2</td>
</tr>
</table>

¿Ves el atributo de align nuevamente? Eso significa que cada celda es independiente de las otras en su alineamiento. Debe verse asi:

Columna 1 Columna 2

Como ves, por defecto se alinea hacia la izquierda a menos que le indiquemos que queremos otra cosa.

Ahora vamos a añadir otra fila:

<table width=”300″ border=”1″ align=”center”>
<tr>
<td align=”center”>Columna 1</td>
<td align=”right”>Columna 2</td>
</tr>
<tr>
<td>Columna 1 abajo</td>
<td align=”center”>Columna 2 abajo</td>
</tr>
</table>

Y debe verse asi:

Columna 1 Columna 2
Columna 1 abajo Columna 2 abajo

Hasta ahora, todo esto esta bien… ¿pero como me ayuda esto a posicionar lo elementos de la página? ¡Ese borde está bien feón!

Bueno, entonces sencillamente le desparecemos el borde cambiandole el valor al atributo border y se lo ponemos en 0

<table width=”300″ border=”0″ align=”center”>
<tr>
<td align=”center”>Columna 1</td>
<td align=”right”>Columna 2</td>
</tr>
<tr>
<td>Columna 1 abajo</td>
<td align=”center”>Columna 2 abajo</td>
</tr>
</table>

Ahora debe verse asi:

Columna 1 Columna 2
Columna 1 abajo Columna 2 abajo

¿Que te parece? Ahora si le tenemos utilidad eh?

Con eso, facilmente posicionaríamos el párrafo en francés que pusimos al principio:

<table width=”400″ border=”0″ align=”center”>
<tr>
<td align=”left”>pour certains d’entre nous, au Festival de Cimiez dans la
formation de Stéphane Persiani _ ; l’efficacité de la section
rythmique est également à noter: le contrebassiste Clovis
Nicolas, que l’on voit actuellement dans de nombreuses formations, et le
batteur Franck Aghulon assurent au quintet un groove puissant et riche.
<br>
Et Pierre de Bethmann au Fender Rhodes, tout en restant authentique, s’approprie
la nouvelle tendance Electro avec finesse. </td>
<td align=”right”>pour certains d’entre nous, au Festival de Cimiez dans la
formation de Stéphane Persiani _ ; l’efficacité de la section
rythmique est également à noter: le contrebassiste Clovis
Nicolas, que l’on voit actuellement dans de nombreuses formations, et le
batteur Franck Aghulon assurent au quintet un groove puissant et riche.
<br>
Et Pierre de Bethmann au Fender Rhodes, tout en restant authentique, s’approprie
la nouvelle tendance Electro avec finesse. </td>
</tr>
<tr>
<td>Columna 1 abajo</td>
<td align=”center”>Columna 2 abajo</td>
</tr>
</table>

¿Se complicó la cosa? Nah! Es lo mismo, fíjate bien. Lo único que hice fue meterle el texto de los párrafos y abrir un poco la tabla para que tenga 400 de ancho. Mira como se vería:

pour certains d’entre nous, au Festival de Cimiez dans la formation de Stéphane Persiani _ ; l’efficacité de la section rythmique est également à noter: le contrebassiste Clovis Nicolas, que l’on voit actuellement dans de nombreuses formations, et le batteur Franck Aghulon assurent au quintet un groove puissant et riche.
Et Pierre de Bethmann au Fender Rhodes, tout en restant authentique, s’approprie la nouvelle tendance Electro avec finesse.
pour certains d’entre nous, au Festival de Cimiez dans la formation de Stéphane Persiani _ ; l’efficacité de la section rythmique est également à noter: le contrebassiste Clovis Nicolas, que l’on voit actuellement dans de nombreuses formations, et le batteur Franck Aghulon assurent au quintet un groove puissant et riche.
Et Pierre de Bethmann au Fender Rhodes, tout en restant authentique, s’approprie la nouvelle tendance Electro avec finesse.
Columna 1 abajo Columna 2 abajo

Ahora si te gustó ¿eh?

Bueno, por lo pronto vamos a dejar este tema aquí para no enredar más el asunto. Porque recuerda que somos geeks, tecnófilos y *tenemos* que enredarlo.

Pero será en otra ocasión.

Deja un comentario

A %d blogueros les gusta esto: