Tablas tipos y diseño.

LuJo


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...



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":



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 1Columna 2Columna 3Columna 4




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

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



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 1Contenido 2
Contenido 3Contenido 4
Contenido 5Contenido 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 1Columna 2, fila 1Columna 3, fila 1
Columna 1, fila 2Columna 2, fila 2Columna 3, fila 2




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




■ Cómo colocar un enlace en una tabla:

Blog de Lujo




■ 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





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:




rosasclaveles
margaritaslilas


<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...



3 comentarios:

LadyMarian

Ya sé que decís que no sos una experta pero... cuánto sabés!! Cuando leo estos post me siento muy bruta en comparación. jajaja

Besotes

Lujo

@LadyMarian
Palabrita que no es más que una chuleta para que me queden claros los conceptos de una vez. Estaba cansada de consultarlos en mis apuntes cada dos por tres. (-^o^-)
Abrazotes!

Anónimo

Super cool los characters i love characters thanks.

Publicar un comentario

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP