Buscador


En todo Internet
En Uterra.Com

Contenidos


Antes de que CSS se extendiera, cuando las páginas Web se maquetaban con HTML, la forma casi única de organizar los contenidos en una página Web era mediante tablas.

Una tabla podemos dimensionarla en función del tamaño de la pantalla, por ejemplo, el 80% de la pantalla, o por una medida concreta, sustituyendo este valor por ejemplo por 800, donde 800 es el número de pixeles de anchura de la tabla.

Una tabla es un conjunto organizado de celdas organizadas en filas (sentido horizontal) y columnas (sentido vertical). Las celdas pueden tener una determinada separación entre ellas, y se determina mediante la propiedad “cellSpacing”, mientras que la distancia entre el contenido de la celda y los límites de esta se controla mediante “cellPadding”. También podemos determinar si los bordes de las celdas son o no visibles mediante la etiqueta “border”, si toma el valor cero no serán visibles.

Podemos fusionar celdas de una misma fila mediante la propiedad “colspan” o podemos fusionar celdas de la misma columna mediante la propiedad “rowspan”.

Sobre el formato de los contenidos de la tabla como el tipo de letra, podemos asignarle a toda la tabla un tipo de letra, en nuestro caso, verdana de tamaño 10.

Para centrar una tabla o alinearla a un lado u otro de la pantalla la manera más sencilla es mediante una capa div con la alineación que deseemos.

Observa la sintaxis de esta tabla:

<html>

<head>
<title>Formato de las tablas.</title>
</head>

<body>

<div align="center">

<table border="1" width="80%" cellspacing="5" cellpadding="10" style="font-family: Verdana; font-size: 10pt">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="5" width="100%"><p align="center">texto a la centrado</td>
    </tr>
    <tr>
        <td colspan="4" width="80%"><p align="right">Texto a la derecha</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="3" width="60%">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" width="40%"><p align="left">Texto a la izquierda</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td rowspan="2">hola</td>
    </tr>
    <tr>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
    </tr>
</table>

</div>

</body>

</html>