Tablas tipos y diseño.

Las tablas que se enumeran a continuación se usan en los posts, gadgets HTML/Javascript...Es una herramienta más que puede usarse para albergar menús sencillos, enlaces, textos, ...

■ Básicamente está compuesta por las órdenes:

<table> : inicio de una tabla.
<tr> : inicio de la primera fila.
<td> : inicio del código o contenido de la columna.
<td> : fin del código o contenido de la columna.
</tr> : fin de la primera fila.
</table> : fin de una tabla.

• Tabla-Básico: tiene la estructura...

<table><td>Texto o código</td></table>

Texto o código

Para que se vea el borde o grosor de la tabla le añadimos la orden border= "un número". Por ejemplo: border=1 , border=2 , border=5 .... La cifra dependerá de la anchura que se necesite en ese momento.

Efecto añadiendo el atributo "border":

<table border=3><td>Texto o código</td></table>

Texto o código

• A una tabla simple se le pueden añadir columnas. Para ello basta con jugar con los códigos <td></td>. Pueden añadirse tantas columnas como uno desee.

Ejemplo con sólo columnas:

Columna 1

Columna 2

Columna 3

Columna 4

<table border=1><td>Columna 1</td><td>Columna 2</td><td>Columna 3</td><td>Columna 4</td></table>

• Supongamos que añadimos filas bajo esas columnas para incorporar códigos, frases, información de cualquier tipo...

Columna 1	Columna 2	Columna 3	Columna 4
Texto Fila 1	Texto fila 2	Texto Fila 3	Texto fila 4

<table border=1><td>Columna 1</td><td>Columna 2</td><td>Columna 3</td><td>Columna 4</td><tr><td>Texto Fila 1<td>Texto fila 2</td><td>Texto Fila 3<td>Texto fila 4</td> </table>

Otra forma de explicarlo visualmente

<table>

<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
</tr>

<tr>
<td>Contenido 3</td>
<td>Contenido 4</td>
</tr>

<tr>
<td>Contenido 5</td>
<td>Contenido 6</td>
</tr>

</table>

Contenido 1	Contenido 2
Contenido 3	Contenido 4
Contenido 5	Contenido 6

**El contenido 1 y 2 pertenecen a la misma fila (<tr> </tr>) pero se situan en distintas columnas (<td> </td>)

■ Otro ejemplo:

Columna 1, fila 1	Columna 2, fila 1	Columna 3, fila 1
Columna 1, fila 2	Columna 2, fila 2	Columna 3, fila 2

<br /><table border=1><td>Columna 1, fila 1</td><td>Columna 2, fila 1</td><td>Columna 3, fila 1</td><tr><td>Columna 1, fila 2<td>Columna 2, fila 2<td>Columna 3, fila 2</td></table><br />

Es un ejemplo en que se han introducido dos filas y tres columnas. El truco reside en aplicar a las celdas los códigos td o tr.


► Lo divertido es que a estos códigos se le puede aplicar efectos como color en el fondo <bgcolor="#F5D0A9"> , color en el borde <bordercolor="#000000"> , color de la fuente <font color"#0B0B61"></font> (Sin olvidar la cifra que podemos dar a border= )
Estas características se colocan en el inicio del código cuando se define la tabla. <table>

Ejemplo:

Texto o código o lo que queramos

<table border=5 bordercolor="#000000" bgcolor="#F5D0A9"><td><font color"#0B0B61">Texto o código o lo que queramos</font></td></table>

■ Cómo colocar un enlace en una tabla:

Blog de Lujo

<table border=3><td><a href="http://www.blogdelujo.com">Blog de Lujo</a></td></table>

■ Cómo colocar una imagen en una tabla:

<table border=3><td><img src="http://lo que siga para completar la url de la imagen" </td></table>




■ Resaltar un texto con color de fondo:

Texto y más texto Texto y más texto Texto y más texto

<table bgcolor="#58ACFA"><tbody><tr><td><p align="justify"><strong> Texto y más texto </strong></p></td></tr></tbody></table>

Donde: aling = CENTER | LEFT | RIGHT, tbody es dependiente de la etiqueta table y
<strong> marca la negrita.

■ Una característica es que a través de WIDTH= a un porcentaje se le puede añadir una medida determinada.
Ejemplo:

rosas	claveles
margaritas	lilas

<TABLE BORDER WIDTH=40%>

<TR><TD>rosas</TD><TD>claveles</TD></TR>

<TR><TD>margaritas</TD><TD>lilas</TD></TR>

</TABLE>


También, (como al resto), se le pueden añadir caracteríticas como color, fondos, grosor...


Tablas con Colspan y Rowspan

Es la forma de fusionar celdas en una tabla.

rowspan: Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.

colspan: Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.

De esta forma si ponemos <td colspan="2"> quiere decir que la celda actual se extiende en el ancho de dos celdas.

Algo parecido ocurre si ponemos <td rowspan="3"> la celda ocupará en alto de 3 celdas normales.

Ejemplo:

Si visualizamos esta tabla, podemos observar que la primera celda ocupa tres filas, y no sobrepasa la altura total de las tres celdas que tiene a la derecha.

Países Europeos	España	Madrid
	Francia	París
	Reino Unido	Londres
Países Americanos	EEUU	Washington
	Canadá	Toronto
	México	México

• El código es:

<table width="80%" border="1" cellspacing="0" cellpadding="0">

<tr>

<td rowspan="3"><p>Paises Europeos</p></td>

<td><p>Spain</p></td>

<td><p>Madrid</p></td>

</tr>

<tr>

<td><p>Francia</p></td>

<td><p>Paris;­s</p></td>

</tr>

<tr>

<td><p>Reino Unido</p></td>

<td><p>Londres</p></td>

</tr>

<tr>

<td rowspan="3"><p>Paises Americanos</p></td>

<td><p>EEUU</p></td>

<td><p>Washington</p></td>

</tr>

<tr>

<td><p>Canada</p></td>

<td><p>Toronto</p></td>

</tr>

<tr>

<td><p>Mexico</p></td>

<td><p>Mexico</p></td>

</tr>

</table>

Resumen...