Buscar Más buscado
Capitulos de este wiki
  1. 1 Introducción al lenguaje HTML
  2. 2 Primeros pasos con HTML
  3. 3 Parrafos en HTML
  4. 4 Cómo insertar imagenes en una pagina
  5. 5 Cómo crear enlaces hipertexto
  6. 6 PRÁCTICA 1: La pagina web de "La chistera"
  7. 7 Anclas (I)
  8. 8 Anclas (II)
  9. 9 Formato de texto
  10. 10 La etiqueta FONT
  11. 11 Texto preformateado
  12. 12 Acentos y otros caracteres especiales
  13. 13 Listas en HTML (I)
  14. 14 Listas en HTML (II)
  15. 15 Comentarios en HTML
  16. 16 Practica 2: Un sitio web completo
  17. 17 Usando color en el WWW
  18. 18 Cómo cambiar la apariencia de una pagina
  19. 19 Imagenes en las paginas Web (I)
  20. 20 Imagenes en las paginas Web (II)
  21. 21 Imagenes en las paginas Web (III)
  22. 22 Cómo cambiar la apariencia de las imagenes
  23. 23 Alternativas a las imagenes inline (I)
  24. 24 Alternativas a las imagenes inline (II)
  25. 25 Mejoras en las imagenes
  26. 26 Cómo se crea una tabla HTML (I)
  27. 27 Cómo se crea una tabla HTML (II)
  28. 28 Alineamiento de tablas
  29. 29 Alineamiento de celdas y filas
  30. 30 Ancho de tablas y celdas
  31. 31 Celdas que abarcan varias filas o columnas
  32. 32 Margenes y separación de celdas
  33. 33 Anidamiento
  34. 34 Practica 3 - Tabla de Datos
  35. 35 Practica 4 - Pagina Web con una estructura creada con tablas
  36. 36 Practica 4 - Pagina Web con una estructura creada con tablas
  37. 37 Practica 4 - Pagina Web con una estructura creada con tablas
  38. 38 Estandares y extensiones del lenguaje HTML (I)
  39. 39 Estandares y extensiones del lenguaje HTML (II)
  40. 40 Extensiones a las listas (I)
  41. 41 Extensiones a las listas (II)
  42. 42 Alineamiento
  43. 43 La etiqueta META
  44. 44 Otras etiquetas del lenguaje HTML 3.2
  45. 45 El atributo TARGET
  46. 46 La etiqueta BASE
  47. 47 Creación de paginas con frames
  48. 48 Creación del documento de definición de frames (I)
  49. 49 Creación del documento de definición de frames (II)
  50. 50 Pagina completa con frames
  51. 51 Atributos de la etiqueta FRAME
  52. 52 Compatibilidad: NOFRAME
  53. 53 Anidamiento de framesets
  54. 54 Bordes de los frames
  55. 55 Valores especiales del atributo TARGET
  56. 56 Practica 5: Web de Los Alpes con frames
  57. 57 Frames flotantes
  58. 58 Sonido vídeo y otros ficheros externos
  59. 59 Multimedia Inline (I)
  60. 60 Multimedia Inline (I)
  61. 61 Plug-ins y objetos incrustados
  62. 62 Java en las Paginas Web
  63. 63 Inserción de Applets Java (I)
  64. 64 Inserción de Applets Java (II)
  65. 65 Inserción de Applets Java (III)
  66. 66 ActiveX, la tecnología del futuro
  67. 67 Formularios en HTML
  68. 68 Controles de Formularios (I)
  69. 69 Controles de Formularios (II)
  70. 70 Controles de Formularios (III)
  71. 71 Controles de Formularios (IV)
  72. 72 Otros controles
  73. 73 Practica 6-Formulario para "Los Alpes"
  74. 74 Como usar los datos de un formulario
  75. 75 Envío De Ficheros Usando Formularios

Curso completo de HTML - Ancho de tablas y celdas

30 - Ancho de tablas y celdas

[editar]
Curso gratis creado por Jorge Ferrer, Víctor García y Rodrigo García. Extraido de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/
23 de Febrero de 2006
< anterior | 1 ... 28 29 30 31 32 33 34 ... 75 | siguiente >

Como vimos antes en este capítulo, el ancho de las tablas queda determinado por el tamaño necesario para mostrar el contenido de sus celdas. Sin embargo el lenguaje HTML nos permite especificar el tamaño que deseemos por medio de un nuevo atributo de la etiqueta TABLE: WIDTH (que traducido significa ancho). Este atributo se usa igual que los vistos hasta ahora, y su valor representará el ancho en pixeles de la tabla: 

      
  <TABLE WIDTH="500">
	   
       ... Código de la tabla ...
	   </TABLE>

Es importante resaltar que si con ese tamaño no se pueden mostrar todos los elementos de la tabla, por ejemplo si en la tabla anterior hay una imagen de ancho 550 que no cabe en una tabla de 500 pixeles de ancho, el navegador ignorará el atributo WIDTH. Si la tabla únicamente contiene texto la etiqueta WIDTH tiene una mayor utilidad, ya que el texto se adaptará a ese ancho, ocupando más líneas si es necesario.

