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ño | Ventas |
2000 | 18 Mill |
2001 | 25 Mill |
2002 | 36 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ño | Ventas |
2000 | 18 Mill |
2001 | 25 Mill |
2002 | 36 Mill |
|
|
Año | Ventas |
2000 | 18 Mill |
2001 | 25 Mill |
2002 | 36 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ño | Ventas |
2000 | 18 Mill |
2001 | 25 Mill |
2002 | 36 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ño | Ventas |
2000 | 18 Mill |
2001 | 25 Mill |
2002 | 36 Mill |
Casos raros
Esto es lo que pasa cuando una celda queda vacia:
<td></td>
Año | Ventas |
2000 | 18 Mill |
2001 | 25 Mill |
2002 | |
Para solucionarlo se añade un espacio de no ruptura (non-breaking space):
<td> </td>
Combinar celdas
Atributo rowspan y colspan indicando las subdivisiones
Año | Ventas |
Norte | Sur | Total |
2000 | 10 Mill | 8 Mill | 18 Mill |
2001 | 14 Mill | 11 Mill | 25 Mill |
Tablas sin Borde
border="0" y cellspacing="0":
Año | Ventas |
2000 | 18 Mill |
2001 | 25 Mill |
2002 | 36 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ño | Ventas |
2000 | 18 Mill |
2001 | 25 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ño | Ventas |
2000 | 18 Mill |
2001 | 25 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 |
2000 | 18 Mill |
2001 | 25 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>