Añade una tabla a tu página web

Las tablas se utilizan para presentar datos; algo que el HTML nos ha permitido hacer desde sus primeras versiones. Hoy, las tablas en XHTML o HTML no se hacen con variantes importantes, así que esto será rápido:

Las tablas se crean con el marcador <table>. Este está acostumbrado a permitir algunos atributos, pero solo uno de ellos, border="", continuará en HTML 5 en adelante. Los resultados que los demás también pueden ser alcanzados usando hojas de estilo, así que hablaré de ellos cuando hable de hojas de estilo. Por ahora, deberías saber que el atributo border="" define tanto si la tabla como sus celdas tendrán un borde o no.

En HTML y XHTML, border="" se utiliza para definir el ancho del borde de las tablas con un número que define su ancho en píxeles. En HTML 5, border="" es un interruptor binario: border="1" significa con bordes; border="", sin bordes. No hay otras opciones.

El resto de la tabla está formado por los marcadores <tr>, <th> y <td>. <tr> define las filas de la tabla y contiene a los elementos que forman las celdas. <th> y <td> son los elementos de las celdas, los que llevarán la información. Entre estos últimos, <th> está reservado para los encabezados, mientras que <td>, más general, lleva los datos.

Si deseas, también puedes utilizar los elementos <thead>, <tbody> y <tfoot> para agrupar los bloques de encabezado, cuerpo y pie, respectivamente. Si vas a utilizarlos, ten presente que <thead> no permite elementos <td> en él; solo elementos <th>.

Un ejemplo simple:

<table border="0" width="480" cellpadding="0" cellspacing="0">
<tr>
<td>columna uno</td><td>columna dos</td>
</tr>
<tr>
<td>fila dos</td><td>última celda</td>
</tr>
</table>

Un ejemplo más completo:

<table border="1">
<thead>
<tr>
<th>encabezado uno</th>
<th>encabezado dos</th>
</tr>
</thead>
<tfoot>
<tr>
<td>pie uno</td>
<td>pie dos</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>dato uno</td>
<td>dato dos</td>
</tr>
<tr>
<td>dato tres</td>
<td>dato cuatro</td>
</tr>
</tbody>
</table>

Como puedes haber notado, si utilizas los marcadores de agrupación, el orden de los grupos pierde su importancia.

Combinando filas y columnas

En algunos casos necesitas fundir dos filas o dos columnas para acomodar tus datos de una manera adecuada. Si necesitas hacer esto, simplemente usa las propiedades colspan="" o rowspan="" para especificar cuántas celdas necesitas fundir, teniendo en cuenta que colspan="" funde columnas y que rowspan="" funde filas. Usa estas propiedades en la celda que deseas fundir.

<table border="1" width="480" cellpadding="0" cellspacing="0">
<tr>
<td>columna uno</td><td>columna dos</td>
</tr>
<tr>
<td colspan="2">celdas fundidas en una fila</td>
</tr>
</table>

Practica y verás lo sencillo que es crear tablas en HTML.


Aprende + Computadores e Internet + Desarrollo web