El tamaño del ancho de una tabla tambien se puede especificar en porcentaje respecto al ancho total de la ventana del navegador. Por ejemplo: 

 <TABLE WIDTH="50%">
  ... Código de la tabla ...
  </TABLE>

hace que la tabla sea la mitad de la ventana. Si el usuario hace más pequeña la ventana la tabla también se hará más pequeña.

Tamaño de las celdas

Al igual que hemos modificado el ancho de la tabla completa también podremos modificar el tamaño de cada celda por separado. En este caso tendremos más posibilidades aún, ya que podremos modificar también la altura de la celda usando el atributo HEIGHT.

Al igual que antes, las dimensiones que especifiquemos con WIDTH y HEIGHT sólo serán respetadas si en ese espacio cabe su contenido. Por ejemplo en el siguiente caso: 

 <TABLE>
   
	<TR>
	       <TD WIDTH="50" 
	  HEIGHT="50">
  
  <IMG SRC="img.gif" 
	WIDTH="100" 
	HEIGHT="100">
  </TD>
	     </TR>
	     </TABLE>

la única celda de la tabla tendrá un tamaño de 100 por 100, que es el tamaño de la imagen que hemos insertado en ella. En este caso no pueden respetarse los atributos WIDTH y HEIGHT de la etiqueta TD ya que en una celda de las dimensiones indicadas en ellas no cabría la imagen. Si en su lugar hubiésemos usado < TD WIDTH="150" HEIGHT="150"> estas dimensiones SI se hubiesen respetado.

EJERCICIO 7-2

Como la mejor manera de aprender es practicar vamos a realizar un sencillo ejercicio pero que agrupa gran parte de los conocimientos adquiridos hasta ahora sobre tablas. El objetivo será crear una tabla con dos celdas y dos columnas de tamaño 100x100 todas ellas. Deberemos insertar en cada una de ellas la imagen spot.gif y alinearla de tal manera que consigamos el resultado de la figura 7.13.

Figura 7.13.

Para completar nuestro aprendizaje sobre el tamaño de tablas y celdas y como modificarlo nos queda por comentar un último atributo: NOWRAP. Este atributo no toma ningún valor, es decir, su forma de uso es: 

 <TABLE>
  <TR>
	     
           <TD NOWRAP>
	Texto
	       </TD>
	     
  </TR>
	     </TABLE>

Su efecto será que el texto de esa celda no puede ser partido en varias líneas, para adecuarse al tamaño de la celda. Cuando esto sucede se dice que la tabla ha envuelto (wrap en inglés) el texto. El significado de NOWRAP es por tanto no envolver el texto. Si es necesario para mantener el texto en una sola línea se ignorarán los atributos WIDTH y HEIGHT si fueron usados. En la figura 7.14 observamos una primera tabla con una única celda en la que no hemos usado el atributo NOWRAP, en la segunda tabla mostramos la misma tabla pero poniendo NOWRAP en dicha celda.

Figura 7.14. Usando el atributo NOWRAP evitamos que el texto sea partido en varias líneas, sin embargo no es recomendable usarlo en líneas muy largas como esta.

Como vemos en este segundo caso la línea de texto no cabe en el tamaño de la ventana y por tanto se extiende más allá de esta.

Hay que tener mucho cuidado usando el atributo NOWRAP, ya que si después escribimos un texto muy largo sin incluir ningún salto de linea (BR) todo él será mostrado en una única línea, que no cabrá en pantalla y por tanto obligará al visitante a usar las barras de desplazamiento.

[editar]
< anterior | 1 ... 28 29 30 31 32 33 34 ... 75 | siguiente >

Opinar
194 opiniones

html

muy completo
fLakita

Me gustaria saber como se pone el signo de copyleft.
Gracias
sara

deberian poner como hacer un enlace a otra pagina desde un boton
luis

este tutorial esta fabuloso!
esta chivo

gracias por publicar cosas buenas
1 2 3 4 5 6 7 ... 39 | siguiente >

Cursos gratis relacionados con 'Curso completo de HTML'

Curso completo de HTML
Este es un curso tremendamente completo, guiado y con ejemplos y prácticas pensadas para convertirlo... Más »
Curso de Ada
El objetivo de este curso es aprender a programar en el lenguaje Ada, desde sus... Más »
Curso de hacking
Práctico y completo curso de hacking.
Curso de Linux
Completo curso de Linux, un sistema operativo gratuito y de libre distribución inspirado en el... Más »
El fascinante mundo de los virus informáticos
Completo curso acerca de los virus informáticos, historia, clasificación, protección...

Anuncios Google

Autor y licencia de 'Curso completo de HTML'


Curso gratis de Jorge Ferrer, Víctor García y Rodrigo García. Extraido de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/ CopyLeft
Licencia GNU Free Documentation License: http://www.gnu.org/copyleft/fdl.html
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.