CSS: El retorno de la tablas al desarrollo web

Escrito por Marc | Archivado en Desarrollo web, Tips | 277 veces visto.

Pues si amigos, desde hace unos días se ha estado difundiendo esta información, la he visto en un par o tres de blogs y hasta el momento no he visto oportuno comentar la noticia, una noticia que me parece explendida!

Si amigos, por que todos los que llevamos nuestros añitos en el sector y que pasamos unos ratos memorables con las tablas, intentando montar verdaderas estructuras para maquetar los diseños inmaquetables de nuestros grande amigos con los que vivimos en simbiosis los diseñadores (larga vida!! au au au). Intentando no anidar mas de 2 tablas en una web, viendo como poco a poco iban desapareciendo, siendo enterradas por las capas (DIV's), siendo utilizadas para tareas tan mundanas y básicas como la creación de cuadriculas con contenidos o alineamientos imposibles  en horizontal...

Pues si, vuelven las tablas, pero no de la forma en que las conocemos, vuelven adaptadas a los nuevos tiempos, vuelven reconvertidas y reinventadas en CSS para utilizar al gusto y antojo con nuestras capas (DIV's).

Realment hay situaciones que con las tablas era cosa de 5 minutos, pero con las malditas capas, te pasabas un buen rato anidando y alineando con FLOATS a lado y lado...ufff que bien nos va a venir este apaño!!!

Según puedo leer y entender en un par de artículos en inglés (aviso, mi inglés es un poco wat you name :P), Ahora podremos crear una estructura de capas basada en tablas, con sus denominaciones de FILA, COLUMNA, asignando propiedades de CSS2 del tipo:

PLAIN TEXT
CSS:
  1. display: table-row;

PLAIN TEXT
CSS:
  1. display: table-cell;

Podemos ver que para ello, usamos la propiedad DISPLAY de nuestras capas.

Cabe destacar que esto según he leido por ahí viene dado por la inminente salida de Internet Explorer 8 y su mejorado soporte para dichas propiedades: TABLE, TABLE-ROW, TABLE-CELL

Como se va a usar:

  • TABLE: Hace que el elemento se comporte como una tabla.
  • TABLE-ROW: Hace que el elemento se comporte como una fila (TR).
  • TABLE-CELL: Hace que el elemento se comporte como una celda (TD).
  • TABLE-ROW-GROUP: Hace que los elementos se comporten como el cuerpo de una tabla (TBODY).
  • TABLE-HEADER-GROUP: Hace que los elementos se comporten como la cabecera de una tabla (THEAD).
  • TABLE-FOOTER-GROUP: Hace que los elementos se comporten como el pie de una tabla (TFOOT).
  • TABLE-CAPTION: Hace que el elemento se comporte como leyenda.
  • TABLE-COLUMN: Hace que los elementos se comporten como columna (COL).
  • TABLE-COLUMN-GROUP: Hace que los elementos se comporten como un grupo de columnas (COLGROUP).

Pues no se ve muy complicado no? Vamos a ver un ejemplo (no lo he echo yo, lo he cogido prestado de una de las webs que mas a bajo indico como referencia para saber mas)

Ejemplo práctico:

el HMTL

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>CSS Level 2 with table based settings</title>
  7.     <link href="tables.css" rel="stylesheet" type="text/css" />
  8. </head>
  10. <div id="wrapper">
  11.     <div id="header">
  12.         Header information
  13.     </div>
  14.     <div id="main">
  15.         <div id="nav">
  16.             Navigation list here
  17.         </div>
  18.         <div id="columns">
  19.             <div id="sidebar">
  20.                 Nifty sidebar
  21.             </div>
  22.  
  23.             <div id="content">
  24.                 What would your site be without content
  25.             </div>
  26.         </div>
  27.     </div>
  28. </div>
  29. </body>
  30. </html>

el CSS

PLAIN TEXT
CSS:
  1. body
  2.     {
  3.     margin-left: 0px;
  4.     margin-top: 0px;
  5.     margin-right: 0px;
  6.     margin-bottom: 0px;
  7.     }
  8.  
  9. #header
  10.     {
  11.     display:block;
  12.     margin:0px auto;
  13.     width:870px;
  14.     padding:15px;
  15.     background-color:#666;
  16.     color:#FFF;
  17.     }
  18. /* nothing unusual so far */
  19.  
  20. #main
  21.     {
  22.     display: table;
  23.     margin:0px auto;
  24.     width:900px;
  25.     }
  26. /* display: table to make the main div be treated by browsers as a table */
  27.  
  28. #nav
  29.     {
  30.     display: table-row;
  31.     width: 900px;
  32.     height:50px;
  33.     line-height:50px;
  34.     text-indent:15px;
  35.     background-color:#D6D6D6;
  36.     color:#333;
  37.     }
  38.  
  39. /* is treated as a table row */
  40.  
  41. #sidebar
  42.     {
  43.     display: table-cell;
  44.     width: 185px;
  45.         height: 500px
  46.     padding-left:15px;
  47.     background-color:#FF6633;
  48.     color:#333;
  49.     }
  50.  
  51. #content
  52.     {
  53.     display: table-cell;
  54.     width: 685px;
  55.     padding-left:15px;
  56.     background-color:#77BBDD;
  57.     color:#333;
  58.     }
  59.  
  60. /* are placed inside the same father element: columns (check out the XHTML), and are treated as table cells */

Aquí tenéis 2 enlaces donde poder leer y aprender un poco mas sobre esta fantástica noticia.

The Return of Table-Based Layout
Everything you know about CSS is wrong

Tags: ,
Permalink | Comentarios (0) | Oct 24, 2008

Participa con nosotros, publica tu comentario.