.  

 

 

.
.

26 / 04 / 2017

Usuarios conectados: 3

Cargando documento...

Buscar:

.

Este Sitio:

Principal

Dreamweaver

Fireworks

JavaScript

CSS

Sonido

Artículos

Links

E-ufemismos

Descargas

Historial

 

Mailing List:

Suscríbete a la lista de correo, No practico spamming y ofrece algunas ventajas.

Pulsa aquí para saber más y suscribirte.

 

Recomendados:

Tecnorama >Tutoriales Dreamweaver

 

Adaptar tablas a la ventana.

Versión para imprimir | Translate this page

Este tutorial está basado en otro, muy recomendable de visitar, de JSHook, que explica excelentemente las nociones básicas que hay que tener en cuenta al trabajar con tablas. Sin embargo, lo encontré un poco complicado de entender si no se tiene muy claro cómo funcionan las tablas y las celdas, por lo que decidí hacer esta introducción.
ES MUY IMPORTANTE QUE OS QUEDEN CLAROS LOS TIPOS DE CELDAS Y TABLAS QUE PUEDE HABER..NO SIGÁIS LEYENDO HASTA QUE TENGÁIS ASIMILADO SU CONTENIDO.
Empezamos:

Sobre Celdas:

En las celdas, podemos distinguir 2 tipos, según la "fuerza" que tienen para modificar otras celdas:

Tipo1.- No tienen medida. La fuerza es nula, Tienden a quedarse como están, excepto que alguna celda adyacente de tipo 2 (o una celda con contenido) les obligue a moverse y encogerse. Al no tener medidas, si conviven varias celdas de tipo1 en la misma tabla, se reparten el espacio por igual.
Tipo2.- Sí tienen medida. Pueden hacer fuerza sobre las de tipo 1, pero siempre con el límite del contenido. En caso de coexistir 2 celdas de tipo 2, hacen más fuerza las que tienen su medida en porcentajes.


En ambos casos, Cuando tienen contenido, éste tiene más fuerza que el resto de sus propiedades: si tienen una imagen, podrán encogerse y estirar según su tipo, pero teniendo siempre como límite el que le marquen sus contenidos (sobre todo a la hora de encogerse): Si es una imagen, el ancho de la imagen. Si tienen texto, el ancho de la palabra más larga.


Ejemplos:

Celdas de tipo1 (sin medida):

Una tabla de 3 celdas y 500px de ancho:
     

Si a ninguna de las 3 celdas le asignamos un valor, las 3 tendrás a quedarse como están, repartirse por igual el espacio y mantener el ancho de la tabla .

Celdas de tipo 2 (con medida):

Una tabla de 500 px de ancho con:
-una celda sin medida
- una celda de 300px
-una celda sin medida
  300 px  

Una tabla de 500px con:
-una celda de 400 px.
-una celda del 80%.
El porcentaje es mas fuerte que la medida fija
400px 80%

Celdas con contenido

Una tabla de 500 px, con:
- una celda sin medida
- una celda de 400 px
- una celda sin medida pero con contenido (una imagen de 350 px)
El contenido hace fuerza sobre todo lo demás

400px

Una tabla de 500 px,con:
- una celda de 400px con contenido (texto),
- una celda de 80%
- una celda sin medida y con contenido (una imagen de 350 px)

400 80%

En este último ejemplo, la celda de la izquierda es forzada por la celda con porcentaje del 80% hasta limitarla al tamaño del texto (es decir, a su contenido). La celda de la derecha, pese a no tener medida, ejerce fuerza sobre las otras, que sí la tienen, por la fuerza de su contenido



Sobre Tablas

Aquí también veremos 3 tipos:

Tipo1.- Las que no tienen medida. Tienden a encogerse. Pueden ejercer fuerza sobre las celdas de tipo1 pero no sobre las demás.
Tipo2.- Ancho en pixeles No se encogen nunca, pero son fácilmente estirables por celdas con contenido y otras tablas. Así mismo, tienen mucha fuerza para estirar otros elementos. Podría decirse que la medida en píxeles indica realmente el ancho mínimo que deben tener y no su ancho fijo
Tipo3.- Ancho en porcentaje Pueden encogerse y estirarse con facilidad, Pueden ser forzadas incluso por celdas de tipo 2. No ejercen fuerza sobre ningún otro elemento, simplemente se adaptan al porcentaje especificado. Por ello, cuando se enfrentan a celdas de tipo 1 (sin ancho fijo) los resultados son impredecibles.

Ejemplos:

Tablas de Tipo1 (sin medida):

Una tabla de tipo sin medidas con 2 celdas sin medidas: Como puede ejercer fuerza sobre celdas de este tipo se encoge:

   

Una tabla sin medidas con:
- una celda sin medidas
- una celda de 250px:
Como no puede ejercer fuerza sobre la celda con medidas, sólo encoge en la zona de la celda sin ellas
  250px

Tablas de Tipo 2 (ancho en pixeles):
No encogen: Esta tabla tiene 500 px y una celda de 350 px

350px
500px


Demostración de que no son estirables por celdas con contenido: Una tabla de 500 px con una celda de 800 px:

800px
500px

Demostración de que son estirables por celdas con contenido:Una tabla de 300px con una celda sin medida pero con contenido:

jkhlkjoiuoiuoiiouoiuiouioujjkljkljkljkjljlkjlkjufioguafugoayguiayfgufyguiygyasiuy
300px

