JMiur [E]

En esta segunda parte está dedicada a mostrar las etiquetas y las propiedades CSS exclusivas utilizadas para crear tablas. Si bien la mayoría son conocidas, hay algunas que, lamentablemente, no son usadas frecuentemente y son fundamentales para mejorar la velocidad de la carga de las páginas y simplificar el código.

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 1FILA 1 COLUMNA 2
FILA 2 COLUMNA 1FILA 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 1FILA 1 COLUMNA 2
FILA 2 COLUMNA 1FILA 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 1FILA 1 COLUMNA 2FILA 1 COLUMNA 3
FILA 2 COLUMNA 1FILA 2 COLUMNA 2FILA 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.

7 comentarios:

Anónimo  

Che te felicito, esta excelente tu blog!! es la primera vez que lo leo detenidamente, saludos

Responder
JMiur  

Te agradezco mucho. PuntoGeek es parte de mis lecturas diarias.

Responder
Anónimo  

No sabia que eras de Argentina, que bueno!

Responder
JMiur  

Tendría que poner más CHE y VOS, pero mi lenguaje se está "neutralizando", a veces parezco un personaje de telenovela.

Responder
WIÑAYPAQ  

Hola de nuevo, tengo una consulta: Cómo hago para que la información dentro de la tabla este alineado siempre en TOP, porque en una tabla de dos columnas que incluyen imagen y texto en cada una de ellas, si el texto es abundante la imágen baja siempre manteniendose verticalmente en el medio. O si la imágen es muy alto y el texto es poco, el texto se posiciona verticalmente en el medio T_T

Responder
JMiur  

align y valign son las que controlan eso. Lo mismo puede hacerse con CSS usando text-align y vertical.align.

Los valores elementales son top, middle (el valor por defecto), bottom y baseline

Responder
arturo.cuellar  

Si tan sólo hubiera conocido tu página antes, tuve que aprender algo de HTML y CSS por necesidad, y como dicen por ahí... lo aprendí a chingadazos.. jajaja muévele aquí, muévele allá... unas 2 o 3 horas para lograr un bonito efecto.

Sinceramente, todo hubiera sido más fácil con explicaciones como las tuyas, lo bueno de esto es que no hace daño conocer cosas nuevas y perfeccionar las ya conocidas.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR