Estas son las etiquetas HTML más utilizadas para crear tablas:
TABLE permite crear la tabla
align = left|center|right posición respecto al documento
background = url imagen de fondo
bgcolor = color el color de fondo
border = pixeles ancho del borde (cero = sin borde)
cellspacing = valor espacio entre el borde y el contenido de las celdas
cellpadding = valor espacio entre las celdas
frame = void|above|below|hsides|lhs|rhs|vsides|box|border
indica qué bordes alrededor de la tabla se mostrarán
above: sólo arriba
below: sólo abajo
border, box: los cuatro lados
hsides: arriba y abajo
lhs: sólo el izquierdo
rhs: sólo el derecho
void: ninguno (este es el valor por defecto)
vsides: el derecho y el izquiedo
rules = none|groups|rows|cols|all muestra los bordes internos
all: entre filas y columnas
cols: sólo entre columnas
groups: entre grupos (THEAD, TFOOT, TBODY, etc)
none: ninguno (este es el valor por defecto)
rows: sólo entre filas
summary = texto sumario para usar con navegadores no-visuales
width = longitud un valor o un porcentaje que indica el ancho
TR crea una fila
TH crea una celda encabezado para una fila o columna
TD crea una celda
en los tres casos, los posibles atributos son:
align, valign controlan la alineación horizontal y vertical
bgcolor indica el color de fondo
width, height especifican el ancho y el alto
además, las celdas TH y TD tienen estos atributos:
colspan = cantidad combina una cantidad de columnas
rowspan = cantidad combina una cantidad de filas
COL define datos de una columna
align, valign controlan la alineación horizontal y vertical
span indica la cantidad de columnas
width especifica el ancho
Además de aquellas hay una serie de tags "opcionales"
CAPTION crea una fila específica para el título
TBODY identifica el cuerpo de la tabla (el contenido)
THEAD identifica el encabezado
TFOOT identifica el pie de página
y en los todos los casos, los posibles atributos son: align y valign
Hay muy pocas propiedades
CSS específicas para las tablas:
border-spacing: tamaño
Indica la distancia que separa los bordes de las celdas adyacentes. Si sólo se especifica una medida, ésta da el espacio horizontal y vertical. Si se especifican dos, la primera da el espacio horizontal y la segunda el espacio vertical.
border-collapse: collapse | separate
Determina como serán tratados los bordes de dos celdas consecutivas;
separate los muestra separados (muestra ambos), en cambio,
collapse los "
junta" en uno solo.
empty-cells:show | hide
Controla el los bordes alrededor de las celdas que no tienen ningún contenido visible. El contenido visible incluye "
" y otros espacios en blanco excepto tab ("\09") y space ("\20"). Con
show los bordes son dibujados alrededor de las celdas vacías (como las celdas normales) y con
hide no se dibujará ningún borde alrededor de las celdas vacías. Veamos un ejemplo:
| FILA 1 COLUMNA 1 | FILA 1 COLUMNA 2 |
| FILA 2 COLUMNA 1 | FILA 2 COLUMNA 2 |
<table cellpadding=5 cellspacing=0 style="border-collapse: separate;">
<tr>
<td style="border=2px solid yellow;">... contenido ...</td>
</tr>
</table>
| FILA 1 COLUMNA 1 | FILA 1 COLUMNA 2 |
| FILA 2 COLUMNA 1 | FILA 2 COLUMNA 2 |
<table cellpadding=5 cellspacing=0 style="border-collapse: collapse;">
<tr>
<td style="border=2px solid yellow;">... contenido ...</td>
</tr>
</table>
| Una tabla completa se vería así: | Pero esto es suficiente: |
<table>
<caption>
TITULO DE LA TABLA
</caption>
<thead>
<th>
ENCABEZADO COLUMNA
</th>
</thead>
<tbody>
<tr>
<td>
LOS DATOS
</td>
</tr>
</tbody>
<tfoot>
<th>
PIE COLUMNA
</th>
</tfoot>
</table>
| <table>
<tbody>
<tr>
<td>
LOS DATOS
</td>
</tr>
</tbody>
</table> |
Hay una propiedad más, muy poco utilizada y con la cual podemos definir la forma en que un navegador debe mostrar la tabla.
table-layout: auto | fixed
Así como, especificar el tamaño de las imágenes permite que el navegador cargue la página más rápidamente, el uso de los atributos width y height o las propiedades de estilo correspondientes para definir anchos y altos de cada elemento de una tabla mejorará la velocidad sustancialmente, sobre todo si contienen muchos datos.
La propiedad table-layout controla el algoritmo que usa el navegador para mostrar las tablas. Si el valor es auto, se usa cualquiera (es el valor por defecto), si se especifica fixed, la tabla será "fija".
Utilizando fixed, el ancho no dependerá del contenido de las celdas sino sólo de los anchos indicados por width. Las reglas serán claras, cualquier elemento de una columna con una propiedad width definirá el ancho de toda la columna, el ancho de la tabla será igual a la suma de los anchos de las columnas.
Al definirse fixed y especificarse width, el navegador puede comenzar a "dibujar" la tabla apenas ha cargado la primera fila, con lo que toda la página se carga más rápido.
| FILA 1 COLUMNA 1 | FILA 1 COLUMNA 2 | FILA 1 COLUMNA 3 |
| FILA 2 COLUMNA 1 | FILA 2 COLUMNA 2 | FILA 2 COLUMNA 3 |
<table style="table-layout:fixed">
<col width=100 style=".....">
<col width=300 style=".....">
<col width=200 style=".....">
<tr>
td>...</td><td>...</td><td>...</td>
</tr>
<tr>
td>...</td><td>...</td><td>...</td>
</tr>
</table>
Como se ve en el ejemplo, también es interesante el uso de la etiqueta COL, dentro de ella es posible definir estilos que afectarán a la columna completa.
En 2006 los argentinos descargaron más de 600 millones de canciones a través de programas que permiten el intercambio de archivos no autorizados mediante la red.
Desde el 
