Tablas

Las tablas se utilizan para contener informacion así como para layout (cómo distribuir las cosas en el documento). Puedes ajustar las tablas para rellenar los margenes, especificar un ancho fijo o dejar que esto lo haga el navegador automaticamente, de forma que el tamaño se ajuste al contenido.

Las tablas consisten en una o más filas de celdas. Un ejemplo:

AñoVentas
200018 Mill
200125 Mill
200236 Mill

El atributo border especifica el ancho del borde dado en pixels. El elemento tr (table row) es el contenedor de las filas. El elemento th (table heading) y el td (table data) representan la cabecera y los datos de la tabla respectivamente.

Espaciado dentro de la delda (Cell Padding) y entre celdas (Cell Spacing)

Se puede incrementar es espaciado para todas las celdas usando el atributo cellpadding sobre un elemento table. Por ejemplo, para tener un espaciado de 10 pixels (tbl izquierda), y además un interespaciado de 10 pixels (tbl derecha)

AñoVentas
200018 Mill
200125 Mill
200236 Mill
                
AñoVentas
200018 Mill
200125 Mill
200236 Mill


Ancho de la Tabla

Se especifica el ancho dando el numero de pixels o bien indicando un tanto por ciento (80% en el ejemplo) en el atributo width indicnado el espacio disponible entre los margenes izquierdo y derecho:



AñoVentas
200018 Mill
200125 Mill
200236 Mill


Alineacion del Texto dentro de las celdas

Este atributo vale para las etiquetas (tr), (th) y (td), que por defecto estan alineadas a la izquierda. El atributo align puede tomar los valores "left", "center" o "right":

AñoVentas
200018 Mill
200125 Mill
200236 Mill


Casos raros

Esto es lo que pasa cuando una celda queda vacia:

<td></td>
AñoVentas
200018 Mill
200125 Mill
2002

Para solucionarlo se añade un espacio de no ruptura (non-breaking space):

<td>&nbsp;</td>

Combinar celdas

Atributo rowspan y colspan indicando las subdivisiones

AñoVentas
NorteSurTotal
200010 Mill8 Mill18 Mill
200114 Mill11 Mill25 Mill


Tablas sin Borde

border="0" y cellspacing="0":

AñoVentas
200018 Mill
200125 Mill
200236 Mill


Coloreando la tabla

Atributo bgcolor
Año Ventas
2000 18 Mill
2001 25 Mill
2002 36 Mill

Titulos a la tabla

Es posible añadir en la parte superior o inferior de la tabla un titulo con la etiqueta caption que debe ir antes de la primera columna.

Ventas esperadas en el futuro
AñoVentas
200018 Mill
200125 Mill
Intentarlo con align="bottom" o "top"

El atributo de los elementos de la tabla, que describe la estructura de la tabla para aquellos que no ven esta es summary. Por ejemplo: "La primera columna es el año y la segunda la media de ventas para ese año". No es visible.



AñoVentas
200018 Mill
200125 Mill


Relación entre la cabecera y las celdas

Atributo scope con valor:
  • row: Proporciona informacion de cabecera sobre las filas que contiene la tabla.
  • col: Proporciona informacion de cabecera sobre las columnas que contiene la tabla.

    Ventas esperadas en el futuro
    Año Ventas
    200018 Mill
    200125 Mill


    Otra informacion que podemos añadir a la tabla se hace con el atributo de la cabecera abbr especificando una abreviacion:



    <th abbr="W3C">World Wide Web Consortium</th>