Elemento table
El elemento table es el gran contenedor y puede estar dentro de cualquier elemento que sea de flujo, como por ejemplo los div. Dentro del elemento table tendremos los elementos: caption, colgroup, thead, tbody, tfoot, tr, th y td, los cuales son los requeridos para darle la constitución a nuestra tabla, adicionalmente el nuevo estándar ha hecho que los siguientes atributos queden obsoletos dentro de table y tengan que utilizase exclusivamente por CSS: summary, align, width, bgcolor, cellpadding, cellspacing, frame, rules. La convención CSS para este elemento será esta:
table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }
Elemento tr
Como bien sabemos las tablas se componen de dos elementos básicos, filas y columnas, donde las filas representan cada registro de información y las columnas la estructura y el tipo de la información, veamos el elemento utilizado para crear las filas, este elemento es el tr. Este puede ser hijo de los siguientes elementos: table, thead, tfoot, tbody, como vemos puede ser hijo directo de una tabla o hijo de los elementos que son hijos de la tabla y que definen su estructura. Debe contener 1 o más elementos td o th según corresponda, en el nuevo estándar de HTML5 igualmente se ha colocado alguno de sus atributos obsoletos, estos son: align, char, charoff, valign, bgcolor. Los cuales han de trabajarse exclusivamente por CSS, dicho CSS tiene la siguiente estructura como convención:
tr { display: table-row; vertical-align: inherit; border-color: inherit;}
Elemento td
Este elemento define las columnas dentro de nuestras filas en la tabla, lo que nos permite separar la información dentro de un registro y así poder clasificarla según nuestras necesidades, es hijo del elemento tr, los atributos validos que puede poseer son: colspan, rowspan, headers y los atributos obsoletos que ahora deben manejarse en el CSS son: abbr, axis, align, width, char, charoff, valign, bgcolor, height,nowrap, scope. La convención CSS para este elemento es la siguiente:
td { display: table-cell; vertical-align: inherit; }
Nuestra primera tabla
Pongamos en práctica lo que hemos visto hasta ahora, ya sabemos que para nuestra tabla necesitamos filas y columnas dentro de nuestro elemento contenedor o padre, veamos a continuación como lo llevamos a código HTML:
<!DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body> <table> <tr> <td>Apples</td> <td>Green</td> <td>Medium</td> </tr> <tr> <td>Oranges</td> <td>Orange</td> <td>Large</td> </tr> </table> </body> </html>
Este código, nos da la estructura de una tabla de 2 filas con 3 columnas, como vemos es simple texto, lo que nos lleva a ver este resultado:
Como pudimos ver, es bastante sencillo crear una tabla en HTML5 de momento es solo texto, y sin formato, en la siguiente parte del tutorial veremos como hacer una tabla un poco más avanzada con contenido CSS.