Site hosted by Angelfire.com: Build your free website today!

Manual De Html

tablas en html: <table>

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.

En un principio nos podría parecer que las tablas son raramente útiles y que pueden ser utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma organizada. Nada más lejos de la realidad.

Hoy, gran parte de los diseñadores de páginas basan su maquetación en este tipo de artilugios. En efecto, una tabla nos permite organizar y distribuir los espacios de la manera más optima. Nos puede ayudar a generar texto en columnas como los periódicos, prefijar los tamaños ocupados por distintas secciones de la página o poner de una manera sencilla un pie de foto a una imagen.

Puede que en un principio nos resulte un poco complicado trabajar con estas estructuras pero, si deseamos crear una página de calidad, tarde o temprano tendremos que vérnoslas con ellas y nos daremos cuenta de las posibilidades nos ofrecen.

Para empezar, nada más sencillo que por el principio: las tablas son definidas por las etiquetas <table> y </table>.

Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imágenes que darán forma y contenido a la tabla.

Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas líneas es definida por otra etiqueta y su cierre: <tr> y </tr>

Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas será donde coloquemos nuestro contenido.

Aquí tienes un ejemplo de estructura de tabla:

<table> 
  <tr> 
    <td>Celda 1, linea 1</td> 
    <td> Celda 2, linea 1</td> 
  </tr> 
  <tr> 
    <td> Celda 1, linea 2</td> 
    <td> Celda 2, linea 2</td> 
  </tr> 
</table>
asi se vera:
Celda 1, linea 1 Celda 2, linea 1
Celda 1, linea 2 Celda 2, linea 2

Podemos usar prácticamente cualquier tipo de etiqueta dentro de la etiqueta <td> para, de esta forma, dar forma a su contenido.

Las etiquetas situadas en el interior de la celda no modifican el resto del documento.

Las etiquetas de fuera de la celda no son tenidas en cuenta por ésta.

Así pues, podemos especificar el formato de nuestras celdas a partir de etiquetas introducidas en su interior o mediante atributos colocados dentro de la etiqueta de celda <td> o bien, en algunos casos, dentro de la etiqueta <tr>, si deseamos que el atributo sea valido para toda la línea.

Veamos a continuación algunos atributos útiles para la construcción de nuestras tablas. Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una línea:

align=
alinea el texto de la celda del mismo modo que si fuese el de un párrafo.

valign=
Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda.

bgcolor=
Da color a la celda o línea elegida

bordercolor
Define el color del borde.

usemos estos atributos para hacer un ejemplo:

<html>
  <head>
    <title>ejemplos de atributos de celdas</title>
  </head>
  <body>
   <table>
     <tr>
       <td bgcolor=red align=center valign=middle>hola</td>
       <td bgcolor=blue align=right valign=top>adios </td>
     </tr>
   </table>
  </body>
</html>
asi se verá: ejemplo de atributos de tabla

Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea son:

background=
Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.

height=
Define la altura de la celda en pixels o porcentaje.

width=
Define la anchura de la celda en pixels o porcentaje.

colspan=
Expande una celda horizontalmente.

rowspan=
Expande una celda verticalmente.

ejemplos de estos atributos en las celdas son los siguientes:
ejemplo de background en la celda , width y height

<table border=1>
 <tr>
   <td background=ss219.jpg width=60% height=30%>
    hola a todos</td>  
   <td background=ss005.jpg width=40% height=30%>
   adios a todos</td>
 </tr>
</table>
así se ve:
hola a todos adios a todos

ejemplo del uso del colspan y rowspan

primero vemos si no lo usamos para que se note la diferencia de lo que hablo

<table border=2>
 <tr>
   <td bgcolor=red width=100>1</td>
 </tr>
 <tr>
   <td bgcolor=green width=100>2</td>
   <td bgcolor=yellow width=100>3</td>
 </tr>
</table>
asi se ve

1
2 3

ahora usemos colspan

<table border=2>
 <tr>
   <td bgcolor=red width=100 colspan=2>1</td>
 </tr>
 <tr>
   <td bgcolor=green width=100>2</td>
   <td bgcolor=yellow width=100>3</td>
 </tr>
</table>
asi se ve ahora:
1
2 3

el valor de colspan es el numero de celdas que deseamos que se unan

ahora usemos rowspan . asi se vera sin rowspan

<table border=2>
 <tr>
   <td bgcolor=red width=100>1</td>
    <td bgcolor=blue width=100>2</td>
</tr>
 <tr>
   <td bgcolor=green>3</td>
 </tr>
 <tr>
   <td bgcolor=yellow width=100>4</td>
  </tr>
</table>
asi se ve:
1 2
3
4
ahora usemos rowspan:
<table border=2>
 <tr>
   <td bgcolor=red width=100>1</td>
    <td bgcolor=blue width=100>2</td>
</tr>
 <tr>
   <td bgcolor=green>3</td>
 </tr>
 <tr>
   <td bgcolor=yellow width=100>4</td>
  </tr>
</table>
asi se vera:

1 2
3
4

ATRIBUTOS DE TABLAS:

Además de los atributos específicos de cada celda o línea, las tablas pueden ser adicionalmente formateadas a partir de los atributos que nos ofrece la propia etiqueta <table>. He aquí aquellos que pueden parecernos en un principio importantes:

align=
Alinea horizontalmente la tabla con respecto a su entorno.

background= Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.

bgcolor=
Da color de fondo a la tabla.

border= Define el número de pixels del borde principal.

bordercolor=
Define el color del borde.

cellpadding=
Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma.

cellspacing=
Define el espacio entre los bordes (en pixels).

cellspacing=
Define el espacio entre los bordes (en pixels).

height=
Define la altura de la tabla en pixels o porcentaje.

width=
Define la anchura de la tabla en pixels o porcentaje.

ahora hagamos unos ejemplos de estas propiedades:

<table border=3 width=50% align=center bordercolor=blue>
 <tr>
  <td bgcolor=red align=center>bienvenidos</td>
 </tr>
</table>
asi se ve:
bienvenidos

ahora haremos un ejemplo de tablas anidadas o tablas dentro de tablas

<html>
 <head>
   <title>tablas anidadas</title>
 </head>
 <body bgcolor=black text=white>
 <table width=100% border=1 cellspacing=3 background=chain_bar_t.gif>
 <tr>
 <td background=Ss020.jpg align=center><pre>

<pre><table width=75% align=center border=2>
 <tr>
  <td align=center><h1> esta es una tabla anidada </h1>
 <pre>



</pre></td></tr></table>
<pre>
</pre>
</td></tr></table>
<pre>

</pre>
</body>
</html>

así se vera: ejemplo de anidacion de tablas


atras siguiente indice