Dw1tci - 07 - Tablas

TECNOLOGIA DE LAS COMUNICACIONES I Tablas

Prof. Germn Rodrguez [email protected] 1

FUNDAMENTOS DE LAS TABLAS

Cuando el HTML era muy joven y CSS no tena muy claro como solucionar las necesidades del

maquetado Web, los desarrolladores web usaban las tablas para delimitar las reas del

documento.

De esta manera, en distintas filas de una gigantesca tabla, se encontraban la cabecera del sitio

web (con el logo y generalmente un lindo banner en flash), el pie de pgina y el contenido.

Eventualmente, segn la complejidad de la maqueta, era posible encontrar adentro de una

celda de la tabla otra tabla anidada, generando complejos y kilomtricos ocanos de cdigo

HTML.

Adems de afectar la velocidad de carga del sitio web, se hace ms compleja cualquier

modificacin estructural del sitio web.

Luego CSS se hizo ms poderoso, HTML creci y se volvi HTML5 y los detractores de las tablas

salieron a prenderles fuego como inquisidores de la semntica.

Se hizo comn el dicho popular, NO a las tablas

Bueno, como profesional de la web: ni muy muy, ni tan tan.

Las tablas se deben utilizar para mostrar grillas, cualquier informacin de tipo

tabular, valga la redundancia.

Adems, existe una plataforma que an no ha crecido lo suficiente para darle soporte FULL a

CSS: El mercado de la publicidad por mail (tambin llamados Newsletters o Email Marketing).

S, todava dependemos de las tablas para armar un diseo que se mande por correo.

Y s, vas a necesitar tablas si quers hacer una grilla, un calendario, una tabla (valga la

redundancia de nuevo!).

PARTES BSICAS

Las tablas son otros de los elementos COMPUESTOS del HTML.

Se necesitan como mnimo tres etiquetas distintas para generar una grilla, por pequea que

sea. Una tabla est formada, en primera instancia, por tres etiquetas distintas:

La tabla en s (como estructura contenedora de filas y columnas).

Cada fila distinta que contendr la tabla.

Cada celda adentro de las filas que hemos creado.

La etiqueta encierra todas las filas y columnas de la tabla.

Las etiquetas definen cada fila de la tabla y encierran todas las columnas.

Por ltimo, la etiqueta define cada una de las columnas de las filas, aunque

realmente HTML no define columnas sino divisiones de tabla (Table Division).

Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuacin

en las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas

aparecen antes que las etiquetas .



Todas las filas () deben tener adentro la misma cantidad de columnas (), de otro

modo la tabla se "rompe". sto porque la tabla es un elemento "cuadrado", se asume que cada

fila tendr la misma cantidad de columnas.

1

2

4

5

6

ATRIBUTOS DE LA TABLA

La etiqueta table, ofrece 3 atributos que tambin se pueden aplicar desde CSS (por lo cual

pueden tomarse como atributos propios del diseo) con el objetivo de simplificar el formato

base de la muestra de la tabla.

Estos atributos son:

border: Es un valor numrico que representa el ancho del borde a mostrar entre filas y

columnas (sin la unidad px).

cellpadding: Espacio entre el borde de cada celda y su contenido. Lo que en CSS sera

la propiedad PADDING. Es un nico valor que se aplicar a los 4 lados de cada celda.

cellspacing: Espacio entre cada celda y el elemento contiguo. Lo que en CSS sera la

propiedad MARGIN. Es un nico valor que se aplicar a las 4 lados de cada celda.

Es muy comn aprovechar las propiedades BORDER y CELLSPACING para agilizar el trabajo de

CSS. Y no obstante la tabla segur siendo vlida para la w3c.

DISTRIBUCIN DEL ESPACIO

Una tabla que tiene especificado un ancho fijo pero ninguno de sus TD posee informacin del

ancho a ocupar, calcular (en primera instancia) el ancho de cada celda segn la densidad de

informacin.

Esto significa que la columna que tenga la celda con ms informacin, ser ms ancha que las

otras columnas.

Para entenderlo mejor, hagamos una tabla que tiene 3 filas y 2 columnas.

La etiqueta table tendr un ancho de 500px pero ninguna celda tiene ancho.

Pongamos en cada celda la misma cantidad de caracteres.



celda 1

celda 2

celda 3

celda 4

celda 5

celda 6

Esta es la salida HTML que veremos en el navegador.

Ahora hagamos que la primera celda de todas tenga un par de caracteres ms.

