Curso de Diseño Web X – Tablas

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. Hemos hablado del funcionamiento de Internet, los enlaces entre páginas, la metodología de trabajo cuando nos enfrentamos a un proyecto Web, la publicación nuestro proyecto Web en Internet, la inclusión de imágenes en nuestras páginas , la historia y estándares HTML, como añadir estilo con CSS , la tipografía, tamaño de letra y colores en CSS y el modelo de caja en CSS. En esta entrada hablamos de como representar información tabular en HTML.

Usamos los siguiente elementos HTML para crear tablas

  • Use la etiqueta

    para empezar una tabla.

  • Cada elemento

    es una fila.

  • Cada elemento

    es una celda cabecera.

  • Cada elemento

    es una celda.

Mejorar la usabilidad de las tablas

El atributo summary no se muestra en la página Web. Este atributo se usa exclusivamente para mejorar accesibilidad y actúa como un texto alternativo que los lectores de pantalla puede leer en voz alta a un usuario para describir la tabla.

El elemento caption, por otro lado, se muestra como pie de tabla; sin embargo por defecto, la mayoría de los navegadores la muestran encima de la tabla. La posición de este elemento la podemos controlar con CSS.

Celdas

El modelo de caja en CSS también tiene se usa para representar tablas tal y como se muestra en el siguiente gráfico.

No existe un margen como en el tradicional modelo de cajas; sin embargo podemos usar la propiedad border-spacing para separar nuestras celdas. A menudo nos va interesar que los bordes de las celdas se representen como uno sólo. Para ello usaremos la propiedad CSS border-collapse.

border-collapse: collapse;

Podemos aplicar otras propiedades CSS para dar estilo a nuestras tablas. Por ejemplo, si queremos que nuestras celdas cabecera tengan un color de fondo escribiríamos:

th { background-color: #cc6600;}

En HTML podemos anidar unas tablas dentro de otras y podemos hacer que celdas ocupen varias filas o columnas gracias a los atributos rowspan y colspan. El siguiente ejemplo, donde se usan los atributos mencionados en este artículo, muestra código HTML, CSS y como quedaría en un navegador.

Código HTML:

 

la fecha de visita, la altitud, población y un ranking de la calidad de las cenas que allí disfrute.">

Ciudades que visite durante mi viaje por españa

Ciudad
Fecha
Temperatura
Altitud
Población
Ranking Cena


El Baixo Miño (Galicia)
Agosto 2, 1995
23º
200 m
2.000
5/5


Septiembre 2, 1995
15º
4/5


El Maestrazgo de Teruel
Junio 2, 1995
20º
1.300 m
500
3/5


El Priorato Tarragona
Mayo 1, 1995
18º
700m
800



Labordeta
4/5


M.Prats
2/5






Código CSS:

 
table {border-collapse: collapse;}
caption { caption-side: bottom; }
th {background-color: #c5c5c5;color: black;}
td, th {border: 1px solid black;padding: 5px;}
table table th {background-color: #orange;}

Resultado:

Listas

Con el atributo list-style-type podemos cambiar la representación (una rayita, un circulo …) que simboliza cada elemento de nuestras listas. Podemos utilizar las siguientes palabras clave:

  • disc
  • circle
  • square
  • none

Podemos usar incluso una imagen propia para adornar cada elemento de nuestras listas. Imagine por ejemplo una lista de documentos PDF. Podemos colocar un pequeño icono PDF al comienzo de cada elemento usando la propiedad CSS list-style-image.

li.pdf { list-style-image: url(images/icon_pdf_big.gif; }

Resumen

  • Las tablas HTML se usan para estructurar información tabular.
  • Use los elementos de tabla HTML:

    ,

    ,

    y

    , juntos para crear una tabla.

  • El elemento

    define y rodea la tabla completa.

  • Cada fila contiene una o más celdas de datos definidas con

    .

  • Use el elemento

    para las celdas de dato que esten en filas o columnas cabeceras.

  • Las tablas se trazan en una parrilla. Cada fila corresponde a un

    en tu HTML, y cada columna corresponde al contenido

    en las filas.

  • Puede facilitar información adicional sobre sus tablas con el atributo summary y el element

  • Las celdas de las tablas tiene interlineado, espacio entre bordes, que es el espacio entre celdas.
  • Del mismo modo que puedes controlar el interlineado, bordes y márgenes de otros elementos, puedes controlar el interlineado, borde y espacio entre bordes de las celdas de una tabla en CSS
  • La propiedad border-collapse es una propiedad especial para tablas de CSS que permite combinar los bordes de celda en un borde simple para un aspecto más simple
  • Puede cambiar la justificación de los datos en las celdas de sus tablas con las propiedades de CSS text-align y vertical-align
  • Puedes añadir color a tus tablas con la propiedad background-color. El color de fondo puede ser añadido a la tabla completa, a una sola fila o a una simple celda
  • Si no tiene datos para una celda, no ponga contenido en el elemento

    . Sin embargo, necesita usar el elemento

    para mantener la justificación de la tabla

  • Si necesita que una celda ocupe varias filas o columnas, puede usar los atributos rowspan o colspan del elemento

  • Puedes anidar tablas dentro de tablas posicionando el elemento tabla y todo su contenido dentro de una celda.
  • Las tablas se deben usar para información tabular, no para diseñar sus páginas. Use CSS para lograr posicionamientos con múltiples columnas.
  • list-style-type permite cambiar el tipo del marcador que usamos en las listas.
  • list-style-image permite especificar una imagen como un marcador de lista.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Leave a Reply

Your email address will not be published. Required fields are marked *