Curso completo de HTML - Margenes y separación de celdas
(126 opiniones)
Curso gratis de
Jorge Ferrer, Víctor García y Rodrigo García - 23 de Febrero de 2006
El único aspecto que nos queda por aprender sobre las tablas en HTML es el correspondiente a los márgenes en las celdas y la separación entre ellas. Antes de nada es conveniente comentar que el lenguaje HTML considera a cada celda como un elemento individual con sus propios bordes que no comparte con las celdas adyacentes. Basándonos en esta forma de ver las tablas podemos cambiar la distancia que existe entre los bordes de las células adyacentes usando el atributo CELLSPACING (Espaciado de celdas). El valor por defecto de este atributo es 1. En general se suele usar para eliminar el espaciado entre celdas (como veremos en el ejercicio 7-3) o para aumentarlo para crear un efecto como el del siguiente ejemplo:
<TABLE CELLSPACING="10"
BORDER="1">
... Código de la tabla ...
</TABLE>
|
cuyo resultado podemos observar en la figura 7.16:
Figura 7.16. El atributo CELLSPACING controla el espaciado entre los bordes de cada una de las celdas de la tabla.
Una segunda propiedad de las tablas de gran importancia es el margen que existe entre los elementos de las celdas y sus bordes. Esta separación es nula por defecto, pero puede aumentarse usando el atributo CELLPADDING. La forma de usar este atributo queda descrita en el siguiente ejemplo:
<TABLE CELLPADDING="10"
BORDER="1"
ALIGN="LEFT">
... Código de la tabla ...
</TABLE>
|
y en la figura 7.17:
Figura 7.17. Con el atributo CELLPADDING podemos aumentar los márgenes entre el contenido de las celdas y su borde.
Tanto en el atributo CELLPADDING como en el atributo CELLSPACING el valor entre comillas representa un tamaño en pixeles.
Para practicar un poco el uso de estos dos atributos se propone un ejercicio con el que conseguiremos crear el efecto de una imagen entera a partir de sus trozos.
Ejercicio 7.3
Este ejercicio consiste en la división de una imagen grande en cuatro partes de igual tamaño. El objetivo será volver a juntarlas. Para ello usaremos una tabla de 2x2 con una de las partes en cada celda, sin borde y con márgenes y espaciado de las celdas nulo. El resultado buscado debe parecerse al de la figura 7.18 (exceptuando las flechas y las letras rojas que son indicativas):
Figura 7.18. Ejercicio 7.3. Aunque pueda parecer que hay una sola imagen, en realidad hay cuatro cuidadosamente colocadas.
Las imágenes a usar, así como una posible solución, a este ejercicio pueden encontrarse en el archivo ej7-3.zip .
Conclusión
Bueno, ya podemos respirar tranquilos, ya sabemos todo lo que se puede saber sobre la creación de tablas en el lenguaje HTML estándar. Sin duda es como para estar orgullosos, porque el método que usa este lenguaje no es excesivamente sencillo. Por esta razón no debe desanimarse el lector que llegado a este punto no recuerde parte de las etiquetas y atributos descritos en este capítulo. Nuestro objetivo no era ese, sino que como buenos creadores de páginas web conozcamos las etiquetas del lenguaje HTML sin llegar a saberlas de memoria pero lo suficiente para reconocer su función, conocer las posibilidades de las tablas y poder crear rápidamente tablas sencillas. Para la creación de tablas muy complicadas es recomendable usar un asistente como los que incluyen FrontPage o HomeSite (la versión shareware será incluida en el archivo FrontPage.zip y HomeSite.zip). Aunque estos asistentes no siempre nos ofrecen justo lo que queremos, nosotros ya conocemos lo suficiente para retocar el código de la tabla una vez creada.
- 1 - Introducción al lenguaje HTML
- 2 - Primeros pasos con HTML
- 3 - Parrafos en HTML
- 4 - Cómo insertar imagenes en una pagina
- 5 - Cómo crear enlaces hipertexto
- 6 - PRÁCTICA 1: La pagina web de "La chistera"
- 7 - Anclas (I)
- 8 - Anclas (II)
- 9 - Formato de texto
- 10 - La etiqueta FONT
- 11 - Texto preformateado
- 12 - Acentos y otros caracteres especiales
- 13 - Listas en HTML (I)
- 14 - Listas en HTML (II)
- 15 - Comentarios en HTML
- 16 - Practica 2: Un sitio web completo
- 17 - Usando color en el WWW
- 18 - Cómo cambiar la apariencia de una pagina
- 19 - Imagenes en las paginas Web (I)
- 20 - Imagenes en las paginas Web (II)
- 21 - Imagenes en las paginas Web (III)
- 22 - Cómo cambiar la apariencia de las imagenes
- 23 - Alternativas a las imagenes inline (I)
- 24 - Alternativas a las imagenes inline (II)
- 25 - Mejoras en las imagenes
- 26 - Cómo se crea una tabla HTML (I)
- 27 - Cómo se crea una tabla HTML (II)
- 28 - Alineamiento de tablas
- 29 - Alineamiento de celdas y filas
- 30 - Ancho de tablas y celdas
- 31 - Celdas que abarcan varias filas o columnas
- 32 - Margenes y separación de celdas
- 33 - Anidamiento
- 34 - Practica 3 - Tabla de Datos
- 35 - Practica 4 - Pagina Web con una estructura creada con tablas
- 36 - Practica 4 - Pagina Web con una estructura creada con tablas
- 37 - Practica 4 - Pagina Web con una estructura creada con tablas
- 38 - Estandares y extensiones del lenguaje HTML (I)
- 39 - Estandares y extensiones del lenguaje HTML (II)
- 40 - Extensiones a las listas (I)
- 41 - Extensiones a las listas (II)
- 42 - Alineamiento
- 43 - La etiqueta META
- 44 - Otras etiquetas del lenguaje HTML 3.2
- 45 - El atributo TARGET
- 46 - La etiqueta BASE
- 47 - Creación de paginas con frames
- 48 - Creación del documento de definición de frames (I)
- 49 - Creación del documento de definición de frames (II)
- 50 - Pagina completa con frames
- 51 - Atributos de la etiqueta FRAME
- 52 - Compatibilidad: NOFRAME
- 53 - Anidamiento de framesets
- 54 - Bordes de los frames
- 55 - Valores especiales del atributo TARGET
- 56 - Practica 5: Web de Los Alpes con frames
- 57 - Frames flotantes
- 58 - Sonido vídeo y otros ficheros externos
- 59 - Multimedia Inline (I)
- 60 - Multimedia Inline (I)
- 61 - Plug-ins y objetos incrustados
- 62 - Java en las Paginas Web
- 63 - Inserción de Applets Java (I)
- 64 - Inserción de Applets Java (II)
- 65 - Inserción de Applets Java (III)
- 66 - ActiveX, la tecnología del futuro
- 67 - Formularios en HTML
- 68 - Controles de Formularios (I)
- 69 - Controles de Formularios (II)
- 70 - Controles de Formularios (III)
- 71 - Controles de Formularios (IV)
- 72 - Otros controles
- 73 - Practica 6-Formulario para "Los Alpes"
- 74 - COMO USAR LOS DATOS DE UN FORMULARIO
- 75 - Envío De Ficheros Usando Formularios
|
Wikis relacionados con 'Curso completo de HTML - Margenes y separación de celdas'
