10. Tablas

10.1 Estructura de una tabla

Las tablas están formadas por celdas que representan la intersección de una columna y una fila. Dicho de otro modo: el espacio formado por la intersección de una columna y una fila se denomina celda. Una tabla es un conjunto de celdas.

La etiqueta que marca el comienzo y fin de una tabla es <TABLE>.

Luego encontramos una etiqueta para designar las filas: <TR>.

Y por último, dentro de cada fila designamos celdas con la etiqueta <TD>.

Ejemplo:

Código:

<table width="400" border="1" cellspacing="5" cellpadding="5">
  <tr>
    <td>Fila 1, Celda 1</td>
    <td>Fila 1, Celda 2</td>
  </tr>
</table>

Si quisiéramos agregar otra fila similar, sólo debemos copiar el código que se encuentra entre las etiquetas <TR></TR>, incluyéndolas. Si quisiéramos agregar otra columna, tendríamos que copia el fragmento <TD>...</TD> e insertarlo abajo, antes del cierre de la etiqueta TR.

10.2 Atributos de la etiqueta TABLE

10.3 Atributos de las filas

Los siguientes atributos corresponden a la etiqueta <TR>, o sea una fila. Cuando se aplica uno de éstos a la etiqueta, se está modificando sólo esa fila.

10.4 Atributos de las celdas

Del mismo modo, los siguientes atributos se aplican a la etiqueta <TD>, de celda:

Veamos un ejemplo con algunos de estos atributos:

<table width="400" border="10" align="center" cellpadding="5" cellspacing="20" bgcolor="yellow" bordercolor="orange">
  <tr>
    <td bgcolor="#6666CC" height="100" width="70%">Texto fila 1, celda 1</td>
    <td bgcolor="#0099CC" bordercolor="#003366">Texto fila 1, celda 2</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

La etiqueta TABLE tiene los siguientes atributos:

width="400": ancho, 400 píxeles.
border="10": borde de 2 píxeles.
align="center": alineado centrado.
cellpadding="5": espacio desde el borde de la celda al texto, 5 píxeles.
cellspacing="20": espacio entre las celdas: 20 píxeles.
bgcolor="yellow": color de fondo amarillo.
bordercolor="orange": color del borde naranja.

Atributos de la primera celda, fila 1:

bgcolor="#6666CC": color de fondo.
height="100": alto de 100 píxeles. El alto de la primera celda se aplica a la segunda de la misma fila, también.
width="70%": ancho en porcentaje. Si queremos que una tabla se ajuste automáticamente a lo ancho, debemos trabajar con porcentajes. Automáticamente la segunda columna se ajustará al 30%. Si hay varias columnas, hay diferentes maneras de combinar los porcentajes.

Atributos de la segunda celda, fila 1:

bgcolor="#0099CC": establecemos otro color de fondo.

Los atributos border y bordercolor están siendo desplazados por el uso de CSS.

La alineación del texto está dada por defecto, en algunos navegadores se verá el texto arriba a la izquierda y en otros en el medio, a la izquierda.

10.5 Atributos rowspan y colspan

En el siguiente ejemplo, tomamos la tabla anterior para utilizar los atributos rowspan y colspan. A continuación analizaremos el código.

Aquí agregamos el atributo rowspan a la celda 1 de la primera fila y el resultado es la unión de las celdas 1 de las filas 1 y 2. Observemos que borramos la primera celda de la fila de abajo.

<table width="400" border="10" align="center" cellpadding="5" cellspacing="20" bgcolor="yellow" bordercolor="orange">
  <tr>
    <td rowspan="2" bgcolor="#6666CC" height="100" width="70%">Texto fila 1, celda 1</td>
    <td bgcolor="#0099CC" >Texto fila 1, celda 2</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

Ahora haremos lo mismo pero con una de las columnas:

Aquí agregamos el atributo colspan en la celda 1 de la segunda fila y borramos la segunda celda de la misma fila.

<table width="400" border="10" align="center" cellpadding="5" cellspacing="20" bgcolor="yellow" bordercolor="orange">
  <tr>
    <td bgcolor="#6666CC" height="100" width="70%">Texto fila 1, celda 1</td>
    <td bgcolor="#0099CC" >Texto fila 1, celda 2</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>

10.6 Atributo nowrap