celda 1 con ms caracteres

celda 2

celda 3

celda 4

celda 5

celda 6

Ahora veremos en el navegador la siguiente salida:

La solucin es simple, podemos agarrar la primera celda (o en realidad cualquier celda) de una

columna, y darle un ancho explcito (con CSS, lgicamente).



Si llega a suceder que dos celdas de la misma columna tengan especificado un ancho y sean

distintas las medidas (uno ms grande que el otro), se tomar el tamao ms ancho de todas

como valor de TODA la columna.

esta mide 1/4 de la tabla

esta, entonces debera ser ms ancha que la de al lado

esta mide el 50% de la tabla

si se aplica el ancho de 250px esta debera medir lo mismo que la de al

lado

Como se puede ver, la tabla tom para la primera columna (que tiene 125px de ancho en la

primera fila y 250px de ancho en la segunda fila) el tamao ms grande definido.

El resto de las columnas que no tengan un ancho especificado, se calcularn automticamente

en base al espacio que qued sin asignar y dividindolo de nuevo por densidad de contenido

(de las columnas sin asignar ancho, la que tenga ms texto, ser ms grande que las dems).

El ltimo escenario posible es que la sumatoria de los anchos, difiera al ancho de la tabla.

Si la sumatoria es distinta al ancho de la tabla, se ignoran las medidas y la tabla DEBE medir el

WIDTH declarado como ancho de la tabla.

ENCABEZADOS DE FILAS O COLUMNAS

En ocasiones, algunas de las celdas de la tabla se utilizan como encabezados de las dems

celdas de la fila o de la columna.

Para esto existe la etiqueta (del ingls "table header cell") para indicar que una celda es

cabecera de otras celdas.

Tcnicamente se puede reemplazar cualquier TD por una etiqueta TH.

Esta celda-encabezado se ver en negrita y con el texto centrado para destacarla pero, por

sobre todas las cosas, ser semnticamente ms importante que las dems celdas (porque es

la versin TABLE de los encabezados).



DW

DG

DM

Martes

Lunes

Martes

Jueves

Miercoles

Miercoles

Viernes

Jueves

Viernes

No existe un lmite de celdas-encabezado para usar, se puede hacer un cuadro de doble

entrada o dos filas distintas que sean encabezados.

TITULO DE LA TABLA

Es comn que al publicar una tabla en un documento HTML, se quiera dejar una referencia de

la tabla en s.

Esta referencia podra ser de dnde sali la fuente de datos o qu representan los datos en s.

Para esto, existen dos caminos: Uno es poner antes o despus de la tabla un prrafo con el

texto que se quiere usar como referencia.

Este texto, para el usuario que visita la pgina (si se formatea apropiadamente con CSS para

dar una sensacin de unidad) podra representar la informacin visible, pero semnticamente

no deja de ser un prrafo, con el mismo nivel de importancia que cualquier otro texto en el

resto del documento.

Para solucionar este tema, HTML ofrece una etiqueta que SEMNTICAMENTE representa el

ttulo de una TABLA, lo cual significa que cualquier persona que busque determinada

informacin y eso coincida con este ttulo los indexadores de los motores de bsqueda lo

tomarn como relevante.

Este ttulo es la etiqueta .

Tiene una nica restriccin para validar efectivamente.

Es una etiqueta que va ADENTRO de la etiqueta TABLE, pero va ANTES y POR FUERA de

cualquier TR.



Esto quiere decir que:

1. El caption no va adentro de una fila ni de una columna.

2. El caption no puede ir al final de la tabla ni despus de ningn otro elemento hijo de una

tabla.

De esta manera ahora podemos tener esta estructura:

Dias de cursadas

DW

DG

DM

Martes

Lunes

Martes

Jueves

Miercoles

Miercoles

Viernes

Jueves

Viernes

Si miramos lo que genera este cdigo fuente, podemos ver que antes de la tabla aparece el

texto que hemos puesto como contenido del CAPTION.

El caption es un elemento de bloque, puede contener cualquier otro elemento del HTML (strong,

em, prrafos ya es un prrafo, no tiene sentido meterle otro adentro-, encabezados, etc.).

CSS ESPECFICO PARA TABLAS

Las tablas tienen 3 propiedades CSS que son propias.



1. border-collapse: Cuando se unen dos bordes (por el choque de filas o columnas), se

genera un doble borde (el borde de la primera con el borde de la segunda).

