Tabla de bordes curvos (III)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Construyendo la tabla.-

Con las imágenes necesarias ya disponibles, vamos a diseñar nuestra tabla, en la que deberán incluirse celdas para las esquinas y los laterales, y una celda central para el contenido de la tabla.

Para diseñar la tabla cogemos lápiz y papel (siempre hay que estudiar la tabla antes de construirla con código), y dibujamos las celdas de la tabla que necesitamos, para ver las celdas y los anchos necesarios, y establecer las celdas a las que asignaremos rowspan y colspan, para que contengan a otras. Para haceros una idea, en el siguiente gráfico podéis ver la tabla que necesitaremos:

Una vez imaginada y dibujada la tabla, pasamos a su construcción. El código necesario es el que sigue:

<table cellspacing="0" cellpadding= "0"border="0" align="center" width="350" height="100">
  <tr valign= "top">
    <td rowspan= "2" colspan= "2" height="12" align="left"><img src="images/esquina_sup_izq.gif" width="15" height="12" border="0" alt=""></td>
    <td bgcolor="red" height="1"><img src="images/transparente.gif" width="1" height="1" border="0" alt=""></td>
    <td rowspan= "2" colspan= "2"height="12" align="right"><img src="images/esquina_sup_der.gif" width="15" height="12" border="0" alt=""></td>
  </tr>
  <tr>
    <td height="11"><img src="images/transparente.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
  <tr>
    <td bgcolor= "red" width="1" align="left"><img src="images/transparente.gif" width="1" height="1" border="0" alt=""></td>
    <td width="14"><img src="images/transparente.gif" width="1" height="1" border="0" alt=""></td>
    <td align="center" width="335" height="73">contenido</td>
    <td width="14"><img src="images/transparente.gif" width="1" height="1" border="0" alt=""></td>
    <td bgcolor= "red" width="1" align="right"><img src="images/transparente.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan= "2" colspan= "2" valign="bottom" align="left"><img src="images/esquina_inf_izq.gif" width="15" height="15" border="0" alt=""></td>
    <td height="14"><img src="images/transparente.gif" width="1" height="1" border="0" alt=""></td>
    <td rowspan= "2" colspan= "2" valign= "bottom" align= "right"><img src="images/esquina_inf_der.gif" width="15" height="15" border="0" alt=""></td>
  </tr>
  <tr>
    <td bgcolor= "red" height="1" valign="bottom"><img src="images/transparente.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
</table>

Y su resultado práctico, el que sigue:

		contenido

Consideraciones:

1. Es necesario controlar al pixel las anchuras y las alturas de las celdas de la tabla y de ésta en su totalidad, con objeto de que las piezas encajen con precisión en todos los navegadores. Para ello, la suma de las dimensiones de las celdas de cada fila y columna deben ser iguales a la anchura y la altura total de la tabla.

2. Como véis en el diseño, hemos usado colspan y rowspan en las celdas que contienen las imágenes de las esquinas. Esto ha sido necesario para que abarquen las celdas auxiliares de relleno que hemos incluido en la tabla, con objeto de que nos queden unas celdas laterales extremas de solo 1 pixel.

3. En estas celdas extremas, que son las que definen el contorno rojo de la tabla, hemos incluido nuestra imagen transparente y les hemos asignado un color de fondo igual que el definido para dibujar las esquinas curvas (rojo en nuestro ejemplo). En las celdas de relleno hemos incluido la imagen transparente, sin fondo de color alguno.

4. La inclusión de la imagen transparente en las celdas que no tienen otro contenido interior es necesaria siempre, ya que si una celda de una tabla no tiene contenido alguno no respeta las dimensiones que le asignemos.

5. Notad cómo hemos jugado con las alineaciones horizontales y verticales, dando una alineación izquierda a las celdas que forman el lateral izquierdo de la tabla, y derecha a las del lateral derecho. A su vez, hemos alineado superiormente las celdas de la parte superior de la tabla, e inferiormente las celdas de la parte inferior. El motivo de esto es que así podemos contemplar el caso en que el contenido de la tabla crezca sin aviso previo, adaptándose entonces la tabla al mismo sin deformarse.

Un ejemplo de éste fenómeno lo tenéis en la siguiente tabla, que es una copia de la anterior, pero en la que hemos hecho crecer el contenido de la celda interior añadiéndole varios saltos de línea mediante etiquetas <br>:

		contenido

Efectivamente, la tabla ha crecido en altura, pero respetando su estructura de bordes rojos.

Esto es todo, amigos. Espero que os sirva para crear bonitas tablas en vuestras páginas.