5. TABLAS

Las tablas permiten representar cualquier elemento de nuestra página (texto, imagenes, etc) en diferentes filas y columnas separadas entre si. Es una herramienta muy útil para "ordenar" los contenidos de la web.

5.1 El Tag <table>

La tabla se define mediante el tag <table>,</table>. Por ahora sólo diré eso, lo que va dentro lo explicaré un poco más adelante. Un ejemplo de una tabla típica es la siguiente:

     
     
     

Como se habrán dado cuenta no es la primera vez que están ante una tabla, ya que las he ocupado por todo el manual (ni se imaginan como). Esta tabla tiene 3 filas y 3 columnas, pero esta tabla está vacia, dentro de cada celda se puede poner texto, imágenes, otras tablas, etcétera.

5.2 Atributos de el Tag <table>

Atributos Función
border = número Indica el ancho del borde de la tabla en puntos (pixeles).
cellspacing = número Indica el espacio en puntos que separa las celdas que estan dentro de la tabla.
cellpadding = número Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.
width = número/% Indica el ancho de la tabla en pixeles (número) o en porcentaje (%) en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.
height = número/% Indica la altura de la tabla en pixeles (número) o en porcentaje (%) en función del alto de la ventana del navegador. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.
bgcolor = "codigo color" Especifica el color de fondo de toda la Tabla.

Por ejemplo los atributos de esta tabla son: width="95%" border="1" cellspading="2" cellspacing="0"

5.3 Otros Tags de la Tabla <tr>,<td>,<th>

Una tabla se define según sus filas y columnas. Para definir una fila se usa el tag <tr>,</tr>. Para definir las columnas que componen la tabla se utilizan los tags <td> o <th>. <td> indica una celda normal, y <th> indica una celda de "cabecera", es decir, el contenido será centrado, resaltado en negritas y en un tamaño ligeramente superior al normal. Ambos tags soportan los mismos atributos.

5.4 Atributos de el Tag <tr> y <td>

Atributos Función
align = left / center / right Indica como se debe alinear el contenido de la celda, a la izquierda (left), a la derecha (right) o centrado (center).
valign = top / middle / bottom Indica la alineación vertical del contenido de la celda, en la parte superior (top), en la inferior (bottom) o en medio (middle).
rowspan = número Indica el número de filas que usará la celda. Por defecto usa una sola fila.
colspan = número Indica el número de columnas que usará la celda. Por defecto usa una sola columna.
width = número/% Indica el ancho de la columna en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este parametro sólo funciona en los navegadores modernos.
bgcolor = codigo color Especifica el color de fondo del elemento (celda) de la Tabla.

Los tags <td> y <th> son cerradas según el estandar de HTML, es decir que un elemento de tabla <td> deberia cerrarse con un </td> , sin embargo los navegadores asumen que un elemento de la tabla, queda automaticamente "cerrado" cuando se "abre" el siguiente, aún así, es recomendable cerrarlo.

5.5 Creando una Tabla, Paso a Paso

Ahora viene la parte difícil de las tablas, así que atención. El patrón general para crear una tabla es el siguiente:

  • Se declara la tabla con el tag <table>
  • Se indica que comienza una fila con el tag <tr>
  • Se declara la primera celda con el tag <td>..</td> o <th>..</th>
  • Todo lo que se quiera poner en una celda se escribe entre <td>y</td>
  • Se siguen declarando las celdas siguientes con <td>..</td>, todas las celdas siempre en la misma fila.
  • Para indicar que no se van a poner más celdas en esa fila, se cierra la fila con </tr>
  • Se inicia una nueva fila con <tr> y se repite todo de nuevo hasta que no se quiera poner más filas
  • Se cierra la última fila con </tr>
  • Se cierra la tabla con </table>

Nótese que cuando se declara la primera celda también se declara la primera columna. Veamos algunos ejemplos más. Recuerda que lo que va entre <!-- y --> son comentarios.


  1. <table><!-- empieza la tabla -->
  2. <tr><!-- comienza la primera fila-->
  3. <td>T11</td><!-- se declara la primera celda y se escribe T11 en ella-->
  4. <td> T12</td><!-- se declara la siguiente celda y se escribe T12 en ella-->
  5. <td>T13</td><!-- se declara la siguiente celda y se escribe T13 en ella-->
  6. </tr><!-- se cierra la primera fila ya que tenemos las 3 columnas -->
  7. <tr><!-- comienza la segunda fila-->
  8. <td>T21</td><!-- se declara la primera celda y se escribe T21 en ella-->
  9. <td>T22</td><!-- se declara la siguiente celda y se escribe T22 en ella-->
  10. <td>T23</td><!-- se declara la siguiente celda y se escribe T23 en ella-->
  11. </tr><!-- se cierra la segunda y última fila-->
  12. </table><!-- ya están las dos filas, por lo que se cierra la tabla -->

