Una vez que hemos visto como se puede contruir una tabla, vamos a ver los atributos que nos permiten darle el aspecto que queramos.
TAMAÑO
* width=... Puede ir con TABLE o con TD, para configurar el ancho de tabla o de celda respectivamente. Puede indicarse un ancho fijo (en pixeles) o un porcentaje respecto del ancho total.
* height=... Igual que el anterior pero para la altura.
SEPARACIONES
* cellpadding="valorenpixels" Con TABLE, determina el espacio en pixeles que se dejará de margen entre el contenido de la celda y los bordes de cada celda
* cellspacing=... Con TABLE, especifica el espacio entre celdas.
BORDE
* border="valorenpixels" Anchura del borde de la tabla. Un 0 nos dibuja la tabla sin borde.
* bordercolor="#xxxxxx" Donde xxxxxx es el código hexadecimal del color que queremos aplicar al borde de la tabla.
TAMAÑO
* width=... Puede ir con TABLE o con TD, para configurar el ancho de tabla o de celda respectivamente. Puede indicarse un ancho fijo (en pixeles) o un porcentaje respecto del ancho total.
* height=... Igual que el anterior pero para la altura.
SEPARACIONES
* cellpadding="valorenpixels" Con TABLE, determina el espacio en pixeles que se dejará de margen entre el contenido de la celda y los bordes de cada celda
* cellspacing=... Con TABLE, especifica el espacio entre celdas.
BORDE
* border="valorenpixels" Anchura del borde de la tabla. Un 0 nos dibuja la tabla sin borde.
* bordercolor="#xxxxxx" Donde xxxxxx es el código hexadecimal del color que queremos aplicar al borde de la tabla.
| Tabla | Col 1 | Col 2 | Col 3 |
| Fila 1 | Celda 1-1 | Celda 1-2 | Celda 1-3 |
| Fila 2 | Celda 2-1 | Celda 2-2 | Celda 2-3 |
FONDO
* bgcolor="#......" Utilizando un código hexadecimal para un color, conseguimos ese color de fondo. Se puede aplicar a toda la tabla o a cada celda (TABLE, TR y TD).
* background="URLIMAGEN" Esta expresión es para poner una imagen de fondo a toda la tabla.
ALINEACION DE CELDAS
* align="..." El contenido puede configurarse al margen izquierdo (left), derecho (right) o en el centro de la celda (center)
* valign="..." Situa el contenido verticalmente en la parte superior (top), en la parte inferior (bottom) o centrado (middle).
MARGENES
* Cellspacing="valorenpixels" En el tag TABLE, Indica el número de pixeles que separan cada celda entre sí.
* Cellpadding="valorenpixels" Idem pero para indicar el espacio entre el borde de cada celda y su contenido.
También podemos asignar a una tabla o a una celda un estilo mediante style="...". Dentro de las comillas irán las características CSS que queremos que tenga el elemento. No obstante, en este caso se aconseja crear una CLASE y en lugar de STYLE, utilizar class="nombredelaclase".
* bgcolor="#......" Utilizando un código hexadecimal para un color, conseguimos ese color de fondo. Se puede aplicar a toda la tabla o a cada celda (TABLE, TR y TD).
* background="URLIMAGEN" Esta expresión es para poner una imagen de fondo a toda la tabla.
ALINEACION DE CELDAS
* align="..." El contenido puede configurarse al margen izquierdo (left), derecho (right) o en el centro de la celda (center)
* valign="..." Situa el contenido verticalmente en la parte superior (top), en la parte inferior (bottom) o centrado (middle).
MARGENES
* Cellspacing="valorenpixels" En el tag TABLE, Indica el número de pixeles que separan cada celda entre sí.
* Cellpadding="valorenpixels" Idem pero para indicar el espacio entre el borde de cada celda y su contenido.
También podemos asignar a una tabla o a una celda un estilo mediante style="...". Dentro de las comillas irán las características CSS que queremos que tenga el elemento. No obstante, en este caso se aconseja crear una CLASE y en lugar de STYLE, utilizar class="nombredelaclase".
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
buenas tardes deseo poner un boton mas a mi cabecera me podrias echar un cable, no logro encontrar en el codigo html donde están, gracias
ResponderEliminarhttp://luz-tic.blogspot.com
Luz, posiblemente tengas todo el código de la cabecera, incluídos los botones, dentro de un gadget (Elementos de Página), porque yo tampoco los veo en la plantilla.
ResponderEliminar*Modo auto-publi ON
Por cierto, ¿entre tus enlaces de juegos de ingenio no te interesaría poner este? ;)
si es cierto lo tengo en la cabecera, ya he puesto un boton para la música pero me gustaría ponerlo como los otros botones, me puedes ayudar,
ResponderEliminarel codigo de esa celda dentro de la tabla es:
<td>
<form>
<input type="button" name="Poner Música" value="Poner Música" style="width:100px; height:50px"
onclick="javascript:Abrir_ventana('http://assets.mixpod.com/swf/mp3/mff-touch.swf?myid=33319597&path=2009/10/27')"/>
</form>
</td>
otra cosa el calendario, lo quiero fijar en el margen superior derecho, le pongo el siguiente codigo, en un gadget html:
<div style="position:position:absolute; top: 40px; left: 1110px">
<script language="JavaScript"
src="http://www.gifss.com/creaciones/calendarios/101/calendario.js"></script></div>
y me lo coloca pero en otro tipo de pantalla, no sale.
el juego está muy bien, he comenzado a jugar pero la respuesta de la primera pregunta es treintaicuatro o 34 y siempre me sale error,¿se me escapa algo?
ResponderEliminarperdón, ya treintaycuatro
ResponderEliminarhe llegado hasta el texto en latín y la verdad es que no es lo mío, pero mañana le pregunto a una compañera que me lo traduzca, pongo el enlace en el blog para los chicos, gracias
ResponderEliminarLo primero es construir un nuevo botón para la música con el tamaño y estructura de este. Lo mejor es que lo bajes y a continuación cambies el dibujito central. Cuando este rediseñado, lo subes y copias la dirección de la imagen.
ResponderEliminarLuego, no estoy seguro del todo, pero el código creo que tiene que ser así:
<td><form>
<input value="Música" onmouseover="this.style.backgroundPosition='right bottom';" style="background: transparent url(NUEVA_IMAGEN_PARA_NUEVO_BOTON) no-repeat scroll left top; width: 50px; height: 50px;" onmouseout="this.style.backgroundPosition='left top';" onclick="javascript:Abrir_ventana('http://DIRECCION DE LA PAGINA QUE CONTIENE LA MUSICA');" type="button"/>
</form></td>
hay algo que falla, porque el efecto del botón, bien, pero al pinchar sobre él no se abre la ventana emergente de la música.
ResponderEliminarle he quitado el literal música del código porque lo ponía encima del botón, además me sale el botón y en torno a él un marco gris
el código que tengo es
<td><form>
<input value="" onmouseover="this.style.backgroundPosition='right bottom';" style="background: transparent url(https://lh5.googleusercontent.com/_vzR5XFm52h8/TWVML0Hg0LI/AAAAAAAADHw/XfgLR9faJ_Q/s288/tecla%20musica.gif) no-repeat scroll left top; width: 100px; height: 50px;" onmouseout="this.style.backgroundPosition='left top';" onclick="javascript:Abrir_ventana('http://assets.mixpod.com/swf/mp3/mff-touch.swf?myid=33319597&path=2009/10/27')');" type="button"/>
</form></td>
el problema del calendario también sigo sin conseguirlo, sé que es un tema de fijar la posición pero no hay manera
Lo del calendario, ya lo conseguí solucionar
ResponderEliminarPara poner un gif que al pinchar sobre él redireccione a una url, ¿se hace igual que si es una imagen? o no se puede.
ResponderEliminarLo del gif ya solucionado, ya he visto que es lo mismo poner un gif que una imagen, gracias, lo que me sigue rompiendo la cabeza es el tema del botón
ResponderEliminarLuz he copiado y pegado tal cual, el código que mencionas en #8 y funciona perfectamente, incluido el efecto de las dos imágenes que has diseñado. Quizás es que en la vista previa no se vea. Prueba a grabarlo.
ResponderEliminarpues no entiendo que pasa, porque yo lo pongo incluso como un gadget html para probarlo, porqué puede que en la cabecera me diera problemas y el efecto del boton si, pero no me abre la ventana emergente para la música, lo he puesto en otro blog y tampoco, www.luzcocina.blogspot.com, y también he puesto el código en una entrada y no hay manera, no se abre la ventana emergente de la música, en el blog en el que lo he puesto se oye música pero es del reproductor que tengo en la pagina.
ResponderEliminarlo he conseguido con el siguiente código
ResponderEliminar<form>
<input onmouseover="this.style.backgroundPosition='right bottom';" style="background: transparent url(https://lh5.googleusercontent.com/_vzR5XFm52h8/TWVML0Hg0LI/AAAAAAAADHw/XfgLR9faJ_Q/s288/tecla%20musica.gif) no-repeat scroll left top; width: 100px; height: 50px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" onmouseout="this.style.backgroundPosition='left top';" title="Poner Música" style="width:100px; height:50px"
onclick="javascript:Abrir_ventana('http://assets.mixpod.com/swf/mp3/mff-touch.swf?myid=33319597&path=2009/10/27')"/>
</form>
pero sale un borde que quiero quitar, sabes como? gracias
Perdón ya lo tengo en el blog en el que lo quería, www.luz-tic.blogspot.com
ResponderEliminarHecho ya funciona perfecto, he puesto este código
ResponderEliminar<td>
<form>
<div onmouseover="this.style.backgroundPosition='right bottom';" style="background: transparent url(https://lh5.googleusercontent.com/_vzR5XFm52h8/TWVML0Hg0LI/AAAAAAAADHw/XfgLR9faJ_Q/s288/tecla%20musica.gif) no-repeat scroll left top; width: 100px; height: 50px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" onmouseout="this.style.backgroundPosition='left top';" title="Poner Música" style="width:100px; height:50px"
onclick="javascript:Abrir_ventana('http://assets.mixpod.com/swf/mp3/mff-touch.swf?myid=33319597&path=2009/10/27')"/>
</div>
</form>
</td>
gracias
Jajaja... Perfecto Luz. Tú te lo guisaste, tú te lo comiste.
ResponderEliminarGracias por dejar el código escrito, que seguro que así sirve para otros.