Codificación aprenderaprogramar.com: CU01051D
ESTILOS PARA TABLAS
En el pasado las tablas fueron elementos que muchos diseñadores o programadores utilizaban para crear un diseño donde las celdas eran contenedores partes de la web. Hoy en día esto ya no se usa y los diseños se crean usando elementos flotantes o nuevas capacidades de CSS para crear columnas. Sin embargo, las tablas siguen siendo elementos importantes dentro de una web.
Debe quedar claro que no está recomendado el uso de tablas para crear divisiones de maquetación en la web. Por ejemplo un menú no es recomendable colocarlo dentro de una tabla, será preferible usar elementos flotantes para ello. Sin embargo, muchas veces estaremos trabajando en desarrollos web donde nos será necesario introducir tablas simplemente porque se trata de un contenido tabulado. Por contenido tabulado hacemos alusión a una serie de registros que describen los valores de ciertos parámetros que se indican en la cabecera de la tabla. Por ejemplo, una tabla puede servir para describir los nutrientes de los alimentos.
| Alimento | Calorías (kCal) | Grasas (g) | Proteína (g) | Carbohidratos (g) |
|---|---|---|---|---|
| Arándano | 49 | 0.2 | 0.4 | 12.7 |
| Plátano | 90 | 0.3 | 1.0 | 23.5 |
| Cereza | 46 | 0.4 | 0.9 | 10.9 |
| Fresa | 37 | 0.5 | 0.8 | 8.3 |
Para representar este tipo de contenidos tabulados usamos tablas y para lograr que la tabla tenga un aspecto estético adecuado aplicamos estilos CSS.
Recordaremos ahora algunos conceptos básicos de HTML:
<table> … </table> delimita la tabla.
<caption> … </caption>: elemento opcional que permite poner un título de tabla. Muchas veces no se usa.
<thead> … <thead>: delimita filas o celdas que no son celdas de datos, sino encabezados de la tabla.
<th> … </th>: delimita una celda de encabezado (table header). A veces todas las celdas de una tabla se definen como celdas normales y se prescinde del uso de th.
<tbody> … <tbody>: delimita las filas y celdas de datos de una tabla.
<tr> … </tr>: delimita una fila (table row).
<td> … </td>: delimita una celda normal de datos (table data cell).
<tfoot> … </tfoot>: delimita el pie de tabla.
Vamos a utilizar el siguiente código HTML para trabajar los estilos de tablas. Escribe el código en un editor y guarda el documento HTML.
|
<html> |
Por tradición era (y en cierta medida sigue siendo) muy habitual usar atributos de la etiqueta HTML table para definir los bordes y espaciado en las tablas, por ejemplo <table border="1" cellpadding="14" cellspacing="0">
Estos atributos no los usaremos en nuestros desarrollos web, ya que como venimos indicando a lo largo de todo el curso debemos separar la estructura del documento (html) de su apariencia (css).
Si la tabla no tiene definido ningún estilo se mostrará como por defecto la muestre el navegador, en general sin bordes. Para introducir bordes tenemos que definir el borde de la tabla (borde externo) y el borde de las celdas (bordes internos). Escribe este código CSS, guárdalo en un archivo css con el nombre adecuado, y comprueba la diferencia entre visualizar la tabla sin estilos o con este estilo básico:
/* Curso CSS estilos aprenderaprogramar.com*/body {font-family: Arial, Helvetica, sans-serif; }
table, th, td {border: 1px solid #000;}
Podemos comprobar que al dibujar la tabla se dibuja un borde externo para la tabla en su conjunto y luego un borde interno para cada una de las celdas. El efecto que se genera es un poco extraño al tener la tabla “líneas dobles” de separación. Este efecto se puede anular usando la propiedad border-collapse como veremos a continuación.
ATRIBUTOS QUE NO SE HEREDAN EN TABLAS
Algunas reglas que normalmente se heredan no son heredadas por las tablas. Por ejemplo si aplicamos una regla como body {font-size: 8px;} podremos comprobar que en algunos navegadores las tablas no heredan este tamaño. Tendremos entonces que especificar estos valores para tablas usando declaraciones como table {font-size: 8px;}. Aunque sean los mismos atributos que los definidos para la etiqueta body, será necesario para evitar que el navegador aplique el valor por defecto que tenga previsto para tablas.
Nota: otra vía por la que se puede conseguir la herencia de algunos atributos como font-size en tablas es añadiendo una declaración en cabecera del documento HTML del tipo <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. Este tipo de declaraciones pueden dar lugar a que el navegador actúe de una forma u otra (se dice que el navegador utiliza un modo u otro), lo cual nos vuelve a referenciar al problema de las diferentes formas en que los distintos navegadores pueden mostrar un mismo código HTML. En general preferiremos reescribir el atributo y asegurarnos de que el navegador actuará conforme esperamos antes que fiarnos de que todos los navegadores respondan igual ante una declaración en la cabecera del documento HTML.
ANCHURA Y ALTURA DE TABLAS Y ELEMENTOS DE TABLAS
La anchura de una tabla será la necesaria para mostrar sus contenidos y cada celda tendrá el ancho necesario, excepto si establecemos indicaciones específicas. Una forma interesante de hacerlo es usando porcentajes. Por ejemplo si establecemos un ancho para la tabla de 550 px y tenemos 5 columnas, podemos indicar que todas las columnas tengan el mismo ancho dividiendo el 100% de ancho de la tabla entre 5 para obtener un 20 %. Aplicaríamos reglas de este tipo: table {width: 550px;} th, td {width: 20%;}
Si la tabla está dentro de otro contenedor y queremos que ocupe el 100% de espacio disponible podemos aplicar reglas del tipo table {width: 100%; }
ATRIBUTOS NO APLICABLES A TABLAS
Podemos establecer un valor de height para las celdas de tablas pero este valor no será respetado si el contenido de la celda es mayor que el espacio disponible. Si intentamos aplicar un atributo como th, td { overflow: hidden;} comprobaremos que probablemente no funcione. Si necesitamos aplicar un valor height y que éste no sea modificable de ninguna manera, podemos introducir el contenido de las celdas en el HTML dentro de elementos div. Por ejemplo:
<td><div>Arándano este texto es muy largo y va a exceder el espacio disponible</div></td>
Ahora estableceríamos el control de la altura de los elementos div y el valor de la propiedad overflow que sí es aplicable a los elementos div de forma similar a esta:
th, td {text-align: center; padding:0.5em; width:25%; height: 1em; overflow: hidden;}
th div, td div {height: 1em; overflow: hidden; color:red;}
Haz pruebas escribiendo código para verificar lo que hemos expuesto.
PROPIEDAD BORDER-COLLAPSE
| PROPIEDAD CSS border-collapse | |
| Función de la propiedad | Permite controlar si en una tabla cada elemento mantiene un borde propio generando un efecto de “bordes dobles” o si los bordes se fusionan generando un efecto de “borde único”. |
| Valor por defecto | separate |
| Aplicable a | Tablas |
| Valores posibles para esta propiedad | separate (cada elemento conserva su borde) |
| collapse (los bordes se fusionan en un borde único) | |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com |
.myTable {border-collapse: separate;} .myTable2 {border-collapse: collapse;} |
Aunque el valor separate es el valor por defecto para esta propiedad, la mayoría de las veces se aplica el valor collapse porque genera una visualización más sencilla y acorde a las expectativas de los usuarios.
Modifica el código CSS del ejemplo anterior como indicamos a continuación y comprueba el efecto que se produce:
/* Curso CSS estilos aprenderaprogramar.com*/body {font-family: Arial, Helvetica, sans-serif; }
table, th, td {border: 1px solid #000; border-collapse: collapse;}
th, td {text-align: center; padding:0.5em;}
Comprobarás que ahora los bordes se muestran como bordes únicos.
EJERCICIO
Crea un documento HTML con tres tablas, todas ellas iguales, con un título de tabla, cinco columnas y 7 filas (la primera ella, fila de encabezados que no son datos propiamente dichos). Aplícale los siguientes estilos y comprueba la visualización obtenida:
a) La tabla 1 tendrá una anchura de 600 píxeles y cada columna tendrá un 20% de la anchura total de la tabla. Existirán bordes únicos de color gris y tendrán un grosor de 8 píxeles.
b) La tabla 2 tendrá una anchura igual al 100 % disponible en la ventana y cada columna tendrá un 20 % de la anchura total de la tabla. Existirán bordes dobles de color marrón y tendrán un grosor de 2 píxeles.
c) La tabla 3 tendrá una anchura de 500 píxeles y cada columna tendrá 100 píxeles de anchura. Sólo existirán bordes en la parte inferior de las filas (es decir, no habrá bordes laterales ni superiores), tipo borde único, con un grosor de 6 píxeles y color azul.
Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