Demostración de que son estirables por otras tablas: Una tabla de 300 px con otra dentro de 500px (¡recuerda que no encogen!)
Para hacerlo más complejo:
- la tabla exterior (300px) tiene una celda de 400 px.
- la tabla interior (500px) tiene una celda sin medida. (a la tabla exterior le he dado un cellpad de 2px para que se vea):

 

Tablas de Tipo 3 (ancho en porcentajes)

Una tabla de 500px con una tabla del 100% dentro de ella:
La celda de la tabla interior tiene 600 px, pero ni la tabla ni la celda interiores pueden alargar la tabla exterior:

 

Una tabla de 500px con 2 celdas:
- una de 400px
- una sin medidas con una tabla del 100% dentro de ella:
La celda sin medidas se encoge, pese a tener una tabla dentro, porque ésta no opone ninguna resistencia a que la celda de de 400px se estire (al ser una tabla en %):

400px
 

Y para terminar: Hemos dicho que las tablas en porcentajes opuestas a celdas sin medidas tienen resultados impredecibles: Una tabla de 500 px con 2 celdas sin medidas. En la celda de la derecha hemos colocado una tabla del 100%. La celda de esta tabla tampoco tiene medidas:

 
 

En cambio, si damos un ancho de 460 px a la celda de la tabla interior...

 
460px

Esto es todo de momento. Ha sido muy complicado, pero si comprendéis perfectamente Con qué tipos de celda y tabla estáis trabajando, sabréis sacar provecho a sus defectos.

Para ayudar un poco, he "fabricado" una tabla imprimible, en la que he colocado los valores de fuerza y resistencia que puede tener cada celda/tabla, para que podáis imprimirla y tenerla a mano cuando estéis trabajando con ellas.

En el tutorial empezaremos a crear una página que se adapta al ancho de pantalla, pero que a su vez mantiene otras celdas sin modificar sus valores. Pulsa aquí para ver la página de demostración (prueba a estirarla y encogerla)

Después de ver la página, pasemos al tutorial>>

 

Links:
Creo que el tutorial de JSHOOK os será de mucha utilidad.

Murray R. Summers, uno de los sabios de Dreamwaver, también tiene otro tutorial, bastante sencillo de entender.

Eric Hockman te enseñará a diseñar tablas en Fireworks

¿Comentarios? 47, de momento. Mostrando 1 ->5

1.- block ended this [url=http://onlinecasinos-x.com/]online casinos[/url] where you can prevail in genuine kale with the avoid of this enchiridionPlaying [url=http://onlinecasinos-x.com/online-casino-games.html]casino games[/url] , check this [url=http://onlinecasino-b.com/de/]casino[/url]

2.- thanks due to the fact that this great edifying website, keep up the skilled position check out this [url=http://onlinecasinos-x.com]online casinos[/url] offers , buy [url=http://esextoyfun.com]sex toys[/url]

3.- hello!,I like your writing so so much! share we communicate more about your post on AOL? I require a specialist in this space to unravel my problem. May be tha2;#8t17&s you! Taking a look ahead to peer you. http://acaqybqdb.com [url=http://tdpbhs.com]tdpbhs[/url] [link=http://bctbcyihmf.com]bctbcyihmf[/link]

4.- Realmente no hay un sitio específico para hacer las peticiones. Es en los propios comentarios de otras trucsdcionea, como muy bien hiciste.Si me das tiempo, me pondré a ello, que tengo lista de espera. Un saludo.[]

5.- Inrsteeant si util acest articol. Totusi, mai multa atentie la detalii va rog. In poza 2 puteati sa puneti niste protectii prizelor, ca tot vorbeste articolul de siguranta copilului.

« Previous | 1 - 5 | 6 - 10 | 11 - 15 | 16 - 20 | 21 - 25 | 26 - 30 | 31 - 35 | 36 - 40 | 41 - 45 | 46 - 47 | Next »

Añade tu comentario



Escribe el código de la imagen superior:

:

Tutoriales Dreamweaver

-El muy buscado Menú desplegable

-¿Qué $%&$% es 'SSI'?

-Utilizar tablas de excel para actualizar tablas en html.

-Plantillas en DW MX: Regiones opcionales.

-Adaptar tablas a la ventana.

-Vista diseño para formatos no reconocidos

-Carga de imagenes en orden

-Mi primera Extensión

-Rollover remoto ('Disjointed Rollover')

-Iframes vs. Frames

-Contenido dinámico en celdas

-DW MX: Repeating Tables

-DW MX: Practica el Cloaking

-DW MX: CSS en tiempo Diseño

-Buscar y Reemplazar en Dreamweaver

-Menú dinámico

-Collaborative Dreamweaver: Design Notes and Files Panel

-Using PHP Server Formats and MySQL Dates

-Creando un Newsticker

-Generate Excel files with DWMX/PHP/MySQL (part 1)

-Manejo de fechas en PHP y MySQL

-Generate Excel files with DWMX/PHP/MySQL (part 2)

-Manejo de Fechas en consultas a MySQL

-Showing all records by default in a results page (PHP)

-Retrieving data using AHAH (1)

-Retrieving data using AHAH (2)

-Retrieving data using AHAH (3)

TECNORAMA es simplemente una página personal. No sirve ni de promoción del autor ni cosas por el estilo.
Todos los códigos, textos y tutoriales son de libre uso mientras se mencione al autor (no es mucho pedir)
Este sitio es compatible con IE6/NS6/Mozilla1.0
Para contactar, puedes enviarme un e-mail a tecnorama@hotmail.com