Tablas

Introduccion

Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo.

Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos.

Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos.

Objetivos

1. Conocer como insertar tablas en las paginas Web.
2. Conocer como cambiar el tamano de las tablas.
3. Conocer como se alinean las tablas.
4. Conocer como se fusionan filas y columnas.
5. Conocer como se alinea el contenido de las celdas de las tablas.
6. Conocer como establecer el espacio entre las celdas.
7. Conocer como se anidan las tablas.

Insertar tablas

Las tablas más sencillas de HTML se definen con tres etiquetas:

<table> 
<tr> 
<td>

La etiqueta <table> encierra todas las filas y columnas de la tabla.

Las etiquetas <tr> (del inglés "table row") definen cada fila de la tabla y encierran todas las columnas.

La etiqueta <td> (del inglés "table data cell") define cada una de las columnas de las filas, aunque realmente HTML no define columnas sino celdas de datos.

Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuación en las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas <tr> aparecen antes que las etiquetas <td>.

Ejemplo:

<table border="1">
     <tr>
          <td> Mi primera tabla </td>
     </tr>
</table>

Cabe mencionar que para mostrar las dimensiones y estructura de las tablas, hacemos uso de su atributo "border".

Cambiar tamano de las tablas

Como se mostro con las imagenes, las dimensiones de la tabla tambien pueden ser manipuladas con los mismos atributos:

width - Para manipilar el ancho
height - Para manipular lo alto

Estas dimensiones pueden ser de tamaño fijo o porcentual.

Ejemplo con dimensiones fijas:

<table border="1" width="200" height="70">
     <tr>
          <td>
               Alto y ancho fijo
         </td>
     </tr>
</table>

Ejemplo con dimensiones porcentuales:

<table border="1" width="100%" height="50%">
     <tr>
          <td>
               Alto y ancho porcentual
         </td>
     </tr>
</table>

Alineacion de las tablas

El atributo "align" nos permite alinear la tabla en tres estados:

left - a la izquierda
center - al centro
right - a la derecha

Ejemplo tabla centrada:

<table border="1" align="center">
     <tr>
          <td>
               Tabla centrada
          </td>
     </tr>
</table>

Ejemplo tabla alineada a la derecha:

<table border="1" align="right">
     <tr>
          <td>
               Tabla alineada a la derecha
          </td>
     </tr>
</table>


Fusionar filas y columnas

Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas para formar una columna ancha o une varias filas para formar una fila más alta que las demás.

Para fusionar las filas se utiliza el atributo "rowspan" y para fusionar las columnas se utiliza el atributo "colspan".

Ejemplo fusion de filas:

<table border="1">
     <tr>
          <td> A </td>
          <td rowspan="2"> B </td>
     </tr>
     <tr>
          <td> C </td>
     </tr>
</table>

Ejemplo fusion de columnas:

<table border="1">
     <tr>
          <td colspan="2"> A </td>
     </tr>
     <tr>
          <td> B </td>
          <td> C </td>
     </tr>
</table>

Alinear el contenido de las celdas

Las celdas es el espacio rectangular que se forma en la intersección de una fila y una columna. En este espacio es donde se coloca el contenido que se desea mostrar dentro de la tabla. El contenido se puede ubicar en tres sentidos horizontalmente con la ayuda del atributo "align":

left - a la izquierda
center - al centro
right - a la derecha

También el contenido se puede ubicar en tres sentidos verticalmente con la ayuda del atributo "valign":

top - superior
middle - al centro
bottom - inferior

Ejemplo de tabla con contenido alineado a la izquierda:

<table border="1" width="250" height="150">
     <tr>
          <td align="right">
               Contenido
          </td>
     </tr>
</table>

Ejemplo de tabla con contenido alineado en el inferior:

<table border="1" width="250" height="150">
     <tr>
          <td valign="bottom">
               Contenido
          </td>
     </tr>
</table>

Espacio entre celdas

Los atributos "cellpading" y "cellspacing" nos ayudaran a dar a nuestra tabla un aspecto más estético:

cellpading - es la distancia que hay entre el contenido y los bordes de la celda.
cellspacing - es la distancia que hay entre los bordes de las celdas.

Ejemplo:

<table border="1" cellpadding="10" cellspacing="10">
     <tr>
          <td>
               Celda 1
          </td>
          <td>
               Celda 2
          </td>
     </tr>
</table>

Tablas anidadas

Muy útil también es el uso de tablas anidadas. De la misma forma que podíamos incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de otras.

Ejemplo:

<table border="10" width="200" height="120" align="center">
  <tr>
    <td>
      Tabla principal
    </td>
  </tr>
  <tr>
    <td>

      <table border="1" align="center">
        <tr>
          <td>
            Tabla anidada
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>


Actividad

Escriba el siguiente codigo en un BLOC DE NOTAS, guardelo como pagina Web y compruebe lo que ha aprendido:

<html>
     <head>
           <title> Uso de Tablas </title>
     </head>
     <body>

<table border="3" width="200" cellpadding="10" cellspacing="0" align="center">
 <tr>
  <td colspan="2" align="center">
   <b> Lista de cursos </b>
  </td>
 </tr>
 <tr>
  <td> 1 </td>
  <td> <font color="blue"> HTML </font> </td>  
 </tr>
 <tr>
  <td> 2 </td>
  <td> JAVASCRIPT </td>  
 </tr>
 <tr>
  <td> 3 </td>
  <td> HOJAS DE ESTILO </td>  
 </tr>
</table>
   
     </body>
</html>