No es aconsejable el uso de tablas a no ser que no haya más remedio, pues hay algunos dispositivos en los que no se ven bien.
En cualquier caso, nunca se deben poner más de tres columnas.
Para delimitar la tabla utilizamos la etiqueta <table> </table>. Cada fila se delimita con <tr> </tr>. El título de cada columna con <th> </th>; y cada celda con <td> </td>. Si dejamos un punto vacío en una de las columnas, pondremos <td> </td>.
Para especificar el espesor del borde de la tabla, utilizamos el atributo «border». Aunque por defecto ya pone 1 px. Ejemplo:
Border="2px"
Para especificar qué bordes alrededor de la tabla queremos que sean visibles, utilizamos el atributo «frame»:
frame="box" --> significa que se pondrán todos los bordes de alrededor.
frame="void" --> Ningún borde por fuera.
frame="above" --> Sólo el borde superior.
frame="below" --> sólo el borde inferior.
frame="hsides" -->Bordes superior e inferior.
frame="lhs" --> Borde izquierdo.
frame="rhs" --> Borde derecho.
frame="vsides" --> Bordes derecho e izquierdo.
Para especificar qué bordes interiores queremos que sean visibles, utilizamos el atributo «rules»:
rules="none" --> Ningún borde interior
rules="all" --> Todos los bordes interiors.
rules="cols" --> Delimita las columnas.
rules="rows" --> Delimita las filas.
Vamos a poner un ejemplo de tabla:
Si ponemos:
<p class="negrita salto10">Tabla</p>
<table frame="box" rules="all">
<tr>
<th>Título 1</th>
<th>Título 2</th>
<th>Título 3</th>
</tr>
<tr>
<td>Celda 1.1</td>
<td>Celda 2.1.</td>
<td>Celda 3.1.</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Celda 3.2.</td>
</tr>
<tr>
<td>Celda 1.3.</td>
<td></td>
<td>Celda 3.3.</td>
</tr>
<tr>
<td></td>
<td>Celda 2.4.</td>
<td></td>
</tr>
</table>
Quedará esto:
Tabla
| Título 1 | Título 2 | Título 3 |
|---|---|---|
| Celda 1.1 | Celda 2.1. | Celda 3.1. |
| Celda 3.2. | ||
| Celda 1.3. | Celda 3.3. | |
| Celda 2.4. |