Las tablas pueden hacerse: en HTML en la forma clásica o mediante la utilización de DIV más estilos. Esta última forma, aunque más complicada, tiene sus ventajas en especial en las web grandes ya que los DIV, hacen que los archivos pesen menos y se cargue más rápidamente la página. Además, mejoran mucho con los estilos CSS.
Las TABLAS, son en principio más controlables y muy útiles para formularios y listas. Su uso es esencialmente para crear estructuras rígidas, para tabular datos que, combinando con CSS, adquieren cierta flexibilidad. Son ideales para presentar datos, pero en cuestión de diseño y maquetación los div's son lo mejor ya que ahorran bastante código. En la creación de páginas dinámicas con contenidos amplios, trabajar con tablas en su totalidad sería muy limitante.
Razones para utilizar div o tabla se pueden encontrar en muchos foros. A continuación, incluyo dos enlaces donde dan algunas: IGDonline; VidaMrr
Vamos a ver un ejemplo para colocar imágenes, con links, en forma de tabla. Se puede hacer de distintas maneras y, según lo que nos convenga, lo haremos de una forma u otra. Elegimos imágenes de forma cuadrada y les damos un tamaño concreto (130x130):
1. PONIENDO LAS URL DE LAS IMÁGENES UNA A CONTINUACIÓN DE OTRA
Incluimos los códigos de las imágenes, unos a continuación de los otros, dejando espacios entre ellos para que queden con una separación. Conforme vamos añadiendo imágenes, se van colocando en filas, pero si se quiere forzar una fila se da un salto de línea:
<a href="https://enlace primera imagen"><img border="0" height="130" src="https://primera imagen" width="130" /></a> <a href="https://enlace segunda imagen"><img border="0" height="130" src="https://segunda imagen" width="130" /></a> <a href="http://enlace tercera imagen"><img border="0" height="130" src="https://tercera imagen" width="130" /></a> <a href="http://enlace cuarta imagen"><img border="0" height="130" src="https://cuarta imagen" width="130" /></a>
2. CON TABLAS
Ya vimos en el apartado de HTML, cómo crear tablas. En este caso, ponemos la tabla centrada, sin borde, con un espacio concreto entre celdas y con imágenes de tamaño específico y con un link:
<center>
<table cellspacing="20"><tbody>
<tr>
<td><a href="https://enlace primera imagen"><img border="0" height="130" src="https://primera imagen" width="130" /></a></td></tr>
<td><a href="https://enlace segunda imagen"><img border="0" height="130" src="https://segunda imagen" width="130" /></a></td>
<td><a href="http://enlace tercera imagen"><img border="0" height="130" src="https://tercera imagen" width="130" /></a></td>
<td><a href="http://enlace cuarta imagen"><img border="0" height="130" src="https://cuarta imagen" width="130" /></a> </td>
</tbody></table>
</center>
Si queremos más imágenes, tendremos que modificar la tabla añadiendo las filas y columnas que necesitemos.
3. CON DIV
Con la etiqueta Div, definimos un espacio. Si queremos que las imágenes aparezcan en línea, incluimos sus códigos unos a continuación de los otros (si damos un salto de línea aparecen en cascada). Definimos el margen con un valor de 10 px alrededor de cada imagen. Conforme vamos añadiendo imágenes, se van colocando en filas. Los links se añaden como en los ejemplos anteriores.
<div style="height: auto; width: auto;">
<img height="130" src="https://primera imagen" style="float: left; margin: 10px;" width="130" /> <img height="130" src="https://segunda imagen" style="float: left; margin: 10px;" width="130" /> <img height="130" src="https://tercera imagen" style="float: left; margin: 10px;" width="130" /> <img height="130" src="https://cuarta imagen" style="float: left; margin: 10px;" width="130" /></div>
La propiedad margin admite entre uno y cuatro valores, con el siguiente significado:
- Si solo se indica un valor, todos los márgenes tienen ese valor.
- Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los márgenes izquierdo y derecho.
- Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior y el segundo valor se asigna a los márgenes izquierdo y derecho.
- Si se indican los cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen izquierdo.
4. CON HTML Y CSS
En LinuxHispano encontramos una explicación de cómo hacerlo.
