En el pasado las tablas de HTML se utilizaban para controlar el layout de los sites, de forma de mantener las proporciones del contenido, crear secciones, dividir la información, etc. Actualmente esto es una mala práctica, de hecho con las nuevas especificaciones de el elemento table en HTML5 se ha hecho lo posible para que este sea utilizado para su verdadero propósito que es mostrar datos en arreglos de 2 dimensiones.
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:
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:
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:
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:
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.
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.