Esta propiedad se encarga de mostrar un solo borde en lugar de dos. Para eso se usa el

valor collapse. Si se quiere mostrar los dos bordes, se usa el valor separate.

2. caption-side: Ubicacin del ttulo con respecto a la tabla. Puede ser top, bottom, left o

right.

3. empty-cells: Si una celda (por algn motivo desconocido) no tiene contenido, podemos

optar por mostrar o no mostrar sus bordes y color de fondo. De eso se encarga esta

propiedad. Los valores posibles son: show (mostrar la celda vaca) o hide (ocultar las

celdas vacas).

table{

border-collapse: collapse; /* puede ser collapse (fusionar) o separate (mostrar los

dos bordes) */

caption-side: top; /* puede ser top (arriba de la tabla), bottom (abajo de la tabla), left

(izquierda de la tabla) o right (derecha de la tabla) */

empty-cells: show; /* puede ser show (mostrar) o hide (ocultar) */

}

UNIN DE FILAS Y COLUMNAS

Eventualmente, podemos necesitar unir un conjunto de celdas (ya sea horizontal o

verticalmente) para que se visualicen como una nica celda.

Partamos de la siguiente necesidad, queremos hacer la siguiente tabla HTML.

Si analizamos cuidadosamente, hay varias celdas unidas.

Para empezar, en la columna de los turnos, tenemos turno noche con comisiones A y B. Pero

turno maana y turno tarde, no las tienen, por lo cual deben ocupar el ancho de dos celdas.



Luego, vienen todo el grupo de cursos que asisten los mismos das a la escuela, por lo cual

comparten la informacin a mostrar, estas celdas deben unirse verticalmente:

Web de primero: Tarde, noche A y noche B.

Web de tercero: Tarde y noche A.

Web de cuarto: Noche A y noche B.

Y quedan dos grupos de celdas que se unen horizontalmente con tres rayitas dentro porque no

se abrieron esas comisiones:

Web de segundo y tercero por la maana.

Web de segundo y tercero por la noche, ambas comisiones B.

Para lograr este objetivo, tenemos que usar dos atributos distintos de las celdas (tanto TD

como TH) que son los atributos ROWSPAN (unir filas) y COLSPAN (unir celdas).

Los dos atributos reciben un valor numrico (slo el nmero sin unidad) que representa la

cantidad de espacios que debe abarcar ESA MISMA CELDA que lleva el atributo.

Este valor lgicamente debe ser mayor a uno.

Qu significa esto? Que cuando hacemos un COLSPAN (unin horizontal de celdas), dicha celda

se va a expandir tantos espacios como indique el atributo "EMPUJANDO" el resto de las celdas

hacia la derecha.

En el caso del ROWSPAN (unin vertical de celdas), no se empujan las celdas hacia abajo. La

celda que tiene el atributo "se mete" por delante de la misma celda que est abajo, empujando

de nuevo horizontalmente la fila de abajo. Veamos el ejemplo prctico.

Empecemos haciendo una tabla que tenga por cada celda toda la informacin que le

corresponde.



El cdigo de esta tabla sera el siguiente (dejo los comentarios por cada celda para poder

identificar ms rpido cada una).

Dias de cursadas

TURNO

COM

DW1

DW2

DW3

DW4

TM

A

Lunes, Martes, Jueves

---

---

Lunes, Martes, Viernes

TT

A

Martes, Jueves, Viernes

---


---

TN

A




Martes, Mircoles, Viernes

TN

B


---

---


Empecemos por lo ms simple, en la segunda fila (todos los del turno maana) tenemos que

segundo y tercer cuatrimestre comparten los guiones (indicando que no existe ese grupo).

Hagamos que DW2 TM se "fusione" con DW3 TM.



Para eso necesitamos unir horizontalmente la celda de DW2, lo hacemos con el atributo colspan

y le ponemos cuntas celdas DEBE ocupar en total (en este caso, 2).

Esa fila ahora tendr este cdigo:

TM

A


---

---


Y la tabla se ver as:

Qu sucedi? Tal como se dijo antes, el concepto de unir celdas es en realidad EXPANDIR

celdas la celda de DW2 TM ahora ocupa su lugar y la de tercero.

Por suerte, se soluciona fcil. La celda a continuacin debe borrarse (o comentarse, por si nos

equivocamos y debemos volver atrs), y la tabla volver a re-ordenarse.

TM

A


---




Ahora veamos qu sucede con la unin de filas verticales.

