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 - Alineamiento de celdas y filas

29 - Alineamiento de celdas y filas

[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

Hasta ahora hemos estudiado el alineamiento de las tablas con respecto a la ventana del navegador. El siguiente paso será aprender los diferentes tipos de alineamiento de los elementos de las diferentes celdas con respecto a estas. Estos tipos de alineamiento se dividen en dos: alineamiento vertical y alineamiento horizontal. En la figura 7.10 podemos ver una tabla en la que se ilustran las posibilidades de tipos de alineamiento.

Figura 7.10. Distintas posibilidades de los alineamientos vertical y horizontal de las celdas de una tabla.

  • Alineamiento horizontal: Para seleccionar el tipo de alineamiento horizontal de las celdas hay que usar el atributo ALIGN de las etiquetas TH o TD en función del tipo de celda. Este atributo permitirá seleccionar entre un alineamiento a la izquierda (ALIGN="left"), centrado (ALIGN="center") o a la derecha (ALIGN="right"), tal y como veíamos en la figura 7.10.

  • Alineamiento vertical: En este caso usaremos un nuevo atributo: VALIGN (Vertical Align, alineamiento vertical). Las diferentes opciones con este tipo de alineamiento son las que veíamos en la figura 7.10: Alineamiento con la parte superior de la celda (VALIGN="top"), alineamiento en medio de la celda (VALIGN="middle") y alineamiento con la parte inferior de la celda (VALIGN=" bottom").

Por defecto las celdas de encabezado (TH) están centradas tanto horizontal como verticalmente, mientras que las celdas normales (TD) están alineadas a la izquierda y verticalmente se sitúan en el centro de la celda. El punto azul de la figura 7.11 representa el alineamiento por defecto en ambos tipos de celdas.

Figura 7.11. El punto azul de esta figura nos permite observar el alineamiento por defecto de los encabezados de tabla (TH) y de las celdas normales (TD).

Este alineamiento por defecto puede ser cambiado para toda una fila usando los atributos ALIGN y VALIGN en la etiqueta TR. Por ejemplo si creamos una fila con el siguiente código:

      <TR ALIGN="right" 
  VALIGN="bottom">
       ... Etiquetas para crear las celdas ...
       </TR>
 
     

Todas las celdas de esa fila tendrán se alinearán por defecto a la derecha y abajo. Por supuesto si en alguna de las celdas (TD o TH) de esa fila se vuelven a usar ALIGN y VALIGN con unos valores distintos serán estos últimos los que determinarán el alineamiento de esa celda en concreto. Por ejemplo:

      <TABLE BORDER="1">
       
  <TR ALIGN="right"
    VALIGN="bottom">
       
       <TD>
       Celda1
       </TD>
       <TD>
       Celda2
       </TD>
       
  <TD ALIGN="left" 
    VALIGN="top">
  Celda3
  </TD>
       
       </TR>
       </TABLE>
 
     

El resultado de este código es que todas las celdas de esa fila tendrán como alineamiento por defecto ALIGN="right" y VALIGN="bottom", pero en la tercera celda especificamos ALIGN="left" VALIGN="top" y cambiamos el alineamiento de esa celda en concreto como podemos ver en la figura 7.12

Figura 7.12. Usando los atributos ALIGN y VALIGN en la etiqueta TR cambiamos el alineamiento por defecto de las celdas de esa fila, pero aún podemos modificar ese alineamiento usando los mismos atributos en cada celda.

Si el lector prueba este último ejemplo probablemente no pueda apreciar el efecto del cambio de alineamiento porque la tabla es demasiado pequeña. Para poder apreciar dicho efecto será necesario aumentar el tamaño de la tabla con los métodos que aprenderemos en el siguiente apartado.

[editar]

192 opiniones

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
OCHOA

BUENO
OCHOA

El comentario de algo asi me interesa a mi tambien.
1 2 3 4 5 6 7 ... 39 | siguiente >

Cursos gratis relacionados con 'Curso completo de HTML'

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

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.