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: 268

Visitas el mes pasado: 441

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 en tablas (III)

6.3 Ejemplo estilo tabla II

css

Propiedades de texto aplicadas a tablas

En este apartado seguiremos con el ejemplo de la página anterior (6.2 Ejemplo estilo tabla I). En la tabla creada en la página anterior le añadiremos algunas propiedades CSS para cambiar su aspecto. Empezaremos por el texto.

En primer lugar cambiaremos el aspecto del título de la tabla. Éste se define en HTML por la etiqueta <caption>, por lo tanto añadiremos la siguiente línea al código CSS.

caption { font-family: Garamond; font-size: 1.5em; font-weight: bold; color: #990000; text-align: center; }

Con esta línea CSS hemos cambiado el tipo y el tamaño de la letra de la cabecera de la tabla (propiedades font-family y font-size) así como el tipo de letra a negrita (propiedad font-weight) y también hemos cambiado el color de la letra (propiedad color); por último hemos centrado el texto mediante la propiedad text-align: center.

De igual manera podemos cambiar las propiedades del texto de las celdas, teniendo en cuenta que hay dos tipos de celdas las de primera línea (con etiqueta en HTML <th>) y las de datos (con etiqueta en HTML <td>), a las cuales daremos diferentes estilos. Añadiremos para ello las siguientes líneas en el código CSS:

th { font-family: Verdana; font-weight: bold; color:#660033 }

td { font-family: Arial; color:#0000cc; text-align: center;}

tras estas modificaciones en el código CSS la tabla la veremos así:

Tabla de ejemplo
Columna 1 Columna 2 Columna 3 Columna 4
Fila 1 Celda 1,1 Celda 1,2 Celda 1,3 Celda 1,4
Fila 2 Celda 2,1 Celda 2,2 Celda 2,3 Celda 2,4
Fila 3 Celda 3,1 Celda 3,2 Celda 3,3 Celda 3,4
Fila 4 Celda 4,1 Celda 4,2 Celda 4,3 Celda 4,4

Hasta el momento el código CSS que hemos aplicado a la tabla es el siguiente: (en color verde las líneas que hemos añadido en este apartado; en negro las que ya teníamos).

table,td, th { border: 1px solid black; }
table { border-collapse: collapse; margin: auto; }
td, th { width: 100px; height: 35px; }
caption { font-family: Garamond; font-size: 1.5em; font-weight: bold; 
          color: #990000;text-align: center; }
th { font-family: Verdana; font-weight: bold; color:#660033 }
td { font-family: Arial; color:#0000cc }

Como vemos, se puede cambiar el aspecto del texto dentro de una tabla de la misma manera que en un párrafo o en una etiqueta de título; lo único que cambia es el selector utilizado para indicar dónde queremos cambiar el aspecto del texto.


color de fondo de las celdas

Para definir el color de fondo de las celdas utilizaremos la propiedad background-color, así podemos dar distintos colores a los distintos tipos de celdas, o al título de la tabla.

En la tabla de ejemplo añadiremos esta propiedad para ver de distinto color las celdas de primera línea y las celdas de datos. Para ello añadiremos esta propiedad a las reglas CSS que indican mediante el selector este tipo de celdas. el código CSS quedará así: (en color verde el texto añadido)

table,td, th { border: 1px solid black; }
table { border-collapse: collapse; margin: auto; }
td, th { width: 100px; height: 35px; }
caption { font-family: Garamond; font-size: 1.5em; font-weight: bold; 
          color: #990000;text-align: center; }
th { font-family: Verdana; font-weight: bold; color:#660033;
     background-color: #ffffcc; }
td { font-family: Arial; color:#0000cc; background-color: #ccffff; }

La tabla de ejemplo la veremos ahora de la siguiente manera:

Tabla de ejemplo
Columna 1 Columna 2 Columna 3 Columna 4
Fila 1 Celda 1,1 Celda 1,2 Celda 1,3 Celda 1,4
Fila 2 Celda 2,1 Celda 2,2 Celda 2,3 Celda 2,4
Fila 3 Celda 3,1 Celda 3,2 Celda 3,3 Celda 3,4
Fila 4 Celda 4,1 Celda 4,2 Celda 4,3 Celda 4,4

Queremos ahora que la celda de la esquina superior derecha sea invisible y del mismo color que el fondo para ello en el código HTML añadiremos a la etiqueta donde está esta celda el atributo class="hueco" de modo que podamos distinguir esta celda de las demás para aplicarle distintas propiedades CSS

el código HTML quedará modificado de la siguiente manera:

<table>
<caption>Tabla de ejemplo</caption>
  <tr>
    <td class="hueco"></td>
    <th>Columna 1</th>
    <th>Columna 2</th>
    <th>Columna 3</th>
    <th>Columna 4</th>
  </tr>	
	...
	...

ahora añadimos al código CSS la siguiente línea:

.hueco { background-color: white; border-left-color: transparent; border-top-color: transparent; }

con esta regla CSS hacemos que el color de fondo de esta celda sea el mismo que el del fondo de la página, a la vez que hacemos invisibles los bordes superior e izquierdo de la celda, con lo cual conseguimos que parezca que esta celda no forme parte de la tabla.

La tabla ahora la veremos así:

Tabla de ejemplo
Columna 1 Columna 2 Columna 3 Columna 4
Fila 1 Celda 1,1 Celda 1,2 Celda 1,3 Celda 1,4
Fila 2 Celda 2,1 Celda 2,2 Celda 2,3 Celda 2,4
Fila 3 Celda 3,1 Celda 3,2 Celda 3,3 Celda 3,4
Fila 4 Celda 4,1 Celda 4,2 Celda 4,3 Celda 4,4


Márgenes en el interior de las celdas

Por último queremos que el texto de las celdas de datos no aparezca pegado al margen izquierdo de la celda. para ello añadiremos un margen interno (padding) a la izquierda de la celda, en nuestro caso 10px. Sin embargo, al añadir un margen a la celda, la anchura del margen se suma a la anchura de la celda, haciéndose ésta mas ancha. Para evitar esto reduciremos la anchura de la celda (propiedad width) en la misma cantidad que añadamos de margen. La regla CSS que modifica la celda quedará así: (en color verde el texto añadido)

td { font-family: Arial; color:#0000cc; background-color: #ccffff; padding-left: 10px; width: 90px; }

y la tabla nos quedará así:

Tabla de ejemplo
Columna 1 Columna 2 Columna 3 Columna 4
Fila 1 Celda 1,1 Celda 1,2 Celda 1,3 Celda 1,4
Fila 2 Celda 2,1 Celda 2,2 Celda 2,3 Celda 2,4
Fila 3 Celda 3,1 Celda 3,2 Celda 3,3 Celda 3,4
Fila 4 Celda 4,1 Celda 4,2 Celda 4,3 Celda 4,4

Y el código CSS completo que hemos aplicado a la tabla será el siguiente:

table,td, th { border: 1px solid black; }
table { border-collapse: collapse; margin: auto; }
td, th { width: 100px; height: 35px; }
caption { font-family: Garamond; font-size: 1.5em; font-weight: bold; 
          color: #990000;text-align: center; }
th { font-family: Verdana; font-weight: bold; color:#660033; 
     background-color: #ffffcc; }
td { font-family: Arial; color:#0000cc;background-color: #ccffff; 
     padding-left: 10px;width: 90px;  padding-left: 10px; width: 90px; }
.hueco { background-color: white;border-left-color: transparent;
         border-top-color: transparent; }


Otras modificaciones en las celdas

Como hemos visto en este ejemplo. el tratamiento de textos dentro de la celda es el mismo que fuera de ella, utilizando las mismas propiedades. Si las celdas son lo suficientemente grandes, también podemos incluir en ellas imágenes y otro tipo de objetos multimedia (vídeo, audio, etc.). Por supuesto podemos incluir enlaces, imágen de fondo, etc. Todo ello tiene el mismo tratamiento que fuera de la tabla, lo único que hay que tener en cuenta es incluir dentro de la celda las etiquetas y atributos HTML necesarios y que el selector CSS apunte a la celda o celdas que queremos modificar.



En la siguiente página veremos otras propiedades CSS que pueden aplicarse a las tablas, que aunque no suelen utilizarse, conviene conocerlas.

Propiedades avanzadas



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