Vamos a tomar de la tercera fila (TT) el grupo de DW1, y le vamos a indicar, con el atributo

rowspan, que ocupe el lugar de tres celdas hacia abajo.

TT

A


---


---

Ahora veamos qu pas con las dos celdas que estaban justo debajo de esta que se expandi.

Como podemos ver, en las dos filas que estn por debajo se INTERPUSO la celda que hemos

expandido POR DELANTE de las dos celdas que tenan la informacin de DW1TNA y DW1TNB.

Al ubicarse por delante de las mismas, las dos filas se corrieron un casillero a la derecha.

Cmo se soluciona? Debemos ir a la misma celda en la fila de abajo y borrarla (o comentarla)

y repetir lo mismo con la segunda fila por debajo (as tantas como hemos expandido la celda).



TT

A


---


---

TN

A




TN

B

---

---


De esta manera se nos restablece la tabla:



Ahora haremos la misma unin de celdas vertical en otros dos casos:

En DW3 TT: Para que no se rompa la tabla, debemos eliminar DW3 TN.

En DW4 TNA: Para que se conserve la estructura, debemos eliminar DW4 TNB.

(He reseteado todos los comentarios anteriores para que sea ms fcil identificar las celdas que

hemos modificado)

Dias de cursadas

TURNO

COM

DW1

DW2

DW3

DW4

TM

A


---


TT

A


---


---

TN

A



TN

B

---

---



Por ltimo, las uniones horizontales que nos han quedado:

DW2 TNB se debe unir con DW3 TNB.

El encabezado de TURNO se expande dos lugares y el de COM se borra.

El encabezado de TM se expande dos lugares y el de A se borra.

El encabezado de TT se expande dos lugares y el de A se borra (no tiene sentido tener

ese dato si no existe en este turno una comisin B).

Dias de cursadas

TURNO

DW1

DW2

DW3

DW4

TM


---


TT




---


---

TN

A



TN

B

---

Y nos queda la tabla tal como esperbamos:



REAS DE LAS TABLAS

Como sucede en el HTML, una tabla tambin est formada por distintas reas (o secciones).

Adentro de una etiqueta se puede determinar un sector que sea el

encabezado, el cuerpo y el pie de la tabla que se est por mostrar.

La idea de estas delimitaciones radica exclusivamente en un enriquecimiento semntico tanto

para los motores de bsqueda como para las cascadas CSS.

Para sto, el estndar XHTML nos ofrece los elementos:

: Encabezado de la tabla

: Cuerpo de la tabla

: Pie de la tabla

Cada una de estas etiquetas estar a continuacin del CAPTION (de haber usado uno) y

encerrarn las filas que corresponden con cada rea delimitada.

Semnticamente el thead sera el rea donde se encuentran todos los encabezados de la tabla

(es decir, todas las filas que hayamos creado con hijos de tipo TH).

El tfoot seran solo las notas al pie de la tabla, que si bien se considera parte del contenido que

el usuario va a encontrar, puede considerarse un contenido secundario.

Y el tbody equivale al contenido real que el usuario espera visualizar al acceder a la grilla, de

forma tal que todo ese contenido se sustenta por s mismo an ante la carencia de un thead y

tfoot.

Podramos tener esta tabla, entonces.

Dnde:

Las dos primeras filas (en negrita) son los encabezados TH, que podran estar en un

THEAD.

El contenido a mostrar con los valores de cada grupo son el TBODY (por representar la

informacin que efectivamente est buscando el usuario al acceder a esta tabla).

Y los datos de la escuela, por ser una informacin secundaria, estaran en el segmento

destinado como TFOOT.



Cuyo cdigo fuente es el siguiente:

Alumnos por carrera

Cuatrimestre

D. Web

D. Multimedial

D. Grafico

TMTTTN

TMTTTN

TMTTTN

1ero

372533

11080103

754088

2do

----27

602045

543170

Datos de escuela

davinci - Ao 2013

RESTRICCIONES

Si bien suena absurdo, las normativas de la W3C indican que el orden de delimitacin de estos

elementos dentro de una tabla debe ser:

1. Primero el THEAD.

2. A continuacin el TFOOT.

3. Por ltimo el TBODY.



De esta manera, el cdigo del ejemplo anterior nos devolver el siguiente error de validacin:

El validador de la W3C espera todo el bloque TFOOT antes del bloque TBODY.

Afortunadamente, los navegadores a la hora de renderizar el cdigo fuente, muestran las reas

