TABLAS construción

La estructura de una tabla esta conformada por las siguientes etiquetas:

< table > Encierra toda la estructura de la tabla < /table >
< tr > Encierra todas las cerdas de una linea < /tr >
< td > Conforma una celda < /td >

Veamos la estructura completa de una tabla

Código:

<table>
    <tr>
          <td> Celda1-Fila1 </td>
          <td> Celda2-Fila1 </td>
    </tr>
    <tr>
            <td> Celda1-Fila2 </td>
            <td> Celda2-Fila2 </td>
    </tr>
</table>

Ejemplo: Se vería así

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2	Celda2-Fila2

Para ver los bordes de las celdas utilizaremos el atributo BORDER

< table border >

Ejemplo: Se vería así

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2	Celda2-Fila2

Podemos hacer que el borde sea mas grueso, dandole un valor a border

< table border=5 >

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2	Celda2-Fila2

Podemos centrar la tabla a la pantalla con el atributo ALIGN=CENTER

< table border=5 align=center >

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2	Celda2-Fila2

Filas con desigual número de celdas
La estructura sería

Código:

<table border=5 align=center>
    <tr>
            <td> Celda1-Fila1 </td>
            <td> Celda2-Fila1 </td>
    </tr>
    <tr>
            <td> Celda1-Fila2 </td>
    </tr>
</table>

Tendriamos

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2

Celda que abarca varias columnas o filas:
--Varias columnas < tr >< td colspan=2 > Abarca 2 columnas < /td >< /tr >

Celda1-Fila1	Celda2-Fila1
Abarca 2 columnas

--Varias filas < tr >< td rowspan=2 > Abarca 2 filas < /td >< /tr >

Abarca 2 filas	Celda2-Fila1
	Celda2-Fila2

Separación entre celdas < table border=5 align=center cellspacing=20 >

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2	Celda2-Fila2

Separación entre el borde y el contenido de las cerdas
< table border=5 align=center cellspacing=20 cellpadding=20 >

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2	Celda2-Fila2

Colocar una tabla dentro de una celda

Código:

<table border=5 align=center cellspacing=20 cellpadding=20>
    <tr>
            <td rowspan=2>
                  <table border=2>
                      <tr>
                              <td> C1/F1 </td>
                              <td> C2/F1 </td>
                      </tr>
                      <tr>
                              <td> C1/F2 </td>
                              <td> C2/F2 </td>
                      </tr>
                  </table>
            </td>
            <td> Celda2-Fila1 </td>
    </tr>
    <tr>
            <td> Celda2-Fila2 </td>
    </tr>
</table>

C1/F1 C2/F1 C1/F2 C2/F2	Celda2-Fila1
	Celda2-Fila2

Contenido de la cerda:
Pueden contener texto, imagen, enlaces e incluyendo una tabla como vimos anteriormente

	Imagen - Texto - Enlace
	Ver desierto

Posición del contenido dentro de la celda
-- Horizontal - Por defecto se alinea a la izquierda
-- Vertical - Por defecto se alinea en el medio

ETIQUETA	ALINEACION DEL CONTENIDO
< td align=center > CENTRO < /td >	CENTRO
< td align=derecha > A LA DERECHA < /td >	A LA DERECHA
< td valign=top > ARRIBA < /td >	ARRIBA
< td valign=bottom > ABAJO < /td >	ABAJO

Variar las dimensiones de la tabla:
Para esto utilizaremos los atributos WIDTH y HEIGHT en porcentaje a la dimensión de pantalla o en número de pixels.

< TABLE WIDTH=400 >

ARRIBA

ABAJO

< TD WIDTH=200 >

ARRIBA

ABAJO

< TABLE HEIGHT=200 >

ARRIBA

ABAJO

COLOR DE FONDO EN LAS TABLAS
Para ello utilizamos el atributo BGCOLOR="#XXYYZZ"
Colocando el atributo dentro de la etiqueta de la tabla, coseguimos un color para toda la tabla

< TABLE BGCOLOR="#0000FF" >

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2	Celda2-Fila2

Colocando el atributo dentro de la etiqueta de una celda

< TD BGCOLOR="#00FF00" >

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2	Celda2-Fila2

Podemos tener un color para toda la tabla, pero que una celda tenga otro color.
Para esto combinaremos los dos ejemplos anteriores

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2	Celda2-Fila2

Código:

<table border=5 align=center bgcolor="#0000ff">
    <tr>
            <td>Celda1-Fila1</td>
            <td bgcolor="#00ff00">Celda2-Fila1</td>
    </tr>
    <tr>
            <td>Celda1-Fila2</td><td>Celda2-Fila2</td>
    </tr>
</table>

IMAGENES DE FONDO EN LA TABLA
Para ello usaremos el atributo BACKGROUND="URL DE LA IMAGEN"

Si lo utilizamos en la etiqueta < TABLE BACKGROUND="Url de la imagen" > esta se multiplicara para cada una de las celdas

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2	Celda2-Fila2

Si lo utilizamos en la etiqueta < TD BACKGROUND="Url de la imagen" > esta se vera solo en la celda

Celda1-Fila1	Celda2-Fila1
Celda1-Fila2	Celda2-Fila2

ATT: tironemota