Construir tablas (2) | Oloblogger 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 ...

26 de diciembre de 2007

Construir tablas (2)

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.

TablaCol 1Col 2Col 3
Fila 1Celda 1-1Celda 1-2Celda 1-3
Fila 2Celda 2-1Celda 2-2Celda 2-3

Ver/Ocultar código del ejemplo [+/-]
<table border="4" cellpadding="3" cellspacing="5" bgcolor="#D3D3D3" style="border:groove;"><tr><td bgcolor="#CFCFA0">Tabla</td><td bgcolor="#CFCFA0">Col 1</td><td bgcolor="#CFCFA0">Col 2</td><td bgcolor="#CFCFA0">Col 3</td></tr><tr><td bgcolor="#CFCFA0">Fila 1</td><td>Celda 1-1</td><td>Celda 1-2</td><td>Celda 1-3</td></tr><tr><td bgcolor="#CFCFA0">Fila 2</td><td>Celda 2-1</td><td>Celda 2-2</td><td>Celda 2-3</td></tr></table>

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

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

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

17 comentarios :

  1. 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
    http://luz-tic.blogspot.com

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

    *Modo auto-publi ON
    Por cierto, ¿entre tus enlaces de juegos de ingenio no te interesaría poner este? ;)

    ResponderEliminar
  3. 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,
    el 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.

    ResponderEliminar
  4. 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?

    ResponderEliminar
  5. perdón, ya treintaycuatro

    ResponderEliminar
  6. he 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

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

    Luego, 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>

    ResponderEliminar
  8. 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.
    le 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

    ResponderEliminar
  9. Lo del calendario, ya lo conseguí solucionar

    ResponderEliminar
  10. Para poner un gif que al pinchar sobre él redireccione a una url, ¿se hace igual que si es una imagen? o no se puede.

    ResponderEliminar
  11. Lo 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

    ResponderEliminar
  12. Luz 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.

    ResponderEliminar
  13. pues 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.

    ResponderEliminar
  14. lo he conseguido con el siguiente código
    <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

    ResponderEliminar
  15. Perdón ya lo tengo en el blog en el que lo quería, www.luz-tic.blogspot.com

    ResponderEliminar
  16. Hecho ya funciona perfecto, he puesto este código
    <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

    ResponderEliminar
  17. Jajaja... Perfecto Luz. Tú te lo guisaste, tú te lo comiste.

    Gracias por dejar el código escrito, que seguro que así sirve para otros.

    ResponderEliminar