Este es el ejemplo de arriba pero ya hecho.

T11 T12 T13
T21 T22 T23

5.6 Usando Rowspan y Colspan

Estos atributos sirven para hacer que 2 o más celdas se combinen en una sola. Toma el código y la tabla anterior como referencia y ve algunos ejemplos

5.6.1 Combinando T11 y T21

Para ello basta tomar la línea 3 del código original y cambiarla por <td rowspan="2">. También se debe eliminar la línea 8, ya que ahora en la segunda fila sólo habrán 2 celdas. Ve el código completo.


  1. <table>
  2. <tr>
  3. <td rowspan="2">T11</td>
  4. <td>T12</td>
  5. <td>T13</td>
  6. </tr>
  7. <tr>
  8. <!-- ahora la celda T21 no existe -->
  9. <td>T22</td>
  10. <td>T23</td>
  11. </tr>
  12. </table>

Este es el resultado:

T11 T12 T13
T22 T23

5.6.2 T12 y T13 hacen la fusión!

Ahora toma la línea 4 del código original y cambialo por <td colspan="2">T12</td> y por supuesto eliminar la línea 5. Lo que resulta:


  1. <table>
  2. <tr>
  3. <td>T11</td>
  4. <td colspan="2">T12</td>
  5. <!--ahora la celda T13 no existe-->
  6. </tr>
  7. <tr>
  8. <td>T21</td>
  9. <td>T22</td>
  10. <td>T23</td>
  11. </tr>
  12. </table>

Este es el resultado:

T11 T12
T21 T22 T23

5.7 Ejemplos

A continuación mostraré un ejemplo de una tabla que contiene sólo texto.


<table border="1" cellspacing="0" cellpadding="2" width="50%" align="center">
<tr>
<th>Buscadores</th>
<th colspan="2">Otros Links</th>
</tr>
<tr>
<td><a href="http://www.starhost.com.mx">STAR HOST</a></td>
<td><a href="https://www.mundopaul.com">MundoPaul.CoM</a></td>
<td><a href="https://www.mpmx.info">Aprende HTML</a></td>
</tr>
<tr>
<td><a href="https://shop.awiwi.mx">Awiwi Shop</a></td>
<td><a href="https://www.mundojuegos.info">MundoJuegos.INFO</a></td>
<td><a href="https://www.mpmx.info">HTML</a></td>
</tr>
</table>

Se vería como

Buscadores Otros Links
STAR HOST MundoPaul.CoM Aprende HTML
Awiwi Shop MundoJuegos.INFO HTML

Sencillo, ¿no? con tablas se pueden hacer una infinidad de cosas y con estilo. Por cierto, les recomiendo que le dedíquen un poco más de tiempo. Ahora otro ejemplo donde inserté una imágen en una tabla dentro de otra:

<table width="50%" border="1" align="center"><!-- creo la primera tabla -->
<tr>
<th>POKÉMON</th><!-- la primera celda -->
<tr><!-- salto a la otra fila -->
<td><!-- la primera celda de la segunda fila -->
<table width="100%" border="1"><!-- creo la otra tabla -->
<tr>

<td rowspan="3"><img src="moltres.gif"></td><!-- * -->
<td><b>Nombre:</b></td>
<td>
Moltres</td>
<tr><!-- salto a la otra fila -->
<td><b>Número:</b></td>
<td>146</td>
<tr><!-- salto a la otra fila -->
<td><b>Tipo:</b></td>
<td>
Fuego/Volador</td>
</tr><!-- salto a la otra fila -->
</table>
<!-- termino la tabla de adentro -->
</td><!-- cierro la celda de la primera tabla -->
</tr>
</table><!-- cierro la primera tabla -->

*En esta parte se hizo que la celda ocupara 3 filas (con rowspan) y se insertó una imagen en ella.

Si no hubiera insertado la imagen, ni escrito algo, verías esto:

 
     
   
   

Si le inserto la imagen y el texto:

POKÉMON
Nombre: Moltres
Número: 146
Tipo: Fuego/Volador

Ahora si a la tabla de adentro le doy border=0, el efecto es mucho mejor:

POKÉMON
Nombre: Moltres
Número: 146
Tipo: Fuego/Volador