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 <table> para empezar una tabla.
• Cada elemento <tr> es una fila.
• Cada elemento <th> es una celda cabecera.
• Cada elemento <td> 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.

<table summary="Descripción de la tabla" ></table>

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:

 
<table summary="Esta tabla contien los datos adquiridos durante mi viaje para la serie un país en la mochila. He incluido ifnormación sobre las ciudades visitadas, 
la fecha de visita, la altitud, población y un ranking de la calidad de las cenas que allí disfrute."> 
 <caption>Ciudades que visite durante mi viaje por españa</caption> 
 <tr> 
  <th>Ciudad</th> 
  <th>Fecha</th> 
  <th>Temperatura</th> 
  <th>Altitud</th> 
  <th>Población</th> 
  <th>Ranking Cena</th>  
 </tr> 
 <tr> 
  <td rowspan="2">El Baixo Miño (Galicia)</td> 
  <td>Agosto 2, 1995</td> 
  <td>23º</td> 
  <td rowspan="2">200 m</td> 
  <td rowspan="2">2.000</td> 
  <td>5/5</td> 
 </tr> 
 <tr> 
  <td>Septiembre 2, 1995</td> 
  <td>15º</td> 
  <td>4/5</td> 
 </tr> 
 <tr> 
  <td>El Maestrazgo de Teruel</td> 
  <td>Junio 2, 1995</td> 
  <td>20º</td> 
  <td>1.300 m</td> 
  <td>500</td> 
  <td>3/5</td> 
 </tr> 
 <tr> 
  <td>El Priorato Tarragona</td> 
  <td>Mayo 1, 1995</td> 
  <td>18º</td> 
  <td>700m</td> 
  <td>800</td> 
  <td> 
   <table> 
    <tr> 
     <th>Labordeta</th> 
     <td>4/5</td> 
    </tr> 
    <tr> 
     <th>M.Prats</th> 
     <td>2/5</td> 
    </tr>  
   </table>  
  </td> 
 </tr> 
</table> 
 

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: <table>, <tr>, <th> y <td>, juntos para crear una tabla.
• El elemento <table> define y rodea la tabla completa.
• Cada fila contiene una o más celdas de datos definidas con <td>.
• Use el elemento <th> para las celdas de dato que esten en filas o columnas cabeceras.
• Las tablas se trazan en una parrilla. Cada fila corresponde a un <tr>...</tr> en tu HTML, y cada columna corresponde al contenido <td>...</td> en las filas.
• Puede facilitar información adicional sobre sus tablas con el atributo summary y el element <caption>
• 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 <td>. Sin embargo, necesita usar el elemento <td>...</td> 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 <td>
• 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.

Etiquetas: Curso Diseño Web, Tables