Enjoy A New Student Discount All 55,000 Courses on sale for Only $12.99

Ends in 05h 23m 49s

HTML5-Las tablas, esas viejas conocidas

Quién no ha diseñado nunca con tablas?. Desde luego, creo que los que llevamos bastantes años en Internet, lo hemos hecho todos. El motivo era la falta de estilos y etiquetas que nos permitieran evitarlo, y la inexistencia de la idea «responsive».Hoy en día, aunque esté totalmente desaconsejado pata establecer layouts, siguen siendo necesarias en otras áreas.

Desde hace ya algunos años, nos han ido convenciendo de la poca utilidad de utilizar tablas para diseño, en un entorno tan exigente como el actual. El diseñar con tablas, nos crea una estructura totalmente rígida, que hace del «responsive design» una utopía, nuestro principal recurso, las famosas «media query» son totalmente inútiles ante un objeto con un numero determinado, y fijo, de filas y columnas. Si buscáis un poco en google.com acerca de las ventajas de «div vs tables«, entenderéis lo que os digo.

Para que, entonces, vamos a estudiar la etiqueta «table«?.  He comentado que no se considera correcto el uso de tablas para layouts, pero, cuando necesitamos mostrar datos tabulados, son el recurso correcto, para eso se crearon, y no hay ningún motivo para rehuirlas, incluso, en esta recomendación (HTML5), se potencia semánticamente su uso.

Y un ultimo comentario, ya se que a los que lleváis tiempo diseñando, no os tengo que convencer, pero para los que empiezan ahora, un consejo: no caigáis en la trampa de lo sencillo que parece diseñar con tablas, porque a la larga, las páginas se hacen inmantenibles, y, cuando te acostumbras, pensar en cajas (div, header, main, aside…) es igual de fácil.

Vamos a definir las etiquetas implicadas.

 Etiqueta Significado
tableEtiqueta que define al objeto table, y engloba a todas las demás.
captionEquivalente al ya visto «figcaption«, presenta un pie de tabla
 thead engloba a las lineas de cabecera de la tabla; dentro pueden ir las tr/th que se requieran
 tbodyengloba a las lineas de detalle de la tabla; puede haber mas de uno, y dentro, irán todas las lineas tr/td que sean necesarias
 tfootengloba a las lineas de pie de tabla; solo puede haber una etiqueta tfoot por tabla, y dentro irán los tr/td que sean necesarios
 trrepresenta una fila de la tabla, y contiene el numero detd, que sean necesario.A menos que se declaren agrupamientos, el numero de td que van en un tr, ha de ser igual durante toda la tabla
 tdrepresenta la celda, y recubrirá el contenido que se quiera dejar dentro de la celda. Soporta los atributos:















colspanExtiende el contenido a traves de las celdas de las siguientes lineas
rowspanExtiende el contenido a traves de las celdas de las siguientes columnas
 header Lista de los ID de las etiquetas th correspondientes a SU cabecera

 thes idéntica a la «td», pero representa una celda de cabecera . Dispone del atributo «scope». con los valores row | col | rowgroup | colgroup (default) , que indica a quien se le aplica la cabecera
  
  

Si queremos ver estas etiquetas en acción, podriamos hacer:

Os dejo el codigo HTML de una tabla, y la presentación que hará de la misma un navegador.

En (1) podéis ver el uso de «colspan» para fusionar todas las celdas de la fila, de tal manera que en esa fila, solo haya un celda, que ademas es «th», ya que es de cabecera

En (2), podéis ver el uso de «rowspan» para hacer que las tres primeras celdas, ocupen dos filas; como consecuencia, veis en (3), que esa fila colo tiene 2 celdas, ya que las otras tres columnas, estan definidas en el «tr» anterior.

Como podéis ver en  (4), el importe va a la columna correcta, ya que hemos ocupado las tres primeras columnas, expandiendo la fila anterior.

Y si quereis una tabla con un poco mas de estilo….solo tenéis que utilizar un poco de CSS, para hacer algo como esto:

 

Le hemos añadido el correspondiente caption, que nos aparece justo encima de la tabla, y la frivolidad de darle un rayado, que se consigue gracias a :

tbody tr:nth-child(odd) {
   background: #eee;
}

aunque reconozco que es bastante avanzado para este momento, os lo comento nadamas, aplicamos un color de background a los elementos tr, y como solo queremos que se aplique a los impares, le decimos «:nth_child(odd)»

A continuación, teneis un cuadro acerca de los atributos obsoletos, y como se pueden sustituir.

AtributoSe sustituye por CSSValoresEjemplo
aligntext-alignfloatleft|right|center|justifyleft|righttext-align:rightfloat:left
valignvertical-alignbotton|top|middle|
baseline|sub|super
|text-top|text-botton| valor
vertical-align:top
widthwidthvalor|%|autowidth:200px
heightheightvalor|%|autoheight:50em
bgcolorbackgroundbackgroundbackground-color
background-image
background-repeat
background-attachment
backfround-position
 
borderbordercolorborderestilo color anchoborder:solid red 10px
cellspacingborder-collapseborder-spacingcollapse|separate|valor 
cellpaddingpaddingvalor| %padding:5px
    

 Como resumen a todo esto, podemos decir que, cuando se trata de datos tabulares, el uso de tablas, se hace intuitivo, y para el resto de casos,… nos las utilicemos.

Si realmente, os encontráis con un layout IMPOSIBLE de resolver sin tabla, cosa muy difícil, disponéis en CSS dentro de la característica «display«, todos los comportamientos de los objetos de tabla, (table-cell, table-row,…..), con lo que con algunos «div«, también se puede emular…..

En nuestro próximo articulo, revisaremos los nuevos atributos globales que se han incorporado en HTML5, y alguno de los que ya existían.

 


Descubre más desde Recursos para formacion

Suscríbete y recibe las últimas entradas en tu correo electrónico.

8 comentarios

  1. Como se puede hacer para que en la tabla mostrada en el ultimo ejemplo la fila que indica importe 75,10 € y pagina http://www.trenes.com aparezca con background blanco. Al estar agrupada creo que es preferible mantener el color con el del nombre del usuario, al menos en la aplicación que esto realizando.

    Gracias. Un saludo

    1. El efecto de tableado, es una forma de conseguir que la vista no se desvia horizontalmente, sin embargo en el ejemplo que presentamos se realiza de una forma muy sencilla desde CSS; para controlarlo como tu quieres, creo que lo mas correcto es que en servidor, cuando estas construyendo la tabla, implementes una rutina que vaya poniendo dos clases distintas a cada elemento, segun quieras el fondo de un color o de otro.

  2. Como se puede hacer para que en la tabla mostrada en el ultimo ejemplo la fila que indica importe 75,10 € y pagina http://www.trenes.com aparezca con background blanco. Al estar agrupada creo que es preferible mantener el color con el del nombre del usuario, al menos en la aplicación que esto realizando.

    Gracias. Un saludo

Deja un comentario

/*Si te ha gustado el artículo
no dudes en compartirlo*/

Facebook
Twitter
LinkedIn

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies

Ver mi IP

Ver ip de mi máquina
tipo valor
Ip: 216.73.216.185
Proxy: 216.73.216.185
Remote host: 216.73.216.185
Remote port: 59436
** 216.73.216.185, 172.70.179.52