curso de creacion de tablas html

**javidj** · Tema: curso de creacion de tablas html Mar Nov 11, 2008 5:30 pm

para tener que estar buscando, voy a crear un curso lo mas completo posible sobre esta creacion de distintas tablas html y sus atributos. para que sea facil identificarlo, interpretaré ejemplo con tablas en vista normal y vista html:
atributos:
Question

table: es el principal atributo para crear la tabla
Question

td y tr: son las separaciones o cuadros:

td: crea bloque horizontal

tr: crea bloque. cuadro vertical
Question

bgcolor: creará color de fondo solido, escrbirlo en ingles o code hexadecimal #color
Question

background: creará imagen de fondo poniendole una url
Question

border: define el grosor de la linea de la tabla
Question

tamaño width x height: será el alto por ancho
Question

rowspan: para unificar verticalmente
Question

colspan: para unificar horizontalmente
Question

cellspacing y cellpadding: es para medir grosor dentro de las celdas
Question

Align Alineación horizontal del contenido de la celda
Question

Valign Alineación vertical del contenido de la celda
Question

Bordercolor Color del borde de la tabla

____________________________
Descubre el gremio Templarios AQUI

Spoiler:

**javidj** · Tema: Re: curso de creacion de tablas html Mar Nov 11, 2008 6:08 pm

ahora vamos con las explicaciones mas detalladas y ejemplos:

- EL BORDER, define grosor a nuestra tabla, comprendiendo 1 como el mas pequeño y 0 como invisible y td y tr, definen los cuadros de horizontal (td) y vertical (tr):

con borde:
<table border="1">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

celda 1	celda 2	celda 3
celda 4	celda 5	celda 6

sin borde
<table border="0">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

celda 1	celda 2	celda 3
celda 4	celda 5	celda 6

____________________________
Descubre el gremio Templarios AQUI

Spoiler:

**javidj** · Tema: Re: curso de creacion de tablas html Mar Nov 11, 2008 7:18 pm

al table. podremos ademas crearle color o fondo con imagen:

con bgcolor:
<table border="1" bgcolor="yellow">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

celda 1	celda 2	celda 3
celda 4	celda 5	celda 6

con fondo url:
<table border="1" background="http://www.photoshop-designs.net/imagenes/fondo.jpg">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

celda 1	celda 2	celda 3
celda 4	celda 5	celda 6

____________________________
Descubre el gremio Templarios AQUI

Spoiler:

**javidj** · Tema: Re: curso de creacion de tablas html Mar Nov 11, 2008 7:43 pm

tamaño width x height: será el alto por ancho, y podemos usarlo tanto en toda la tabla o en una linea:

en toda la tabla
<table border="1" width="300" height="200">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

celda 1	celda 2	celda 3
celda 4	celda 5	celda 6

en una linea: vertical
<table border="1">
<tr>
<td width="100">Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

celda 1	celda 2	celda 3
celda 4	celda 5	celda 6

____________________________
Descubre el gremio Templarios AQUI

Spoiler:

**javidj** · Tema: Re: curso de creacion de tablas html Mar Nov 11, 2008 8:17 pm

rowspan: para unificar verticalmente
colspan: para unificar horizontalmente
Debemos siempre poner un numero de cuadros que va a cojer juntos:

[/tr][/tr]

vertical(rowspan)
<table border="1">
<tr>
<td rowspan="3">celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
<tr>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</table>

celda 1	celda 2	celda 3
	celda 5	celda 6
	celda 8	celda 9

vertical (coldspan)
<table border="1">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td colspan="2">Celda 4 y 5</td>
<td>Celda 6</td>
</tr>
<tr>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</table>

[/tr]

celda 1	celda 2	celda 3
celda 4 y 5		celda 6
celda 7	celda 8	celda 9

____________________________
Descubre el gremio Templarios AQUI

Spoiler:

**javidj** · Tema: Re: curso de creacion de tablas html Mar Nov 11, 2008 8:44 pm

cellspacing=Obtiene o establece la cantidad de espacio entre las celdas.
cellpadding= Obtiene o establece la cantidad de espacio (en píxeles) entre el contenido de una celda y el borde de la misma.

cellspacing
<table cellspacing="5"
<tr>
<td>celda 1</td>
<td>celda 2</td></tr>
<tr>
<td>celda 3</td>
<td>celda 4</td></tr>
<tr>
<td>celda 5</td>
<td>celda 6</td></tr>
</table>

celda 1	celda 2
celda 3	celda 4
celda 5	celda 6

<table cellpadding="5">
<tr>
<td>celda 1</td>
<td>celda 2</td></tr>
<tr>
<td>celda 3</td>
<td>celda 4</td></tr>
<tr>
<td>celda 5</td>
<td>celda 6</td></tr>
</table>

celda 1	celda 2
celda 3	celda 4
celda 5	celda 6

____________________________
Descubre el gremio Templarios AQUI

Spoiler:

**javidj** · Tema: Re: curso de creacion de tablas html Miér Nov 12, 2008 6:28 pm

ALIGN, que alinea el texto horizontalmente. Puede tomar los siguientes valores: leff, center y right.
VALIGN, que alinea el texto verticalmente. Los valores posibles son top, middle y bottom.

El siguiente ejemplo produce una alineación arriba a la derecha:

<TABLE WIDTH="300" HEIGHT="200" BORDER="1">
<TR><TD ALIGN="right" VALIGN="top">
Texto alineado arriba a la derecha
</TD></TR>
</TABLE>

Texto alineado arriba a la derecha

____________________________
Descubre el gremio Templarios AQUI

Spoiler:

**javidj** · Tema: Re: curso de creacion de tablas html Miér Nov 12, 2008 6:34 pm

Para definir un color para los bordes, defina el atributo BORDERCOLOR de la etiqueta TABLE.
He aquí un ejemplo de una tabla que tiene un fondo azul y bordes rojos. La celda situada en el medio es blanca:

Código:

A	B	C
D	E	F
G	H	I

____________________________
Descubre el gremio Templarios AQUI

Spoiler: