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

Visitas el mes pasado: 669

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 (II)

6.2 Ejemplo estilo tabla I

css

Propiedades CSS aplicadas a elementos de una tabla

Las mismas propiedades que hemos visto para dar estilo al texto son válidas para el texto y los elementos de una tabla. La mejor forma de verlo es a través de un ejemplo en el cual iremos aplicando las diferentes propiedades más habituales en CSS.


Ejemplo de tabla

Tengamos la siguiente tabla de ejemplo:

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

Su código HTML es el siguiente:

<table>
<caption>Tabla de ejemplo</caption>
  <tr>
    <td></td>
    <th>Columna 1</th>
    <th>Columna 2</th>
    <th>Columna 3</th>
    <th>Columna 4</th>
  </tr>
  <tr>
    <th>Fila 1</th>
    <td>Celda 1,1</td>
    <td>Celda 1,2</td>
    <td>Celda 1,3</td>
    <td>Celda 1,4</td>
  </tr>
  <tr>
    <th>Fila 2</th>
    <td>Celda 2,1</td>
    <td>Celda 2,2</td>
    <td>Celda 2,3</td>
    <td>Celda 2,4</td>
  </tr>
  <tr>
    <th>Fila 3</th>
    <td>Celda 3,1</td>
    <td>Celda 3,2</td>
    <td>Celda 3,3</td>
    <td>Celda 3,4</td>
	</tr>
  <tr>
    <th>Fila 4</th>
    <td>Celda 4,1</td>
    <td>Celda 4,2</td>
    <td>Celda 4,3</td>
    <td>Celda 4,4</td>
  </tr>
</table>


Estilo de las celdas

Lo primero que debemos hacer es indicar la forma de aplicar el estilo CSS, nosotros lo haremos mediante la inclusión en la cabecera del documento de la etiqueta de estilos.

para ello en la cabecera de la página, dentro de la etiqueta <head> ...</head> incluiremos la etiqueta:

<style type="text/css">

</style>

Dentro de esta etiqueta escribiremos todo el código CSS necesario para dar estilo a la tabla.

estilo de los bordes

Para dar estilo a los bordes utilizaremos la propiedad border aplicada a las celdas. el código CSS necesario es el siguiente:

table, td, th { border: 1px solid; }

la tabla la veremos ahora 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

Sin embargo queremos que no haya separación entre los bordes de las celdas, para ello usamos la porpiedad border-collapse .Al código CSS le añadimos la siguiente línea.

table { border-collapse: collapse; }

y la tabla nos quedará 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

anchura y altura de celdas

El siguiente paso sería dar la misma anchura a todas las columnas y a todas las filas de la tabla, para ello le indicaremos la cantidad de píxeles que deben medir las celdas mediante las propiedades width (ancho) y height (alto).

Añadiremos al código CSS la siguientes línea.

td, th { width: 100px; height: 35px; }

y la tabla la veremos del modo siguiente:

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

En este ejemplo hemos optado por dar la anchura a cada una de las celdas. también se puede optar por dar la anchura a la tabla completa mediante el selector table

table { width: 500px; height: 175px; }

sin embargo en este caso la altura y anchura de las filas no es uniforme, ya que dependerá de su contenido.

posición de la tabla

La tabla por defecto está posicionada a la derecha del elemento contenedor, para desplazarla hacia la derecha de modo que quede centrada o en otra posición podemos usar la propiedad margin-left.

El valor que le demos al margen nos dirá cual es el espacio de la separación hacia la derecha.

Del mismo modo y mediante las propiedades margin-top y margin-bottom podemos indicar la separación de la tabla respecto a su elemento superior e inferior.

Sin embargo la manera más sencilla de centrar una tabla es dar el valor auto a la propiedad margin, y eso es lo que vamos a hacer.

En la línea CSS que empieza por el selector table le añadimos la siguiente propiedad (en color verde el texto añadido)

table { border-collapse: collapse; margin: auto; }

Y la tabla nos quedará 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

Existe el problema de que algunos navegadores como Internet Explorer no muestren la tabla centrada con la propiedad margin: auto para solucionar este problema debemos obligar al navegador a adoptar un comportamiento similar al resto mediante la etiqueta DOCTIPE. De momento basta saber que en el código HTML de la página y antes de cualquier etiqueta, (incluso antes de la etiqueta <html>) escribiremos la siguiente línea:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

si la página tuviera algún otro tipo de etiqueta DOCTYPE la borras y la cambias por ésta; ya que esta etiqueta obliga a seguir al navegador a estandarizar muchas de sus aplicaciones, evitándo así muchos problemas de diferencia de aspecto entre unos navegadores y otros.

más adelante (en el tema "metainformacion") trataremos sobre este tipo de etiquetas

Hasta ahora el código CSS que hemos añadido a la tabla de ejemplo es el siguiente:

table,td, th { border: 1px solid black; }

table { border-collapse: collapse; margin: auto; }

td, th { width: 100px; height: 35px; }




En la siguiente página seguimos con este ejemplo, aplicando las propiedades CSS para cambiar el estilo de la tabla.

Estilo de la tabla II



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