Al aplicar este atributo forzamos a que el texto no se corte, pasando por alto los atributos de la celda en cuanto al ancho, incluso los de la tabla, si es necesario. A continuación el ejemplo (en base al anterior) y código:

<table width="400" border="10" align="center" cellpadding="5" cellspacing="20" bgcolor="yellow" bordercolor="orange">
  <tr>
    <td bgcolor="#6666CC" height="100" width="70%">Texto fila 1, celda 1</td>
    <td bgcolor="#0099CC" nowrap>Texto fila 1, celda 2 Texto fila 1, celda 2 Texto fila 1, celda 2</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>

10.7 Formato de encabezados con etiqueta TH y título de tabla

Existe una etiqueta particular para establecer encabezados o títulos en las filas y columnas de una tabla. Se reemplaza la etiqueta TD de aquella fila o columna que deseamos como título con la etiqueta TH.

También hay otra etiqueta para agregar el título a una tabla. Luego de la apertura de la misma, con TABLE, agregamos una línea con la etiqueta CAPTION y entre apertura y cierre, escribimos el título. Esta etiqueta tiene el atributo align que permite situar el título arriba (top), abajo (bottom), a la derecha (right) o a la izquierda (left). A continuación un ejemplo y su código:

<table width="400" border="10" align="center" cellpadding="5" cellspacing="20" bgcolor="yellow" bordercolor="orange">
  <caption align="bottom">Título de la tabla</caption>
  <tr>
    <th bgcolor="#6666CC" height="100" width="70%">Texto fila 1, celda 1</th>
    <th bgcolor="#0099CC" >Texto fila 1, celda 2</th>
  </tr>
<tr>
    <th>Texto fila 2, celda 2</th>
    <td>Texto fila 2, celda 2</td> 
  </tr>
</table>

Observemos que la única celda que no tiene la etiqueta TH es la última. Por defecto, las celdas con esta etiqueta tienen alineación centrada y texto en negrita.

10.8 Tablas anidadas

Las celdas pueden contener textos, imágenes, enlaces, listas, incluso otras tablas con más textos, imágenes, etc. Anidar una tabla es crear una tabla dentro de otra.

Utilizamos el anidamiento de tablas para diagramar sitios, ubicar los elementos (imágenes, textos, multimedia). Es de destacar que el empleo de tablas está siendo desplazado por la maquetación (diagramación) con hojas de estilo (CSS). Pero en primera instancia las tablas son un buen recurso, accesible en gran cantidad de navegadores y de diferentes versiones. Un primer paso en el desarrollo web.

Actualmente se sigue utilizando la diagramación con tablas para newsletters (aunque hay también en CSS pero no todos los programas de correo reconocen los estilos, aún), en algunos CMS que tienen disponible HTML y en MercadoLibre y sistemas similares (EBay), para las plantillas.

¿Cómo empezamos?

Antes que nada, debemos dibujar un bosquejo en lápiz y papel o en Word o PowerPoint sobre lo que queremos hacer. Para tener idea de cómo se anidarán las tablas. Aquí el gráfico de un newsletter (ancho recomendado total: 600px):

Código:

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="80" bgcolor="#99FF66">
      <table width="560" border="1" align="center" cellpadding="0" cellspacing="0" >
        <tr>
          <td width="70%" align="left" valign="middle">Logo</td>
          <td align="right" valign="middle">Teléfono</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="100" align="center" bgcolor="#FFCC00">Imagen encabezado</td>
  </tr>
  <tr>
    <td height="120" bgcolor="#CCFFFF">
      <table width="560" border="1" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="170" align="center">Imagen</td>
          <td align="center">&nbsp;</td>
          <td width="170" align="center">Imagen</td>
          <td align="center">&nbsp;</td>
          <td width="170" align="center">Imagen</td>
        </tr>
        <tr>
          <td>Texto oferta</td>
          <td>&nbsp;</td>
          <td>Texto oferta</td>
          <td>&nbsp;</td>
          <td>Texto oferta</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="70" align="center" valign="middle" bgcolor="#CCCCCC">Pie, contacto sitio</td>
  </tr>
</table>

Y el resultado con sus contenidos:

El color de los enlaces está seteado en la etiqueta body, por lo que sólo la tomarán algunos programas de correo.

Aquí un ejemplo de maquetado con tablas para un sitio web simple. La tabla es de 960px de ancho, el estándar para una resolución de 1024 de ancho.

Ejemplos editables

Actualización: enero, 2021. Elena Navntoft.