Cargando

Ir a contenido


 


Tablas en HTML5 - parte 1

En la primera parte de este tutorial veremos un poco más de cerca el elemento table, su uso, sus atributos y los cambios que ha tenido en HTML5.


Escrito por el ago 15 2013 17:56 HTML5 Tablas elemento table html5 atributos trablas html5


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:

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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado ago 15 2013 17:56
  •   Visitas 6.6K



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse