Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 195

Visitas el mes pasado: 284

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




6. Estilo de tablas

6.1 Bordes de la tabla

css

Formatos básicos

Todas las propiedades CSS utilizadas para modificar el texto o las imágenes pueden servirnos igualmente para modificar los textos o las imágenes contenidos dentro de las tablas. Basta con aplicar las propiedades marcando en los selectores las celdas donde deben aplicarse.

Además de las propiedades generales para texto o imágenes, hay una serie de propiedades específicas para las tablas.

Las tablas, por defecto se muestran con las celdas separadas, y una serie de características que pueden cambiarse mediante el uso del código CSS. Hay diferentes propiedades que modifican las tablas, las cuales las veremos a continuación.


Separación de celdas: propiedades border-collapse y border-spacing

La propiedad border-collapse se emplea para definir si las celdas deben tener separacion entre ellas. Esta propiedad tiene la siguiente definición.


border-collapse Fusión de bordes
Valores collapse | separate | inherit
Descripción Define el mecanismo de fusión de los bordes de las celdas adyacentes de una tabla
Valor inicial separate
se aplica a Todas las tablas

la propiedad border-collapse puede tomar los valores collapse para mostrar los bordes juntos, o separate para mostrar los bordes separados.

Si optamos por el valor separate, podemos usar la propiedad border-spacing para controlar la separación de los bordes de cada celda.

La propiedad border-spacing tiene la siguiente definición:


border-spacing espaciado entre bordes
Valores <medida> <medida>? | inherit
Descripción Establece la separación entre los bordes de las celdas adyacentes de una tabla
Valor inicial 0
se aplica a Todas las tablas

Si como valor indicamos solamente una medida, nos marcará la separación tanto en horizontal como en vertical, si indicamos dos medidas, la primera será la separación horizontal, y la segunda la separación vertical.

La diferencia entre usar border-collapse: collapse; o border-spacing: 0; es que border-collapse fusiona los dos bordes adyacentes de una celda para formar un solo borde, mientras que border-spacing: 0; mostrará los bordes con una anchura doble ya que en realidad se trata de dos bordes iguales sin separación entre ellos.

En el siguiente ejemplo se muestra una tabla a la que se le han aplicado las propiedades border-collapse y border-spacing de diferentes maneras.

Ver página ejemplo





En las siguientes páginas veremos un ejemplo en el que aplicamos las propiedades conocidas para cambiar el estilo de una tabla.

ejemplo estilo tabla I







manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com