miércoles, 16 de mayo de 2012

Ejercicio 12. Creando tablas.

La mejor forma de organizar cosas en filas y columnas es una tabla.
Para añadir una tabla a nuestra página utilizaremos el tag <table></table>. Este tag se puede modificar así:
<table align="alineamiento" border="tamañoborde" width="anchura".
Donde "alineamiento" puede ser left, center o right; "tamañoborde" es un valor en píxeles para la anchura del borde y "anchura"es el ancho total de la tabla y se puede expresar en píxeles (width="200") o porcentajes (width="90%").

Si incluimos la tabla en nuestra página podría quedar así:

...
<li>Ordenando el texto </ul>
           <table align="center" border="1" width="75%" height="150">
           </table>
           <p><font color=#4ff3ff size=+2>Lola Mena </font><img src="f1.gif" alt="[Smile]">
           </p>

La tabla que hemos insertado sería una tabla alineada al centro, con un tamaño de borde de un pixel, cuyo ancho total ocuparía el 75% de la pantalla y de alto tendría 150 píxeles.

Pero para que la tabla tenga sentido tendremos que introducir las filas con el tag <tr></tr> y las columnas con el tag <td></td>.
Sería así:

...

<table align="center" border="1" width="75%" height="150">
<tr>
       <td>Primera fila, columna una</td>
       <td>Primera fila, columna dos</td>
       <td>Primera fila, columna tres</td>
       <td>...</td>
</tr>
           </table>

Podemos seguir introduciendo columnas según este esquema:


...

<table align="center" border="1" width="75%" height="150">
<tr>
       <td>Primera fila, columna una</td>
       <td>Primera fila, columna dos</td>
       <td>Primera fila, columna tres</td>
       <td>...</td>
</tr>
<tr>
       <td>Segunda fila, columna una</td>
       <td>Segunda fila, columna dos</td>
       <td>Segunda fila, columna tres</td>
       <td>...</td>
</tr>


           </table>

Podemos, como ya hemos dicho antes, modificar los parámetros de la tabla para que cambie. Haz algunos cambios y quédate con la tabla que más te guste:


...

<table align="center" border="1" width="75%" height="150">
<tr>
       <td align="center">Primera fila, columna una</td>
       <td align="left">Primera fila, columna dos</td>
       <td align="right">Primera fila, columna tres</td>
       <td>...</td>
</tr>
<tr align="center">
       <td>Segunda fila, columna una</td>
       <td>Segunda fila, columna dos</td>
       <td>Segunda fila, columna tres</td>
       <td>...</td>
</tr>


           </table>



No hay comentarios:

Publicar un comentario