de la manera correcta, poniendo todo el contenido del TBODY entre el THEAD y el TFOOT.

No es necesario que se hayan creado los tres bloques para que el validador nos devuelva una

respuesta satisfactoria.

Se puede crear una tabla que slo tenga TBODY o que carezca de TFOOT.

Por otra parte, no se pueden unir con ROWSPAN celdas de bloques distintos.

El rowpan se puede hacer en el THEAD, se puede hacer el el TFOOT y se puede hacer en el

TBODY; pero no se puede unir una celda del THEAD con el TFOOT.

COLGROUP & COL

Cuando una tabla es demasiado alta y queremos aplicarle el mismo formato visual a las celdas

de toda una columna, HTML nos ofrece dos elementos anlogos para poder aplicar CSS en

sentido vertical sin la necesidad de tener que aplicarle un class a cada una de las celdas que

queremos decorar.

1.

Si se usa, debe ser el primer elemento despus del CAPTION y antes del THEAD o la

primera fila.

Se pueden usar tantos colgroup como sean necesarios para generar el efecto deseado.

A los colgroup se les puede dar el atributo span para que en lugar de una columna,

aplique el formato esperado a ms de una columna a la vez.

Imaginemos la siguiente tabla de 4 filas por 5 columnas.



Queremos que la primera columna sean de color gris claro y las dos siguientes (segunda

y tercera columna) sea de color rosa, de esta manera.

Necesitaramos usar un colgroup para el color gris y otro colgroup que se expanda en

dos lugares para el rosa.

C1C2C3C4C5

C1C2C3C4C5

C1C2C3C4C5

C1C2C3C4C5

2.

La etiqueta COL, asume una sola columna. Debe estar adentro de un colgroup.

Quizs sea una etiqueta un tanto redundante teniendo en cuenta que:

1. Se puede tener un colgroup que afecte una sola columna.

2. La etiqueta col, tambin acepta un span para abarcar ms lugares.

No obstante su existencia es principalmente semntica: Se supone que un colgroup es

un conjunto de columnas, no se va a usar para afectar una sola.

Y el mayor fuerte radica en la combinacin de las dos etiquetas en cascada.

Al ser COL una etiqueta HIJA, se le puede aplicar al colgroup las propiedades en comn

y a cada COL lo que sea diferente.

Siguiendo el ejemplo anterior, a cada columna de color rosa le podemos aplicar un

ancho diferente anidando dentro del COLGROUP dos etiquetas COL.



C1C2C3C4C5

C1C2C3C4C5

C1C2C3C4C5

C1C2C3C4C5

LIMITACIONES

Hay que tener presente la REDUCIDA lista de atributos CSS que se pueden aplicar a los COL y

COLGROUP: background-color, border, width, visibility; pero en definitiva son una ayuda a la

hora de aplicar a toda una columna esas propiedades en comn.

Por ltimo, estos atajos no tienen una respuesta satisfactoria cuando se unieron celdas

horizontalmente con colspan, dado que una celda que simula 3 espacios, no deja de ser una

sola y quedar toda decorada de la misma manera que el resto de la tabla.

Volvamos a la primera tabla, donde tenamos la cantidad de alumnos por carrera.

Le aplicamos un colgroup con un span de 2 columnas con color de fondo rosa.

Como muestra la imagen a continuacin, se formatea la primera y segunda columna pero qu

pasa con el encabezado de D. WEB y el pie de la tabla?



Efectivamente, D. WEB es la segunda columna y el pie de tabla es la primera (y nica)

columna. Al haberle indicado desde HTML que queramos que se expandan con colspan, esas

columnas son ms anchas (llevndose de regalo el color de fondo).

Afortunadamente el colgroup tiene menos precedencia en las declaraciones CSS que las celdas,

por lo cual si queremos que se aplique el formato a las columnas del tbody pero no a las del

thead/tfoot podemos declarar definir una cascada (ya sea inline, en el head o en un archivo

aparte) para quitarle el color de fondo a los td adentro del tfoot y los th adentro del thead.

Este sera el CSS adicional:

thead th{ background-color: white; }

tfoot td{ background-color: white; }

/* en este ejemplo nos importa MUCHO la cascada porque no es cualquier TD que queremos

modificar, los del TBODY estan correctos... solo se afecta al TFOOT y THEAD */

Y eso solucionara la tabla dejndola de esta manera.

Dw1tci - 07 - Tablas

Documents

Transcript of Dw1tci - 07 - Tablas