XHTML 1 Tablas

11/7/2014 XHTML 1.
0: Tablas
http://www.wextensible.com/temas/xhtml-css/tabla.html#table-rules 1/72
27
JUN
2010
XHTML-1.0: Tablas
Inicio Temas Glosario XHTML 1.0 y CSS 2.1
HTML Descripciones HTML Cabecera HTML Formato HTML Imagen
HTML Vnculo HTML Lista HTML Tabla HTML Objeto HTML Formulario HTML Script CSS Descripciones
CSS Dimensiones CSS Formatos CSS Posiciones CSS Paginados ndices y buscador
1. Tabla <table>
2. Ttulo <caption>
3. Columna <col>
4. Grupo columnas <colgroup>
5. Secciones <thead><tbody><tfoot>
6. Fila <tr>
7. Celdas <th><td>
1. TABLA <table>
HTML401 DTD-XHTML10T DTD-XHTML10S
Ancho (width) Bordes (border) Espacio entre celdas (cellspacing) Relleno celda (cellpadding) Bordes externos (frame)
Bordes internos (rules) Resumen (summary) Alinear (align) Color de fondo (bgcolor)
Las tablas en las presentaciones web tienen y sobre todo han tenido una gran importancia debido a que se
han venido usando para presentaciones de pginas (barras y mens laterales, cabeceras de pginas, etc.),
wextensible
11/7/2014 XHTML 1.0: Tablas
lo que suele denominarse "layout". Sin embargo con la llegada de CSS esto ha ido cambiando, pues estas
presentaciones con estilos consiguen los mismos efectos y son ms fciles de mantener. An as el uso de
las tablas es importante.
Se trata de un elemento del tipo %block que contendr elementos especficos de una tabla tal como
exponen los DTD de XHTML 1.0 tanto en su versin transicional como estricta:
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
<!ELEMENT caption %Inline;>
<!ELEMENT thead (tr)+>
<!ELEMENT tfoot (tr)+>
<!ELEMENT tbody (tr)+>
<!ELEMENT colgroup (col)*>
<!ELEMENT col EMPTY>
<!ELEMENT tr (th|td)+>
<!ELEMENT th %Flow;>
<!ELEMENT td %Flow;>

Nota aclaratoria:Recordar las siguientes ocurrencias (veces en que debe aparecer un elemento):
Smbolos Significado
( ... ) Delimita un grupo
A A debe aparecer una sola vez
A+ A debe aparece una o ms veces
A? A debe aparecer cero o una veces
A* A puede aparecer cero o ms veces
+(A) A puede aparecer
-(A) A no debe aparecer
A | B O bien A o bien B deben aparecer, pero no las dos
A , B Tanto A como B deben aparecer, y en ese orden
A & B Tanto A como B deben aparecer, en cualquier orden
Segn la especificacin vemos que una tabla se compone de lo siguiente y en este orden:
Uno o ningn ttulo caption.
Ninguna o varias columnas col o, alternativamente, grupos de columnas colgroup.
Una o ms secciones:
Uno o ningn encabezado de tabla thead.
Uno o ningn pie de tabla tfoot.
Uno o ms cuerpos de tabla tbody o, alternativamente, una o ms filas tr.
El encabezado, pie y cuerpo de tabla se forman con una o ms filas. Los grupos de columnas se forman con
una o ms columnas. Una fila se forma con una o mas celdas cabecera th o una o ms celdas de datos td.
Vese que toda tabla tiene obligatoriamente un cuerpo de tabla o una fila al menos, en cuyo caso el cuerpo
de tabla se considera implcito. Por otro lado son opcionales una o ms columnas o grupo de columnas, el
ttulo, encabezado y pie de tabla.
Tipos especficos para tablas que se usan en varios elementos
%cellhalign se usa para alineacin horizontal de celdas, agrupando los atributos siguientes:
align. Se trata de un valor del tipo enumerado que puede tomar los valores left, center, right,
justify, char. El valor char se usa con el/los atributo/s char, charoff para alinear segn un
carcter. Los otros valores son obvios, alinear izquierda, centro, derecha y justificado.
char es del del tipo %Character, a su vez basado en un tipo CDATA para representar un carcter.
charoff es del tipo %Length que representa una longitud en pxeles o porcentajes.
Estos tres atributos align, char, charoff se usan en los siguientes elementos: <colgroup> <col>
<thead> <tfoot> <tbody> <tr> <th> <td>
%cellvalign. Se trata de un valor del tipo enumerado que puede tomar los valores top, middle, bottom,
baseline para la alineacin vertical del contenido de las celdas. Se usar en los siguientes elementos-
atributos: <colgroup valign> <col valign> <thead valign> <tfoot valign> <tbody valign> <tr
valign> <th valign> <td valign>
Estilo CSS y tablas XHTML
Con estilo pueden definirse la estructura de una tabla y sus elementos, tal como se muestra en la
especificacin CSS21 donde los elementos tabla y sus incluidos podran tener el siguiente estilo:
table {display: table; } /*los "inline-table" tambin son elemento tabla pero en lnea, no en bloque*/
caption {display: table-caption; text-align: center; }
col {display: table-column; }
colgroup {display: table-column-group; }
thead {display: table-header-group; }
tfoot {display: table-footer-group; }
tbody {display: table-row-group; }
tr {display: table-row; }
th {display: table-cell; font-weight: bolder; text-align: center; }
td {display: table-cell; }

La facilidad de CSS para configurar elementos de tabla existe debido a que podemos crearlos en documentos
XML sin necesidad de que sean los especficos de XHTML. Aunque no vamos a adentrarnos en esto, la lista
anterior si nos sirve para buscar las propiedades de estilo que se aplican a las tablas y sus elementos
includos, pues no hemos encontrado una especificacin que aclare este extremo. De esta forma los tipos de
elementos declarados con la propiedad de estilo {display} en CSS se corresponden con los siguientes de
XHTML:
Elemento XHTML de tabla {display}
table table, inline-table
caption table-caption
col table-column
colgroup table-column-group
thead table-header-group
tfoot table-footer-group
tbody table-row-group
tr table-row
th, td table-cell
Nota aclaratoria:En la exposicin de la propiedad de estilo {display} tenemos un ejemplo de uso para configurar tablas completamente
con CSS, sin usar los elementos especficos de tabla de XHTML.
Si seguimos el ndice de propiedades de la especificacin CSS21 para saber a que tipos de elementos segn
su valor display se aplican y hacindolos corresponder con los elementos de tabla en XHTML segn lo
anterior, llegamos al siguiente resultado de aplicaciones o excepciones:
{border-collapse} se aplica a <table>.
{border-spacing} se aplica a <table>.
{caption-side} se aplica a <caption>.
{empty-cells} se aplica a <th>, <td>.
{height} NO se aplica a <col> ni a <colgroup>.
{margin} se aplica a <table>, <caption>
{max-height} y {min-height} NO se aplican a <col>, <colgroup>.
{max-width} y {min-width} NO se aplican a <tr>, <tbody>.
{overflow} se aplica a <th, td>.
{padding} se aplica a <table>, <caption>, <th>, <td>.
{text-align} se aplica a <th>, <td>.
{text-indent} se aplica a <th>, <td>.
{vertical-align} se aplica a <th>, <td>.
{width} NO se aplica a <tbody>, <tr>.
El resto de las propiedades se deberan poder aplicar a tablas y sus elementos incluidos, a excepcin
de algunas muy especficas como las propiedades de lista y otras.
En la exposicin de los atributos se muestran ejemplos para ofrecer una alternativa con propiedades de
estilo CSS a esos atributos.
Ejemplo <table>
Presentamos una tabla sencilla. Se trata de una tabla bsica, donde el cuerpo tbody se considera implcito
y que no tiene configuracin de bordes ni otros ornamentos. Los anchos de las columnas se adaptan al
contenido ms largo de la celda en cada columna.
Cuando hay celdas vacas como la situada en la parte inferior izquierda, conviene incluirles la entidad de
carcter segn se explica en la propiedad de estilo sobre mostrar/ocultar celdas vacas {empty-
cells}. Esa entidad de carcter viene a ser un espacio indivisible o no-break space, espacio de no
separacin.
<table>
<tr><th>FECHA</th><th>CONCEPTO</th>
<th>IMPORTE </th></tr>
<tr><td>10/11/07</td><td>Factura</td>
<td>3.540,26 </td></tr>
<tr><td>11/11/07</td><td>Recibo de agua</td>
<td>2.112,79 </td></tr>
<tr><td>12/11/07</td><td>Gastos bancos</td>
<td>150,36 </td></tr>
<tr><td> </td><td>TOTAL..........</td>
<td>3.690,62 </td></tr>
</table>

Resultado:
FECHA CONCEPTO IMPORTE
10/11/07 Factura 3.540,26
11/11/07 Recibo de agua 2.112,79
12/11/07 Gastos bancos 150,36
TOTAL.......... 5.803,41
1.1. Ancho de una tabla <table width = "x">
El valor "x" es del tipo %Length que expresa el ancho de la tabla tanto en pxeles como en porcentajes.
Cuando no se especifica, el ancho lo determina el navegador segn lo que ocupen los contenidos de la
celda. Para hacer que el ancho se expanda hasta el de la ventana disponible se usa un 100% del ancho
disponible en el contenedor donde est ubicada la tabla.
La especificacin aconseja usar estilo con {width} para dotar de ancho a una tabla. Sin embargo tanto con
estilo como con el atributo width, en los ejemplos siguientes veremos que en ciertas situaciones el ancho
es calculado y/o recalculado por el navegador a partir del contenido de las celdas, por lo que algunas veces
no es necesario (ni aconsejable) fijar un ancho para una tabla.
Presentacin visual de la estructura de la tabla
HTML401
Existen dos formas de presentar los anchos de los contenidos de una tabla por parte del navegador:
1. Reformateo dinmico, que se presenta a continuacin y que ocurre cuando no se esepcifican anchos de
columnas. En este caso el navegador no puede empezar a presentar la "estructura" visual hasta que se
reciba todo el contenido.
2. Presentacin incremental que se ver con los elementos <colgroup> y <col>. Es til cuando son tablas
muy largas y con mucho contenido, en cuyo caso hay que especificar nmero y ancho de las columnas
para que el navegador pueda presentar la "estructura" a medida que va recibiendo los datos y no tenga
que esperar a que lleguen todos.
Presentacin de una tabla: Reformateo dinmico
Una de las primeras cosas que parece sorprendernos es que, sin especificar ningn ancho de la tabla ni de
las columnas, el navegador ajusta los mismos a los contenidos de las celdas. Es lo que se conoce como
reformateo dinmico. Resultara arriesgado especificar un ancho fijo en pxeles para la tabla y ms para
las columnas, sin saber a ciencia cierta si el contenido se presenta comdamente en esos anchos. En
cambio, cuando no se especifican anchos para las columnas, el navegador adopta la pauta de modificar su
tamao dinmicamente para adaptar los anchos de los contenidos al ancho total disponible de la tabla. Si
ste no es especificado tomar todo el ancho disponible que necesite en su ventana o contenedor donde
est ubicado. Si el ancho de la tabla es especificado y el contenido es muy largo, el navegador adaptar el
contenido de texto en tantas lneas como necesite, ajustndose como mnimo al ancho de la palabra ms
larga. Si el contenido es una imagen y como sta no puede dividirse en varias lneas, entonces el ancho
especificado se ignora.
En este primer ejemplo tenemos una tabla con contenido que ocupan poco espacio. El navegador tratar en
la medida de lo posible de no cortar las frases en diferentes lneas mientras tenga espacio horizontal en la
ventana disponible. Ir ajustando el ancho de cada columna para que quepa el contenido de tal forma que
el ancho de la tabla estar condicionada por esos anchos de contenidos.
<table border="1">
<tr>
<td>Inicio fila</td>
<td>Medio fila</td>
<td>Fin fila</td>
</tr>
</table>

Resultado:
Inicio fila Medio fila Fin fila
A continuacin tampoco se indica ancho de la tabla, pero la columna del centro tiene un contenido muy
largo. El navegador ajustar los anchos de las tres columnas segn sus contenidos, por lo que debe
esperar a recibirlos todos para poder tratarlos. Se observa como se da mayor preponderancia para conceder
ancho cuanto mayor sea el contenido. As la columna central tiene mayor ancho, luego la final y por ltimo
la inicial, lo que va en funcin de lo que ocupan los contenidos.
<table border="1">
<tr>
<td>Inicilo fila</td>
<td>Este enfoque.....</td>
<td>Final de fila, con.....</td>
</tr>
</table>

Resultado:
Inicio
fila
Este enfoque presenta varias complicaciones, como los fallos de comunicacin
temporales que pueden hacer que un sitio parezca no disponible, haciendo que no se
lleve a cabo la operacin de escritura, pero cuando el enlace se restaura, el sitio no
sabe que tiene que llevar a cabo operaciones de reintegracin para ponerse al da con
las operaciones de escritura perdidas. Adems si la red se fragmenta puede que cada
particin pase a actualizar el mismo elemento de datos, creyendo que los sitios de las
dems particiones no funcionan.
Final de
fila, con
algunas
palabras
pero cuyo
contenido
no es tan
largo.
Ahora bien, si estamos empeados en especificar el ancho de la tabla, el navegador lo respetar siempre
que quepa el contenido. En este ejemplo usamos una tabla con una nica celda cuyo contenido ser ms
largo que el ancho que se especifica de 20 pxeles, ajustando al ancho de la palabra ms larga e ignorando
esos 20 pxeles.
Este cuadro azul
<div style="border: solid blue 1px; width: 20px; "> </div>
tiene un ancho de 20 pxeles, longitud a la que se configur el ancho de esta tabla:
<table width="20" border="1">
<tr>
<td>Aterciopeladamente el atardecer mostr su color ms vivo.</td>
</tr>
</table>

Resultado:
Este cuadro azul

tiene un ancho de 20 pxeles, longitud a la que se configur el ancho de esta tabla:
Aterciopeladamente
el atardecer mostr
su color ms vivo.
Por ltimo para finalizar podemos fijar el ancho de la tabla en porcentajes del espacio disponible.
Nuevamente primero se adaptar a los contenidos de la palabra ms larga y luego respetar el ancho
fijado. Esto se puede observar reduciendo el ancho de la ventana del navegador hasta que sea menor que
el ancho mnimo de la tabla, momento en que el cuadro azul se redibuja pero no as la tabla, pues llega un
momento en que no puede reducir la longitud de la palabra ms larga en cada columna.
Este cuadro azul
<div style="border: solid blue 1px; width: 50%; "> </div>
tiene un ancho del 50% de la ventana disponible, mismo ancho que se fija
para la tabla:
<table width="50%" border="1" >
<tr><td>FECHA</td><td>CONCEPTO</td>
<td>IMPORTE</td></tr>
<tr><td>10/11/07</td><td>Factura</td>
<td>3.540,26 </td></tr>
<tr><td>12/11/07</td><td>Gastos bancos</td>
<td>150,36 </td></tr>
<tr><td> </td><td>TOTAL..........</td>
<td>3.690,62 </td></tr>
</table>

Resultado:
Este cuadro azul

tiene un ancho del 50% de la ventana disponible, mismo ancho que se fija para la tabla:
FECHA CONCEPTO IMPORTE
10/11/07 Factura 3.540,26
12/11/07 Gastos bancos 150,36
TOTAL.......... 3.690,62
1.2. Bordes de una tabla <table border = "x">
El valor "x" es del tipo %Pixels para declarar el grosor del borde del marco externo de la tabla. Es
importante diferenciar entre las siguientes configuraciones de bordes que podemos encontrar en una tabla y
en sus elementos, tal como se expone en la siguiente imagen.
Se ha de sealar que esto es una imagen que reproduce las distintas zonas de la estructura de una tabla,
por lo que los colores se han puesto para diferenciar las distintas partes, no significando que cada zona
pueda llegar a colorearse de esa forma con atributos o estilos y, ni muchos menos, que se pueda poner
texto en las separaciones o rellenos. Las zonas a destacar son:
Borde de la tabla, ms exactamente del marco externo de la tabla, a especificar un grosor en pxeles
con <table border>. Se trata de las reas de color gris en la imagen anterior.
Configurar borde de la tabla, a especificar con <table frame>, lo que nos permitir presentar u ocultar
uno o ms lados del borde del marco externo de la tabla.
Bordes de celdas o internos de la tabla, a configurar con <table rules>, pudiendo hacer que
aparezcan todas las lneas de divisin o slo algunas entre filas o columnas o bien ninguna. Pero no se
puede variar el grosor o estilo de estos bordes.
Espacio entre celdas, que se especifica con <table cellspacing>. Esta separacin entre celdas se
aplica tambin a la separacin con el borde del marco externo de la tabla. Se trata de las reas de
color amarillo.
Relleno de celda para separar el borde de la celda de su contenido interior, especificndose con <table
cellpadding>. Son las reas de color verde, siendo las azules el contenido de las celdas. No existe
borde entre el contenido y el relleno.
Estos son, mediante atributos, todos los bordes y zonas que pueden configurarse. Los elementos interiores
como filas, celdas, etc. no permiten configuraciones para bordes individuales. Slo con <table rules>
puede mostrarse o ocultarse los bordes en columnas, filas o grupos de las mismas. Como resumen podemos
declarar lo siguiente que hay que tener en cuenta en relacin con tablas y sus bordes:
1. Especificar borde con valor cero (border="0") equivale a su valor por defecto cuando no se especifica.
Implica que el marco externo sea ninguno (frame ="void") y las lneas internas ninguna
(rules="none") cuando no se especifican.
2. Especificar borde con valor distinto de cero implica que el marco externo sea para los cuatro lados
(frame ="border") y mostrar todas las lneas internas (rules="all") cuando no se especifican estos
dos atributos.
3. En este caso cuando el grosor del borde es especificado, se aplica exclusivamente al borde del marco
externo de la tabla. Con atributos no hay forma de modificar el grosor de los bordes internos, pudiendo
slo actuar con la separacin entre estos bordes internos con cellspacing.
4. La separacin entre bordes internos con cellspacing se aplica a toda la tabla, es decir, a todo su
interior, no pudiendo seleccionar partes de la misma para realizar separaciones individuales. Lo mismo
se puede decir del relleno cellpadding que se aplica a todas las celdas.
5. Colores: El esquema presentado ms arriba es una imagen que se ha dotado de colores para diferenciar
los conceptos. Los navegadores consultados (Explorer, Opera, Firefox y Safari) no siguen una misma
pauta a la hora de aplicar el color. Cuando no se especifica un color para un elemento o una parte del
mismo, lo generalmente aceptado es que se aplique el color heredado (ver {color}), que en este caso
debera ser aplicado a los bordes, pero como decimos, todos los navegadores no hacen lo mismo. Los
bordes se presentan por deferto cincelados tal como se ver en un ejemplo a continuacin.
Dadas las limitaciones que tienen los atributos para configurar los bordes, es ms que recomendable usar
estilos para ese propsito. Se explica con todo detalle en un ejemplo expuesto ms abajo.
Ejemplo <table border>: Colores y forma de bordes de la tabla (con atributos)
La forma por defecto es de bordes cincelados. Sin embargo los navegadores consultados no se ponen de
acuerdo a la hora de aplicar el color a los bordes (vese la nota aclaratoria ms abajo). El cdigo resumido
es el siguiente:
1)...
<div style="color:black">
<table border="10" cellspacing="5">
<tr><td>celda</td><td>celda</td></tr>
</table>
</div>
2)...
<div style="color:blue">
<table border="10" cellspacing="5">
...
3)...
<table border="10" cellspacing="5" style="color: red;">
...
4)...
<table border="10" cellspacing="5" style="border-color: red;">
...

Resultado:
1) Esta tabla sin configuracin de color para los bordes, se encuentra en un bloque configurado con color
negro.
celda celda
celda celda
2) Esta tabla tampoco tiene color especificado y se encuentra en un bloque configurado con color azul.
celda celda
celda celda
3) Esta tabla se encuentra en un bloque configurado con color azul, pero el color de primer plano de la
tabla se ha configurado a rojo:
celda celda
celda celda
4) Esta tabla se encuentra en un bloque configurado con color azul, pero se ha configurado con estilo el
color rojo del borde, aplicndose exclusivamente al borde del marco externo de la tabla:
celda celda
celda celda
Nota aclaratoria:
Con los navegadores Internet Explorer 7, Firefox 2.0 y Opera 9.24 hicimos pruebas hace un par de aos y ahora en el ao 2010 nos
volvemos a encontrar que esta forma diferente de tratar el color en las tablas por distintos navegadores no ha cambiado. Vea unas
capturas de pantallas que hemos realizado con los navegadores sealados (versiones actualizadas en junio 2010):
Explorer 8 Safari 4.0 Firefox 3.5 Opera 10.5
Se observa cierta similitud Explorer y Safari y por otro lado Firefox y Opera. Pienso que no merece la pena saber cul es la que ms se
adapta al estndar, si es que esto de la aplicacin del color est especificado, pero deberan ponerse de acuerdo.
Ejemplo <table border>: Procedimiento para especificar bordes con estilos. Modelos de bordes
abiertos y cerrados.
Ante el diferente comportamiento de los navegadores y las limitaciones encontradas para especificar
bordes mediante atributos, proponemos que se use estilos segn las siguientes propiedades:
{border}, lo cual permitir dar color, forma y grosor a los bordes agrupados o individualmente.
{border-collapse}, lo que nos permite optar por un modelo de bordes abiertos con separacin entre
bordes internos o un modelo de bordes cerrados para anular esa separacin (valores separate o
collapse respectivamente).
{border-spacing}, que se comporta como el atributo <table cellspacing>.
{padding} que aplicado a las celdas de forma agrupada o individualmente se comporta igual que
<table cellpadding>.
Nota aclaratoria:En estilo CSS y tablas XHTML se expone las propiedades de estilo que pueden aplicarse a tablas.
La mejor forma es declarar en estilo interno en la cabecera del documento (o en externo) los tipos de
tablas que deseamos para nuestro documento. Por ejemplo, en este documento hemos declarado con el
elemento <style> dos clases de tablas: "abierta" y "cerrada" para albergar tablas de uno u otro modelo
que contemplen o no la separacin entre bordes internos de la tabla. En la clase abierta tambin definimos
una clase "d" para celdas que necesitemos con borde doble.
<style type="text/css">
/*MODELO BORDES SLIDOS ABIERTOS*/
table.abierta {border:red solid 1px; border-collapse:separate;
border-spacing:5px 8px; }
table.abierta td {border:blue solid 1px; padding:5px; }
/*Para celdas con borde doble*/
table.abierta td.d {border:blue double 5px; padding:5px;}
/*MODELO BORDES SLIDOS CERRADOS*/
table.cerrada {border:red solid 1px; border-collapse:collapse; }
table.cerrada td {border:blue solid 1px; padding:5px; }
</style>

As podemos configurar con mayor precisin las celdas o incluso filas e ir ms lejos, si identificamos los
elementos de la tabla podemos configurarlos individualmente con estilos. Luego usamos ese estilo en los
elementos tal como refleja el cdigo resumido siguiente, indicando adems que luego podemos aplicar
estilo local a cualquier elemento de la tabla para realizar una configuracin ms precisa. En este sentido si
el uso de tablas con distintos formatos es muy frecuente en un documento, es mejor definir unos modelos
"base" que luego puedan ser adaptados localmente.
<div>
Aqu tenemos..."abierta"...
<table class="abierta">
</table>
</div>
<div>
La misma pero...."cerrada"...
<table class="cerrada">
...
<div>
Esta es una..."abierta"...
<table class="abierta" style="border: orange outset 10px;">
<tr><td>celda</td>
<td class="d">celda</td></tr>
<tr><td>celda</td>
<td class="d">celda</td></tr>
...

Resultado:
Aqu tenemos una tabla de la clase "abierta" del modelo bordes abiertos con bordes slidos. Se han
especificado diferentes separaciones para las verticales (8px) y horizontales (5px).
celda celda
celda celda
La misma pero de la clase "cerrada" del modelo bordes cerrados. En este caso se ha especificado borde
rojo externo y azul interno. Al ser cerrada el borde externo rojo es ocultado por el borde interno.
celda celda
celda celda
Esta es una tabla de la clase "abierta" sobre la cual hemos adaptado localmente el estilo del borde
exterior del tipo outset, que es el mismo que por defecto aparece cuando slo se usan atributos en lugar
de estilo. El color del borde exterior deber ser declarado nuevamente en estilo local, como hemos hecho
ahora en color orange, pues en otro caso el comportamiento no es uniforme en todos los navegadores:
unos usan el anteriormente declarado en rojo mientras que los otros navegadores entienden que no se ha
declarado color y usan el heredado del contenedor. Vese que usamos celdas de la clase "d" para dotarlas
de borde doble.
celda celda
celda celda
Nota aclaratoria:
Hemos capturado la imagen de las pantallas de las tablas de este ejemplo agrupndolas por cada uno de los cuatro navegadores
consultados, los cuales tiene versiones actualizadas en Junio 2010. Se observa que todos se comportan igual ahora usando estilos
(comparar con la nota del tema anterior). Bueno, hay pequeas diferencias en la presentacin del borde cincelado, pero es una cuestin
menor.
Explorer 8 Safari 4.0 Firefox 3.5 Opera 10.5
Nota: Obtenemos una imagen en pantalla y la comprimimos con el formato jpg para ahorrar espacio a costa de perder calidad en el color. El azul en los bordes
finos casi parece negro (en lugar de azul ms claro), pero en la realidad observada en los cuatro navegadores no se aprecian diferencias en cuanto al color.
Otra informacin:Con la propiedad de estilo {display} se expone un ejemplo que muestra tablas realizadas completamente con estilos.
1.3. Espacio entre celdas de una tabla <table cellspacing = "x">
Atributo con valor del tipo %Length para declarar en pxeles o porcentajes la separacin entre celdas. En el
atributo <table border> se expone con mayor detalle todos los aspectos de bordes y espacios de una
tabla.
Este atributo tiene su equivalente en estilo con {border-spacing}.
Ejemplo <table cellspacing>
Para comprender mejor este atributo y su relacin con relleno de celdas y bordes se expone la siguiente
tabla. Se trata de una tabla con:
Un borde externo slido verde de 5px configurado con la propiedad de estilo {border}, no usndose
el atributo de borde externo <table border>.
Separacin entre celdas de 10px configurado con el atributo <table cellspacing> para todas las
celdas de la tabla.
Relleno interno de las celdas de 10px configurado con el atributo <table cellpadding> para todas
las celdas de la tabla.
Bordes slidos rojos de las celdas de 5px configurados con la propiedad de estilo {border} en cada
una de las celdas de forma individual.
La manera de configurar individualmente los bordes y relleno de cada celda puede resultar tedioso si hay
un gran nmero de ellas. Vese al respecto la solucin propuesta en el ejemplo citado en el atributo
border de esta misma pgina.
<table style="border:solid green 5px;" cellspacing="10"
cellpadding="10">
<tr>
<td style="border:solid red 5px; ">celda</td>
<td style="border:solid red 5px;">celda</td>
</tr>
</table>

Resultado:
celda celda
1.4. Relleno de celdas de una tabla <table cellpadding = "x">
Atributo con valor del tipo %Length para declarar en pxeles o porcentajes el relleno o separacin entre el
borde de una celda y su rea de contenido. En el atributo <table border> se expone con mayor detalle
todos los aspectos de bordes y espacios de una tabla.
Este atributo tiene su equivalente en estilo con {padding}.
Ejemplo <table cellpadding>
Tabla con dos celdas dotadas de 20px de relleno.
<table cellpadding="20" border="1">
<tr><td>contenido</td>
<td>contenido</td></tr>
</table>

Resultado:
contenido contenido
1.5. Bordes externos de una tabla <table frame = "x">
El valor "x" es un tipo enumerado denominado %TFrame para indicar las distintas formas de presentar los
bordes (del marco externo) de una tabla:
void: ningn lado, valor inicial.
above: slo borde superior.
below: slo borde inferior.
hsides: slo bordes superior e inferior.
vsides: slo bordes derecho e izquierdo.
lhs: slo lado izquierdo.
rhs: slo lado derecho.
box: los cuatro lados.
border: los cuatro lados.
Ejemplo <table frame>
Probamos todos los tipos enunciados antes:
<table frame="void" border="3">
<tr><td style="color:red;">void</td><td>ninguno</td></tr>
</table>
...etctera...

Resultado:
Ningn lado:
void ninguno
Borde arriba:
above arriba
Borde abajo:
below abajo
Bordes superior e inferior:
hsides horizontales
Bordes derecho e izquierdo:
vsides verticales
Borde izquierdo:
lhs izquierdo
Borde derecho:
rhs derecho
Borde en cuatro lados:
box cuatro
Borde en cuatro lados:
border cuatro
Ejemplo <table frame>: Efecto de frame y border-collapse
Las distintas configuraciones de frame nos permiten mostrar u ocultar los bordes externos en uno o ms
lados. Por defecto una tabla usa el modelo de bordes abiertos. En este ejemplo se proponen varios casos
para ver el efecto tambin con el modelo de bordes cerrados, observndose que al menos en los
navegadores consultados, se modifica de forma automtica el tipo de borde externo.
<table border="10">
</table>
...
<table border="10" frame="vsides">
...
<table border="10" frame="vsides" style="border-collapse: separate;">
...
<table border="10" style="border-collapse: collapse;">
...
<table border="10" frame="vsides" style="border-collapse: collapse;">
...

Resultado:
Tabla con borde externos de 10 pxeles, por defecto se muestra en los cuatro lados un borde del tipo
outset segn los estilos de bordes mostrados en {border-style}:
celda celda
Aqu hacemos que se muestre en los verticales con frame="vsides":
celda celda
Ahora, adems de lo anterior, aadimos style="border-collapse: separate;" para indicar el modelo
de bordes abiertos, lo cual equivale a lo anterior pues es el modelo por defecto:
celda celda
En este caso usamos el modelo de bordes cerrados style="border-collapse: collapse;" para cerrar
los bordes internos. Se observa que el tipo de borde externo es automticamente modificado a un tipo
ridge segn la misma lista de estilos de bordes sealados antes:
celda celda
Ahora aadimos frame="vsides":
celda celda
Slo Safari no parece ejecutar adecuadamente el atributo frame.
1.6. Bordes internos de una tabla <table rules = "x">
El valor "x" es un tipo enumerado denominado %TRules para indicar las distintas formas de presentar los
bordes internos (de las celdas) de una tabla:
none ningn borde a mostrar, valor inicial.
groups para mostrar slo los bordes de grupos de columnas y/o filas.
rows para mostrar bordes slo de filas.
cols para mostrar bordes slo de columnas.
all para mostrarlos todos.
Este atributo no se comportan exactamente igual en los navegadores consultados, tal como se expone en
los ejemplos siguientes.
Ejemplo <table rules>
Presentamos todos los valores con detalles al respecto en el resultado. Hay que sealar que por lo
observado Opera no acta correctamente con este atributo, pues Explorer, Firefox y Safari si realizan
adecuadamente la funcin de mostrar los bordes internos segn los valores declarados. Sin embargo hay
que tener en cuenta algunos detalles que se comentan en un ejemplo siguiente a ste.
<table border="1" rules="none">
<tr><td>1,1</td><td>1,2</td>
<td>1,3</td></tr>
...

Resultado:
No mostrar ningn borde interno con none.
1,11,21,3
2,12,22,3
3,13,23,3
Mostrar todos los bordes internos con all.
1,11,21,3
2,12,22,3
3,13,23,3
Mostrar slo bordes internos de las filas con rows.
1,11,21,3
2,12,22,3
3,13,23,3
Mostrar slo bordes internos de las columnas con cols.
1,11,21,3
2,12,22,3
3,13,23,3
Mostrar slo bordes internos de las columnas con groups. Hemos creado 3 grupos de columnas con
<colgroup>. Los dos primeros grupos contienen 2 columnas cada uno, el ltimo grupo contiene una sla
columna. Los bordes ahora se muestran por grupos de columnas.
(1,1)(1,2) (1,3)(1,4) (1,5)
(2,1)(2,2) (2,3)(2,4) (2,5)
Ejemplo <table rules>: Efecto de rules y los modelos de bordes abiertos y cerrados
Sin contar con Opera que vimos que no acta correctamente con el atributo rules, queremos ver el efecto
con los modelos de bordes abiertos y cerrados. En el resultado se comentan los detalles para los
navegadores analizados. El cdigo resumido en las partes importantes es el siguiente:
...
<table border="1">
<tr>
<td>(1,1)</td>
...
<table border="1" rules="cols">
<tr>
<td>(1,1)</td>
...
<table style="border-collapse: separate;
border: green solid 1px; ">
<tr>
<td style="border: green solid 1px;">(1,1)</td>
...
<table rules="cols" style="border-collapse: separate;
...
<table rules="cols" style="border-collapse: collapse;
...

Resultado:
Aqu tenemos una tabla con el atributo border="1" y sin ninguna otra configuracin de estilo u otros
atributos. Se espera que, por defecto, sea una tabla del modelo de bordes abiertos, es decir, con una
separacin entre los bordes internos que ser puesta por por el navegador (probablemente unos 2px). As
lo representan adecuadamente todos los navegadores analizados.
(1,1) (1,2) (1,2)
(2,1) (2,2) (1,2)
Si se aplica el atributo rules="cols" a la tabla anterior se espera que oculte los bordes internos
horizontales y muestre solo los verticales (de las columnas). Esto se ejecuta correctamente en Explorer,
Firefox y Safari, pero no en Opera que incluye el borde horizontal interior que se debe ocultar al aplicar la
regla de columnas. Todos convierten de forma automtica la tabla a un modelo de bordes cerrados, es
decir, cierran los bordes internos.
(1,1) (1,2) (1,2)
(2,1) (2,2) (1,2)
Sin embargo usando la propiedad de estilo {border-collapse} con su valor separate para designar el
modelo de bordes abiertos (que es el que por defecto se muestra cuando no se especifica o si no se usa
estilo) y adems tambin configuramos con estilo los bordes internos de las celdas, el resultado es igual
en todos los navegadores:
(1,1) (1,2) (1,2)
(2,1) (2,2) (1,2)
Si en la tabla anterior intentamos que muestre slo los bordes internos verticales con rules="cols"
sucede que en este caso es ignorado por todos los navegadores:
(1,1) (1,2) (1,2)
(2,1) (2,2) (1,2)
Con el modelo de bordes cerrados tambin todos los navegadores ignoran el atributo de mostrar slo
bordes internos verticales:
(1,1) (1,2) (1,2)
(2,1) (2,2) (1,2)
En resumen, los atributos frame y rules no tienen un comportamiento adecuado ni uniforme en los
navegadores, por lo que el consejo podra ser no usarlos y gestionar esto directamente con estilo CSS.
1.7. Resumen de una tabla <table summary = "x">
El valor "x" es del tipo %Text para resumir la finalidad y estructura de la tabla para navegadores no visuales
(voz o Braille).
1.8. Alinear tabla <table align = "x"> (XHTML transicional)
Este atributo de XHTML Transicional tiene valores del tipo enumerado right, left o center para alinear una
tabla. El valor por defecto es la alineacin a la izquierda. Cuando alinemos una tabla a la derecha o
izquierda, los elementos que le siguen se desplazan al lado contrario, por lo que la tabla se considera que
flota sobre los elementos siguientes. De esta forma se comporta igual que cuando alineamos una imagen
con <img align>.
La alineacin derecha o izquierda puede realizarse tambin con estilo mediante la propiedad de flotamiento
de elementos {float}. Sin embargo CSS no tiene una propiedad especfica para centrar elementos
horizontalmente. Una forma de realizarlo es mediante la propiedad {margin} y dando mrgenes con valores
auto a ambos lados. Vese en esa propiedad de mrgenes un ejemplo al respecto.
Ejemplo <table align>
Centramos, alineamos a la izquierda y a la derecha. En estos ltimos agregamos luego un texto para
mostrar como la tabla flota sobre el texto. Para finalizar el flotamiento incluimos un elemento al final para
borrar la flotacin (ver {clear}).
celda celda
celda celda
Tabla centrada:
<table align="center" border="1">
</table>
<table align="left" border="1">
</table>
Ejemplo de tabla alineada a la izquierda con el texto a la derecha.
<div style="clear: left;"></div>
<table align="right" border="1">
</table>
Ejemplo de tabla alineada a la derecha con el texto a la izquierda.
<div style="clear: right;"></div>

Resultado:
Tabla centrada:
celda celda
Ejemplo de tabla alineada a la izquierda con el texto a la derecha.
Ejemplo de tabla alineada a la derecha con el texto a la izquierda.
1.9. Color de fondo de una tabla <table bgcolor = "x"> (XHTML Transicional)
Este atributo de XHTML Transicional tiene valores del tipo %Color para indicar el color de fondo de una
tabla. Conviene usar la propiedad de estilo {background-color} para el mismo resultado.
Ejemplo <table gbcolor>
Establecer el color de fondo aqua de una tabla.
<table bgcolor="aqua" border="10">
<tr><td>celda1</td><td>celda2</td></tr>
</table>

Resultado:
celda1 celda2
2. TTULO DE UNA TABLA <caption>
Alinear texto (align)
La estructura de una tabla que afecta al ttulo es
<!ELEMENT table
...

Es un elemento definido en la tabla como opcional (uno o ninguno), pero que en caso de incluirse debe ir en
primer lugar, antes que ningn otro. Puede contener a su vez elementos del tipo %Inline. El ttulo debe dar
una descripcin corta del contenido de la tabla. La propiedad de estilo {caption-side} nos permite
posicionar el ttulo en diversas partes del exterior de la tabla.
Ejemplo <caption>: ttulo de tabla
Ponemos "Tabla con dos celdas" como ttulo de la misma. Vese como el elemento no queda afectado por
los bordes pero si por el color del estilo. Adems el ancho se ajusta al de la tabla.
<table border="1">
<caption>Tabla con dos celdas</caption>
</table>

Resultado:
Tabla con dos
celdas
celda1 celda2
2.1. Alinear texto del ttulo <caption align = "x"> (XHTML Transicional)
Este atributo de XHTML Transicional con valores del tipo %CAlign permite alinear el ttulo con top, bottom,
left, right (arriba, abajo, izquierda y derecha) siendo top el valor inicial y centrando el texto, pero es de
resaltar que el valor center no aparezca en la especificacin, como podemos verlo en DTD para XHTML
Transicional y que reproducimos aqu:
<!ENTITY % CAlign "(top|bottom|left|right)">
<!ATTLIST caption
%attrs;
align %CAlign; #IMPLIED
>

Ejemplo <caption align>
Los navegadores no actan de la misma forma. Especialmente significativa es la diferencia de Firefox que
entiende que debe alinearse el elemento <caption> tambin con respecto a los laterales derecho e
izquierdo de la tabla, en lugar de alinear el texto horizontalmente dentro de <caption> como hacen
Explorer y Opera. Safari slo ejecuta este atributo parcialmente. En los resultados comentaremos cada
caso.
En cuanto a alinear en los lados de una tabla hemos de decir que con estilos podemos alinear
horizontalmente el texto con la propiedad {text-align} pero dentro del propio elemento <caption> y no
en relacin con la tabla. Por lo tanto con XHTML estricto ni con CSS 2.1 (la propiedad {caption-side} slo
permite posicionar arriba y abajo), no habra forma de situar el ttulo en los laterales tal como lo entiende
Firefox.
Ttulo alineado a la izquierda:<br />
<table border="1" style="color: blue;">
<caption align="left">Tabla con dos celdas</caption>
</table>
...

Resultado:
Ttulo alineado a la izquierda:
Tabla con dos
celdas
celda1 celda2
Explorer y Opera ponen el ttulo en la parte superior y alinea a la izquierda el texto.
Firefox alinea el elemento ttulo a la izquierda de la tabla, con el texto centrado dentro del
elemento.
Safari pone el ttulo en la parte superior y centra el texto.
Ttulo alineado a la derecha:
Tabla con dos
celdas
celda1 celda2
Explorer y Opera ponen el ttulo en la parte superior y alinea a la derecha el texto.
Firefox alinea el elemento ttulo a la derecha de la tabla, con el texto centrado dentro del elemento.
Safari pone el ttulo en la parte superior y centra el texto.
Ttulo alineado arriba:
Tabla con dos
celdas
celda1 celda2
Todos ponen el ttulo en la parte superior de la tabla y centran el texto. Esta es la opcin por defecto
cuando no se especifica el atributo.
Ttulo alineado abajo:
Tabla con dos
celdas
celda1 celda2
Todos ponen el ttulo en la parte inferior de la tabla y centran el texto.
En resumen, otro atributo que no conviene utilizar mientras no se unifiquen los criterios.
3. COLUMNA DE UNA TABLA <col>
Abarcar (span) Ancho (width) Alinear carcter (char) Separacin eje (charoff) Alinear horizontal (align)
Alinear vertical (valign)
Recordemos la estructura de una tabla que afecta a las columnas:
<!ELEMENT table
...
...

Por lo tanto tras un opcional y nico ttulo <caption>, podemos poner tambin opcionalmente varios
elementos columna <col> o, alternativamente, grupos de columnas <colgroup>. Los elementos columna
nos permiten compartir atributos entre varias columnas sin necesidad de tener que realizar un agrupamiento
de columnas. Entonces un <col> no puede contener nada (elemento vaco del tipo EMPTY), sirviendo slo
para declarar atributos.
En la exposicin de atributos siguiente puede observarse el uso de este elemento.
3.1. Abarcar columnas <col span = "x">
El valor "x" es del tipo %Number que define un nmero entero con un valor por defecto de "1", permitiendo
un entero mayor que cero para especificar el nmero de columnas siguientes incluyendo la actual a los que
se aplicarn los atributos que se especifiquen en este elemento. Hemos usado el nombre de "abarcar
columnas" para este atributo con el objeto de no usar "agrupar columnas" que es el objetivo concreto del
elemento <colgroup> y que tiene otra finalidad, el cual a su vez tambin tiene un atributo span que puede
"abarcar" varios columnas de un grupo.
Ejemplo <col span>: Aplicando estilos a las columnas
Se esperara que este elemento <col> sirviera para especificar atributos y estilos de todas las celdas de
una columna o las que abarque con su atributo span. Ver estilo CSS y tablas XHTML en relacin a las
propiedades de estilo que pueden aplicarse a tablas. Sin embargo y con estilos no sucede as como vemos
en este ejemplo, donde hemos puesto los siguientes estilos en cada una de las columnas que se
enumeran a continuacin, observando los mismos resultados en los cuatro navegadores consultados
(Explorer, Firefox, Opera y Safari):
1. Ancho y color de fondo, estilos que son aplicados por todos.
2. Imagen de fondo, aplicado por todos.
3. Color de primer plano, fuente, se ignora.
4. Bordes y mrgenes, ignorado por todos.
5. Relleno y contorno, ignorado por todos.
<table border="1" style="color: black; ">
<col style="background-color: aqua; width: 100px;" />
<col width="100" style="vertical-align: top;
background-image: url(ejemplos/tabla/img_1.jpg); " />
<col width="100" style="color: red; font: bold 2em 'Arial Black';
text-align: center; " />
<col width="100" style="border: green double 5px; margin-left: 20px; " />
<col width="100" style="padding-left: 20px; outline: purple dotted 1px; " />
<tr><td>1,1</td><td>1,2</td>......

Resultado:
1,1 1,2 1,3 1,4 1,5
2,1 2,2 2,3 2,4 2,5
Ejemplo <col span>, controlar nmero de columnas abarcadas
El orden de aparicin de los elementos <col> van indicando a las columnas que se aplica. Por lo tanto y
como se ver en la ltima tabla de este ejemplo, si queremos abarcar columnas tras otras que no
queremos modificar, habr que relacionar las anteriores como elementos <col> tambin. En todo caso la
suma de todos los valores de span (incluido el implcito "1") nunca puede ser mayor que el nmero de
columnas que tenga la tabla.
Abarcamos 3 columnas...
<table border="1">
<col span="3" width="100"/>
<tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
...
Ahora abarcamos 2 columnas...
<table border="1">
...
Por ltimo...
<table border="1">
<col />
...

Resultado:
Abarcamos 3 columnas, es decir, todas las de la tabla, para darle 100 de ancho a cada una, poniendo
<col span="3" width="100" />
1,1 1,2 1,3
2,1 2,2 2,3
Ahora abarcamos 2 columnas, las dos primeras con un ancho 100. Ponemos <col span="2" width="100"
/> y no tenemos que indicar nada para la ltima columna:
1,1 1,2 1,3
2,1 2,2 2,3
Por ltimo queremos poner un ancho de 100 a las dos ltimas y no tocar la primera. Para ello ponemos un
primer <col span="1" /> (aunque puede suprimirse span pues "1" es el valor por defecto) y luego
abarcamos las dos ltimas:
1,1 1,2 1,3
2,1 2,2 2,3
3.2. Ancho de columna <col width = "x">
El valor "x" es del tipo %MultiLength para indicar el ancho de la columna o de todas las que abarca con su
atributo span. Si el elemento col est includo en un grupo de columnas <colgroup>, el ancho declarado en
el elemento columna prevalece sobre el ancho del grupo de columnas al que pertenece.
Presentacin incremental de una tabla
Tal como se expuso en reformateo dinmico de una tabla, cuando no se indican anchos de elementos, el
navegador debe recibir todo el contenido de la tabla para calcular los anchos necesarios. Con tablas muy
largas esto puede evitarse con una presentacin incremental, pues se va presentando la tabla a medida que
se van recibiendo datos. Sin embargo para ello es necesario dar informacin acerca del nmero y anchura de
columnas antes de empezar a recibir los datos contenidos en las filas. Si las anchuras de columnas recibidas
resultaran estrechas para mostrar el contenido, el navegador puede optar por modificar el ancho de la
columna.
El tipo %MultiLength nos permite declarar el ancho de las columnas (o grupos de columnas) de tres formas
distintas, siendo "n" un nmero entero, con lo que conseguimos el propsito de presentacin incremental:
Ancho fijo, con width="n" de n pxeles para la columnas.
Ancho porcentual, con width="n%" relativo al espacio horizontal disponible para la tabla. Es importante
ver que no est referido al ancho de la tabla, sino al del espacio que hay en el contenedor donde la
tabla est ubicada y que ser puesto a disposicin de la tabla.
Ancho proporcional, con width="n*" relativo a espacios horizontales disponibles restantes y
proporcionales al valor de n. En este caso es necesario declarar tambin el ancho de la tabla para
conseguir una presentacin incremental.
En los ejemplos siguientes se exponen estos casos.
Ejemplo <col width>: Presentacin incremental con anchos fijos
Un ancho fijo en pxeles para las columnas. Al ancho especificado debe sumarse los rellenos horizontales
(especificados con <table cellpadding>). En la primera celda ponemos una imagen de 100 pxeles de
ancho con slo un color azul para diferenciar el rea de contenido del rea de relleno, borde y rea de
separacin entre celdas. Adems acompaamos unos bloques configurados con un ancho determinado para
compararlo con el ancho final que el navegador pone a las celdas.
En todos los navegadores consultados se observa el mismo efecto.
Este bloque ...
<div style="border: solid 1px; width: 120px; margin: 10px;
text-align: center;">
120px
</div>
<div style="border: solid 1px; width: 120px; margin: 143px;
text-align: center;">
120px
</div>
Esta tabla ...
<table border="1" cellpadding="10" cellspacing="10">
<col width="100" />
<col width="100" />
<tr><td><img src="ejemplos/tabla/contenido.jpg" width="100"
height="50" alt="contenido.jpg" title="contenido.jpg de 100x50" />
</td><td>celda</td></tr>
</table>

Resultado:
Estos bloques tiene anchos de 120 pxeles y situado con un margen de 10 pxeles desde su posicin a la
izquierda para la primera celda y 143 pxeles para la segunda (sumando tambin los 3 pxeles que ocupan
los bordes de las celdas y tabla a la izquierda):
120px
120px
Esta tabla tiene dos columnas con anchos especificados de 100 pxeles cada una. Sin embargo adems
tiene un relleno de 10 pxeles que deben sumarse al ancho para dar un total para cada celda de 120
pxeles.
celda
Ejemplo <col width>: Presentacin incremental con anchos porcentuales
Este ejemplo trata de presentar un ancho con porcentaje relativo al espacio disponible para la tabla, que
supuestamente sera la ventana del navegador. Sin embargo esto no parece funcionar as en ninguno de
los navegadores consultados.
Este bloque...
<div style="border: solid 1px; width: 50%; margin: 10px; text-align: center;">
50%
</div>
Esta tabla...
<table border="1" cellpadding="10" cellspacing="10">
<col width="50%" />
<tr><td>celda</td></tr>
</table>

Resultado:
Este bloque tiene un ancho del 50% de la ventana del navegador y situado con un margen de 10 pxeles
desde su posicin a la izquierda:
50%
Esta tabla tiene una sla columna y se esperara que ocupase el 50% del ancho disponible para la tabla,
es decir, el 50% de la ventana del navegador:
celda
Ejemplo <col width>: Presentacin incremental con anchos proporcionales
En este ejemplo dotamos a una tabla de un ancho de 340 pxeles. Queremos distribuirlo en tres columnas
con una separacin entre celdas de 10 pxeles. La primera deber tener 3 partes del ancho disponible, la
segunda 2 partes y la tercera una parte. Cul sera el ancho final de cada columna?. Al ancho total de la
tabla le descontamos 4 separaciones entre celdas, contando con los laterales, lo que supone 340-(4x10) =
300 pxeles disponibles para las columnas. Como tenemos 3+2+1=6 partes, la primera llevar 3/6 de 300
que son 150 pxeles, la segunda 2/6 de 300 que son 100 pxeles y la tercera 1/6 de 300 que son 50
pxeles. Hemos aadido unos bloques con tamaos para poder compararlos con los que finalmente pondr
el navegador a cada columna.
Estos bloques...
<div style="border: solid 1px; width:150px; margin-left: 10px; text-align: center;">
150px
</div>
100px
</div>
50px
</div>
Esta tabla...
<table width="340" border="1" cellspacing="10">
<col width="3*" />
<col width="2*" />
<col width="1*" />
<tr><td>celda</td><td>celda</td>
<td>celda</td></tr>
</table>

Resultado:
Estos bloques tienen anchos de 150, 100 y 50 pxeles, estando situados con mrgenes necesarios para
alinearlos verticalmente con cada columna:
150px
100px
50px
Esta tabla debera tener los anchos de las columnas proporcionales al espacio disponible, con 150, 100 y
50 pxeles respectivamente:
150 100 50
Nota aclaratoria:
Este ejemplo funcion en los trminos expresados antes con los navegadores Netscape 9 y Firefox 2, durante las pruebas realizadas en
2007-2008, cuando an Netscape estaba en vigor. En los otros navegadores consultados en aquel momento (Explorer y Opera) no se
observ que se ejecutara. La captura de pantalla siguiente es lo que apareca en Netscape 9, donde se observaba que los anchos de las
columnas aplicando la presentacin incremental con anchos proporcionales (n*) eran iguales que cada uno de los tres testigos de
muestra:
Actualmente (junio 2010), todos los navegadores consultados (Explorer, Firefox, Opera y Safari) parecen no aplicar los anchos
proporcionales tal como se explica aqu. Aunque tambin es cierto que los tres se comportan igual, pero desconozco que procedimiento
estn aplicando.
3.3. Alinear con respecto a un carcter el contenido de una columna <col char = "x">
Este atributo se define en el grupo %cellhalign de alineaciones horizontales del contenido de las celdas. Se
trata de realizar una alineacin horizontal del texto usando como eje un carcter, para lo cual se ha de
especificar tambin el atributo <col align> con su valor char. El ejemplo de mayor uso es para alinear
cifras por su punto decimal, carcter este que es el valor por defecto y que depende del idioma establecido
con el atributo <E lang>. Por ejemplo, en ingls se usa "." como separador decimal, mientras que en
Espaa se usa ",". Sin embargo la especificacin no obliga a que los navegadores tengan que soportar este
atributo.
Ejemplo <col char>
Tabla con cifras que han de ser alineadas por la coma decimal. El resultado debera ser algo como esto:
12.350,64
431,2
1.000
0,789

Sin embargo ninguno de los navegadores consultados hacen algo con este atributo.
<table border="1">
<col align="char" char="." />
<tr><th>Importes</th></tr>
<tr><td>12.350,64</td></tr>
<tr><td>431,2</td></tr>
<tr><td>1.000</td></tr>
<tr><td>0,789</td></tr>
</table>

Resultado:
Importes
12.350,64
431,2
1.000
0,789
Nota aclaratoria:
En el borrador de 4/3/2010 de la nueva versin HTML 5 ya aparece este atributo char, al igual que el siguiente que se expone charoff,
entre los que se van a suprimir.
3.4. Separacin del eje de carcter <col charoff = "x">
El tipo %cellhalign se usa para alineacin horizontal de celdas, agrupando los atributos align, char,
charoff. En este caso charoff se usa para indicar el espacio entre el borde (derecho?) de la celda y la
primera aparicin del carcter de alineacin en cada lnea. La necesidad de este atributo es para situar una
lnea de texto cuando no incluye el carcter de alineacin, usndose entonces el valor de este atributo para
el posicionamiento.
Nota aclaratoria:En la especificacin de HTML401 no se aclara si es el borde derecho o izquierdo. Como los navegadores usados no han
actuado con este atributo, no hemos podido comprobarlo.
Se usa conjuntamente con <col align> con su valor char al mismo tiempo que <col char> para indicar el
carcter que se usar como eje de alineacin. En este caso tampoco es obligatorio que deba ser soportado
por los navegadores. Dado que en el ejemplo expuesto en el atributo <col char> no obtuvimos respuesta
con los navegadores utilizados y que la especificacin no expone un ejemplo al respecto, aqu no
expondremos ningn ejemplo.
3.5. Alinear horizontalmente el contenido de una columna <col align = "x">
charoff. En este caso align puede tomar los valores left, right, center, justify, char. El valor de char se
explica en el atributo <col char>.
Ejemplo <col align>
Opera efecta las alineaciones izquierda, derecha, centrado y justificado. El resto de navegadores ignora
este atributo en las columnas.
<table border="1">
<col align="left" />
<col align="right" />
<col align="center" />
<col align="justify" />
<tr><th>izquierda</th><th>derecha</th><th>centrado</th><th>justificado</th></tr>
<tr><td>1</td><td>2</td><td>3</td>
<td>Este enfoque...
</td>
</tr>
</table>

Resultado:
izquierda derecha centrado justificado
1 2 3
Este enfoque presenta varias complicaciones, como los fallos de
comunicacin temporales que pueden hacer que un sitio parezca no
disponible, haciendo que no se lleve a cabo la operacin de escritura, pero
cuando el enlace se restaura, el sitio no sabe que tiene que llevar a cabo
operaciones de reintegracin para ponerse al da con las operaciones de
escritura perdidas. Adems si la red se fragmenta puede que cada
particin pase a actualizar el mismo elemento de datos, creyendo que los
sitios de las dems particiones no funcionan.
Ejemplo <col align>: Alinear horizontalmente el contenido de una columna con CSS
Segn lo expuesto en estilo CSS y tablas XHTML con relacin a las propiedades de estilo que pueden
aplicarse a tablas, podramos usar estilo con la propiedad {text-align} para el mismo efecto. Esta
propiedad en principio est destinada slo a elementos de bloque y celdas de tabla, por lo que ningn
navegador responde a aplicar estilo por columnas para alinear texto.
<table border="1">
<col style="text-align: left; " />
<col style="text-align: right; " />
<col style="text-align: center; " />
<col style="text-align: justify; " />
<tr><th>izquierda</th><th>derecha</th><th>centrado</th><th>justificado</th></tr>
<td>Este enfoque...
</td>
</tr>
</table>

Resultado:
izquierda derecha centrado justificado
1 2 3
Este enfoque presenta varias complicaciones, como los fallos de
comunicacin temporales que pueden hacer que un sitio parezca no
disponible, haciendo que no se lleve a cabo la operacin de escritura, pero
cuando el enlace se restaura, el sitio no sabe que tiene que llevar a cabo
operaciones de reintegracin para ponerse al da con las operaciones de
escritura perdidas. Adems si la red se fragmenta puede que cada
particin pase a actualizar el mismo elemento de datos, creyendo que los
Nota aclaratoria:
En el borrador de 4/3/2010 de la nueva versin HTML 5 ya aparece el atributo align sobre <col> entre los que se van a suprimir.
Aadems no podemos aplicar {text-align} tampoco a las columnas. Vea un ejemplo ms abajo donde se observa esta necesidad de
poder realizar alineado horizontal de texto por columna.
3.6. Alinear verticalmente el contenido de una columna <col valign = "x">
El valor es del tipo %cellvalign que puede tomar los valores top, middle, bottom, baseline para alinear el
contenido de las celdas en la parte superior, medio, inferior y con una lnea de base comn.
Ejemplo <col valign>
Explorer y Opera lo ejecutan adecuadamente. Firefox y Safari lo ignoran.
<table border="1">
<col valign="top" />
<col valign="middle" />
<col valign="bottom" />
<col valign="baseline" />
<tr><th>TOP</th><th>MIDDLE</th>
<th>BOTTOM</th><th>BASELINE</th>
<th>X</th></tr>
<tr><td>1</td><td>2</td>
<td>3</td><td>4</td>
<td>1<br />2<br/>3<br /></td></tr>
</table>

Resultado:
TOP MIDDLE BOTTOM BASELINE X
1 2 3 4
1
2
3
Ejemplo <col valign>: Alineacin vertical con CSS del contenido de una columna
Segn lo expuesto en estilo CSS y tablas XHTML con relacin a las propiedades de estilo que pueden
aplicarse a tablas, la alineacin vertical de texto se consigue con {vertical-align}. Supongo que como
la especificacin CSS21 dice que se aplica slo a celdas, esto no funciona en ningn navegador de los
consultados.
<table border="1">
<col style="vertical-align: top;" />
<col style="vertical-align: middle;"" />
<col style="vertical-align: bottom;" />
<col valign="vertical-align: baseline;" />
<tr><th>TOP</th><th>MIDDLE</th>
<th>BOTTOM</th><th>BASELINE</th>
<th>X</th></tr>
<tr><td>1</td><td>2</td>
<td>3</td><td>4</td>
<td>1<br />2<br/>3<br /></td></tr>
</table>

Resultado:
TOP MIDDLE BOTTOM BASELINE X
1 2 3 4
1
2
3
4. GRUPO DE COLUMNAS DE UNA TABLA <colgroup>
Abarcar (span) Ancho (width) Alinear carcter (char) Separacin eje (charoff) Alinear horizontal (align)
Alinear vertical (valign)
Recordemos la estructura de una tabla que afecta a las columnas:
<!ELEMENT table
...
...

Alternativamente podemos poner cero o ms elementos columnas <col> o bien grupos de columnas
<colgroup> (no los dos a la vez). Un grupo de columnas es un divisin estructural de una tabla con el
objeto de dar estilo y/o atributos a varias columnas al mismo tiempo. Un grupo de columnas puede contener
cero o ms elementos <col>.
Si en una tabla no se especifica ningn elemento <colgroup> se entender que existe uno implcito que
contiene a todas las columnas. En otro caso pueden crearse cualquier nmero de grupos explcitos de grupos
de columnas. Debe entenderse la diferencia de un grupo de columnas especificado con <colgroup> y una
columna a la cual se le dota de un abarcamiento (span) de varias columnas para compartir propiedades y/o
atributos, pues el grupo representa un agrupamiento estructural mientras que el abarcamiento de columnas
no, aunque al final puedan realizar el mismo efecto. Hay que tener en cuenta lo que antes se dijo: siempre
existe un grupo de columnas implcito aunque no se declare ninguno.
Ejemplo <colgroup>
Aqu presentamos dos tablas, en la primera declaramos columnas con sus anchos sin incluirlas en un
elemento <colgroup> aunque se entiende implcito. En la segunda si se especifica.
Tabla sin especificar....
<table border="1">
<col width="50" />
<col width="100" />
<col width="150" />
<tr><td>1</td>....
En esta tabla...
<table border="1">
<colgroup>
<col width="50" />
<col width="100" />
<col width="150" />
</colgroup>
<tr><td>1</td>....
Tabla...
<table border="1">
<colgroup>
<col width="50" />
<col width="100" />
<col width="150" />
</colgroup>
<tr><td>1</td></tr>
</table>

Resultado:
Tabla sin especificar el grupo de columnas, por lo que se entiende implcito en la estructura de la tabla:
1 2 3
En esta tabla si se especifica el grupo de columnas:
1 2 3
Tabla con tres col pero donde se ha especificado una nica columna con celdas td. Aunque no supone un
error de validacin para el documento, los navegadores si deben tratarlo como un error de estructura,
pues el nmero de columnas especificadas con col y/o span no debe ser superior al que resulte de los
elementos td o th en la fila que ms elementos de estos contenga. El navegador tratar este error como
le parezca, observndose que Explorer, Opera y Safari slo presentan una celda, mientras que Firefox
presenta una celda pero el ancho de la tabla lo ajusta a la suma de anchos de las columnas
especificadas, es decir, al ancho total de <colgroup>.
1
Ejemplo <colgroup>
Aqu presentamos una tabla con dos grupos de columnas con un total de 6 columnas, tal como se deduce
de los comentarios del cdigo siguiente, nmero de columnas que coincide con las celdas de la fila.
<table border="1">
<colgroup>
<col span="2" width="50" />
<col width="100" />
</colgroup>
<colgroup>
<col />
<col span="2" style="background-color: yellow;" />
</colgroup>
<td>4</td><td>5</td><td>6</td></tr>
</table>

Resultado:
Dentro de cada columna especificada del grupo podemos tambin utilizar el atributo span para abarcar
varias columnas. Hay un total de 6 columnas.
1 2 3 4 5 6
4.1. Abarcar columnas de un grupo de columnas <colgroup span = "x">
El valor "x" es del tipo %Number que define un nmero entero con un valor por defecto de "1", permitiendo
un entero mayor que cero para especificar el nmero de columnas siguientes que abarca un grupo, teniendo
en cuenta lo siguiente
1. Si <colgroup> contiene uno o ms elementos <col> entonces debe ignorarse este atributo <span>
para el grupo.
2. En otro caso si el grupo no contiene elementos columna, puede suceder:
Que <colgroup> no contenga el atributo span, donde entonces cada grupo de columnas define
una columna.
Si <colgroup> contiene span con valor 1 o mayor, el grupo define ese nmero de columnas.
Ejemplo <colgroup span>
Un ejemplo que expone elementos <colgroup>, <col> y atributos span tanto para grupos como para
columnas.
En esta tabla....
<table border="1">
<colgroup span="2" width="100">
<col width="50" />
<col width="30" />
</colgroup>
<tr><td>1</td><td>2</td></tr>
</table>
Ahora el primer grupo....
<table border="1">
<colgroup style="background-color: lime;" />
<colgroup span="2" width="100" />
<colgroup>
<col span="2" width="50" />
</colgroup>
<td>4</td><td>5</td></tr>
</table>

Resultado:
En esta tabla se ignoran todos los atributos de <colgroup> pues el grupo contiene elementos <col>. Por
lo tanto deberan aparecer dos columnas con anchos de 50 y 30 pxeles, lo que se ejecuta correctamente
en los navegadores a excepcin de Firefox, que "le hace caso" a al ancho especificado en <colgroup> y
no a los de <col>.
1 2
Ahora el primer grupo define una nica columna pues no tiene el atributo span, el segundo grupo define 2
columnas abarcadas por su atributo span y el tercero incluye un elemento columna que abarca dos
columnas. El total de columnas definidos en la estructura (5) debe ser acorde con el definido en las celdas
de la fila. La primera columna tendr el ancho que ocupe el texto, las dos siguientes tendrn ancho de
100 pxeles y las dos ltimas de 50 pxeles. Todos los navegadores se comportan igual en este caso.
1 2 3 4 5
4.2. Ancho de las columnas de un grupo de columnas <colgroup width = "x">
El valor "x" es del tipo %MultiLength para indicar el ancho de la columna o de todas las que abarca con su
atributo span. Si el elemento <col> est includo en un grupo de columnas colgroup, el ancho declarado en
el elemento columna prevalece sobre el ancho del grupo de columnas al que pertenece. Esto se expone en
un ejemplo de <colgroup span>.
4.3. Alinear el contenido de las columnas de un grupo con respecto a un carcter
<colgroup char = "x">
especificar tambin el atributo <colgroup align> con su valor char. Funciona de forma igual a lo expuesto
en <col char>.
4.4. Separacin del eje de carcter <col charoff = "x">
primera aparicin del carcter de alineacin en cada lnea. Funciona como se expone en <col charoff>.
4.5. Alinear horizontalmente el contenido de las columnas de un grupo de columnas
<colgroup align = "x">
explica en el atributo <col char>. Funciona de la misma forma que lo expuesto en <col align>
4.6. Alinear verticalmente el contenido de las columnas de un grupo de columnas
<colgroup valign = "x">
contenido de las celdas en la parte superior, medio, inferior y con una lnea de base comn. Funciona de
forma igual que lo expuesto en <col valign>.
5. SECCIONES DE UNA TABLA: CABECERA, PIE Y CUERPO <thead>, <tfoot>, <tbody>
Alinear carcter (char) Separacin eje (charoff) Alinear horizontal (align) Alinear vertical (valign)
Recordemos la estructura de una tabla:
<!ELEMENT table
...
...

Las filas <tr> de una tabla con sus celdas pueden incluirse en una opcional cabecera de tabla thead, en un
pie opcional de tabla <tfoot> o en uno (obligatorio) o ms cuerpos de la tabla <tbody>. La cabecera y el
pie dotan a la tabla de una estructura para que el navegador maneje sus celdas de forma independiente
entre cabecera, pie y cuerpo. Por ejemplo, si se imprimen tablas largas, podra ser deseable repetir la
cabecera y el pie en todas las pginas. Se ha de tener en cuenta lo siguiente:
Si no se usa ningn tipo de seccin, las filas se consideran incluidas en un cuerpo implcito de la tabla
<tbody>.
En caso de usarse cabeceras y/o pies, deberan contener informacin sobre las columnas de la tabla,
mientras que el cuerpo debera contener slo las filas con los datos de la tabla. Adems en este caso
tambin sera obligatorio declarar el cuerpo <tbody>.
El orden de codificacin de las secciones ser obligatoriamente <thead><tfoot><tbody>. La razn de
declarar el pie antes del cuerpo es para cuando la tabla tiene un cuerpo muy largo, en cuyo caso el
navegador no tiene que esperar a recibir todo el cuerpo de datos para saber como es la estructura del
pie de tabla.
Si se declaran las tres secciones, deberan contener el mismo nmero de columnas.
Las secciones debe contener obligatoriamente una o ms filas <tr>.
Ejemplo <thead>, <tfoot>, <tbody>
Tenemos una tabla con las tres secciones. La cabecera la usamos para dar ttulo a los encabezados de
columnas, mientras que en el pie ponemos la suma de los valores. Los datos se encuentran
exclusivamente en los cuerpos de la tabla, pues se pueden declarar ms de uno. En el segundo cuerpo le
ponemos un color de fondo azul, que podra representar un segundo grupo de datos a resaltar.
<table border="1">
<col span="2" width="100" />
<thead>
<tr><th>Valor-1</th><th>Valor-2</th></tr>
</thead>
<tfoot align="right">
<tr><th>1105.9</th><th>22.2</th></tr>
</tfoot>
<tbody align="right">
<tr><td>126.0</td><td>2.5</td></tr>
<tr><td>880.4</td><td>12.6</td></tr>
</tbody>
<tbody align="right" style="background-color: aqua;">
<tr><td>99.5</td><td>7.1</td></tr>
</tbody>
</table>

Resultado:
Valor-1 Valor-2
1105.9 22.2
126.0 2.5
880.4 12.6
99.5 7.1
Todos los navegadores consultados se comportan igual, a excepcin de que Explorer ignora el atributo
align="right" para <tfoot>, dejando el texto centrado.
5.1. Alinear contenido de una seccin con respecto a un carcter
<thead char="x">, <tfoot char="x">, <tbody char="x">
especificar tambin el atributo <seccin align> con su valor char. Funciona de forma igual a lo expuesto
en <col char>.
5.2. Separacin del eje de carcter
<thead charoff="x">, <tfoot charoff="x">, <tbody charoff="x">
5.3. Alinear horizontalmente el contenido de una seccin
<thead align="x">, <tfoot align="x">, <tbody align="x">
explica en el atributo <col char>. Funciona como se expone en <col align>.
5.4. Alinear verticalmente el contenido de una seccin
<thead valign="x">, <tfoot valign="x">, <tbody valign="x">
contenido de las celdas en la parte superior, medio, inferior y con una lnea de base comn. Funciona como
se expone en <col valign>.
6. FILA DE UNA TABLA <tr>
Alinear carcter (char) Separacin eje de carcter (charoff) Alinear horizontal (align) Alinear vertical (valign)
La estructura de la tabla que afecta a filas es:
<!ELEMENT table
...
...
...

El elemento <tr> representa una fila con celdas <th>, <td>, unas u otras pero no mezcladas, siendo
obligatorio contener al menos una celda. Las filas han de estar contenidas en algunas de las secciones
<thead>, <tfoot> <tbody>, las cules han de contener cada una obligatoriamente al menos una fila.
En XHTML Transicional existe el atributo <tr bgcolor> para dotar de color de fondo a una fila, pero que
aqu no presentaremos pues puede sustituirse fcilmente con la propiedad de estilo {background-color},
como se observa en un ejemplo siguiente.
Ejemplo <tr>: Estilo CSS y filas de tablas
La estructura de una fila puede servir para dotarlas de estilo. En este ejemplo no queremos poner bordes a
las celdas pero s diferenciar unas filas de otras con un color de fondo. Las filas de la clase "azul" tiene un
estilo interno en la cabecera de este documento codificado con tr.azul {background-color: aqua; }.
El resto de estilo es local, tal como vemos en el cdigo:
<table style="border-collapse: collapse;">
<caption><b>GASTOS DEL AO</b></caption>
<col />
<col align="right" />
<tr style="border: green solid 1px;">
<th>Concepto</th><th>Importe</th></tr>
<tr><td>Comunicaciones</td><td>6.750,12<td></tr>
<tr class="azul">
<td>Material de oficina</td><td>3.005,97</td></tr>
<tr><td>Material de limpieza</td><td>1.999,87</td></tr>
<tr class="azul">
<td>Viajes</td><td>612,00</td></tr>
<tr><td>Gestoras</td><td>2.500,11</td></tr>
<tr class="azul">
<td>Impuestos</td><td>120,62</td></tr>
<tr style="border-bottom: green solid 1px;">
<td>Gastos varios</td><td>612,00</td></tr>
</table>

Resultado:
GASTOS DEL AO
Concepto Importe
Comunicaciones 6.750,12
Material de oficina 3.005,97
Material de limpieza1.999,87
Viajes 612,00
Gestoras 2.500,11
Impuestos 120,62
Gastos varios 612,00
Aqu se ve un claro ejemplo de la necesidad de alinear el texto por columnas. Slo Opera aplica el
alineado a la derecha que hemos puesto para la columna de Importe. Adems no es posible aplicar estilo
para alinear texto en columnas pues ningn navegador lo ejecuta, tal como expusimos en <col align>
sobre este aspecto.
6.1. Alinear contenido de una fila con respecto a un carcter <tr char = "x">
especificar tambin el atributo <tr align> con su valor char. Funciona de forma igual a lo expuesto en
<col char>.
6.2. Separacin del eje de carcter <tr charoff = "x">
6.3. Alinear horizontalmente el contenido de una fila <td align = "x">
Ejemplo <tr align>
Ejemplo de alineaciones en las filas. Explorer no lleva a cabo el justificado, aunque puede usarse la
propiedad {text-align} para ello.
<table border="1">
<tr align="left"><td>Izquierda</td></tr>
<tr align="center"><td>Centro</td></tr>
<tr align="right"><td>Derecha</td></tr>
<tr align="justify"><td>Justificado:....</td></tr>
</table>

Resultado:
Izquierda
Centro
Derecha
Justificado: Este enfoque presenta varias complicaciones, como los fallos de comunicacin temporales
que pueden hacer que un sitio parezca no disponible, haciendo que no se lleve a cabo la operacin de
escritura, pero cuando el enlace se restaura, el sitio no sabe que tiene que llevar a cabo operaciones de
reintegracin para ponerse al da con las operaciones de escritura perdidas. Adems si la red se
fragmenta puede que cada particin pase a actualizar el mismo elemento de datos, creyendo que los
6.4. Alinear verticalmente el contenido de una fila <td valign = "x">
se expone en <col valign>.
Ejemplo <tr valign>
Alineaciones verticales. La ltima columna contiene un retorno de carro para crear el espacio vertical
necesario con objeto de ver las alineaciones.
<table border="1">
<tr valign="top">
<td>top</td><td>1<br />2</td></tr>
<tr valign="middle">
<td>middle</td><td>1<br />2</td></tr>
<tr valign="bottom">
<td>bottom</td><td>1<br />2</td></tr>
<tr valign="baseline">
<td>baseline</td><td>1<br />2</td></tr>
</table>

Resultado:
top 1
2
middle
1
2
bottom
1
2
baseline 1
2
7. CELDAS CABECERA Y DE DATOS DE UNA TABLA <th>, <td>
Abarcar filas (rowspan) Abarcar columnas (colspan) Alinear carcter (char) Separacin eje de carcter (charoff)
Alinear horizontal (align) Alinear vertical (valign)
Recordemos nuevamente la estructura de una tabla:
<!ELEMENT table
<!ELEMENT th %Flow;>
<!ELEMENT td %Flow;>

Los elementos <th>, <td> representa celdas de cabecera (o de encabezados) y celdas de datos de una
tabla respectivamente. Son elementos de flujo del tipo %Flow, por lo que pueden contener tanto elementos
de bloque como de lnea. Las celdas van incluidas en elementos fila <tr>, pero en cada fila han de haber
una o ms celdas cabecera (<th>) o de datos (<td>). Es importante observar que la expresin del DTD
(th|td)+ para definir las celdas que contiene una fila significa que puede incluir tanto una o mas celdas de
cabecera o de datos, es decir, que pueden mezclarse dentro de una fila. Observe que esta expresin sera
diferente si pusiera (th+|td+), en cuyo caso no podran mezclarse en una fila (vea por ejmplo como se
declara (tbody+|tr+) para significar que, o bien se ponen filas sueltas, o bien se ponen cuerpos dentro de
una tabla, pero no ambos casos a la vez.
La nica diferencia entre ambos tipos de celdas es que a las de cabecera se les dota a su contenido de
texto en negrita as como centrado horizontal y vertical en la celda de forma predeterminada.
En XHTML estricto se definen algunos atributos que no sern desarrollados en este documento y cuyo uso
principal afecta a las celdas de cabecera <th> y que se restringue a medios no visuales (auditivos). Estos
atributos son los siguientes:
Abreviatura para las celdas de cabecera, abbr.
Lista de cabeceras, axis.
Lista de identificadores de celdas de cabecera, headers.
Campo de accin cubierto por las celdas de cabecera, scope.
En XHTML Transicional se indican algunos atributos desaprobados en la versin estricta y que tampoco
exponemos aqu, pues pueden usarse estilos tal como se comenta a continuacin. De todas formas vea los
estilos aplicables a tablas y sus elementos en estilo CSS y tablas XHTML.
height, ver estilo {height}.
width, ver estilo {width}.
bgcolor, ver estilo {background-color}.
nowrap, ver estilo {white-space} con su valor nowrap.
7.1. Abarcar varias filas <th rowspan="x">, <td rowspan="x">
Es un atributo con valor del tipo %Number que representa un nmero entero, con valor por defecto 1, para
especificar el nmero de filas que puede abarcarse desde una celda. El valor 0 indica que abarcar todas las
filas desde la actual hasta la ltima de la seccin (<thead>, <tfoot> <tbody>) donde est incluida la fila.
Ejemplo <th rowspan>, <td rowspan>
En esta tabla queremos abarcar las celdas (1,2) y (2,2), para lo cual ponemos rowspan="2" en la celda
(1,2) y, lo que es importante, no incluimos la celda (2,2).
<table border="1">
<tr><td>1,1</td><td rowspan="2">1,2</td><td>1,3</td>
</tr>
<tr><td>2,1</td><td>2,3</td></tr>
</table>

Resultado:
1,1
1,2
1,3
2,1 2,3
3,1 3,2 3,3
7.2. Abarcar varias columnas <th colspan="x">, <td colspan="x">
Es un atributo con valor del tipo %Number que representa un nmero entero, con valor por defecto 1, para
especificar el nmero de columnas que puede abarcarse desde una celda. El valor 0 indica que abarcar
todas las columnas desde la actual hasta la ltima del grupo de columnas (<colgroup>) donde est incluida
la celda.
Ejemplo <th colspan>, <td colspan>
En esta tabla queremos abarcar las celdas (2,1) y (2,2), para lo cual ponemos colspan="2" en la celda
(2,1) y, lo que es importante, no incluimos la celda (2,2).
<table border="1">
<tr><td colspan="2">2,1</td><td>2,3</td></tr>
</table>

Resultado:
1,1 1,2 1,3
2,1 2,3
3,1 3,2 3,3
Ejemplo <th colspan>, <td colspan>
En esta ejemplo abarcamos en filas y columnas un cuadro central con dos celdas de ancho y alto. Las
celdas abarcadas no deben aparecer en el cdigo.
<table border="1">
<tr><td>1,1</td><td>1,2</td><td>1,3</td>
<td>1,4</td></tr>
<tr><td>2,1</td><td rowspan="2" colspan="2">2,2</td>
<td>2,4</td></tr>
<tr><td>3,1</td><td>3,4</td></tr>
<tr><td>4,1</td><td>4,2</td><td>4,3</td>
<td>4,4</td></tr>
</table>

Resultado:
1,1 1,2 1,3 1,4
2,1
2,2
2,4
3,1 3,4
4,1 4,2 4,3 4,4
7.3. Alinear contenido de una celda con respecto a un carcter
<th char="x">, <td char="x">
especificar tambin el atributo <th/td align> con su valor char. Funciona igual que lo expuesto en <col
char>.
7.4. Separacin del eje de carcter <th charoff="x">, <td charoff="x">
7.5. Alinear horizontalmente el contenido de una celda <th align="x">, <td align="x">
Ejemplo <th align>, <td align>
El resultado de las diferentes combinaciones de alineaciones horizontal y verticales se muestra en este
ejemplo. La ltima columna tiene un retorno de carro para ampliar el espacio vertical de la fila y poder ver
el efecto de alineacin vertical. Vea como las celdas de cabecera en negrita (<th>) se centran tanto
vertical como horizontalmente por el navegador, no habiendo impedimiento en que tambin formen parte
de la primera columna. De hecho cualquier celda de la tabla puede ser de un tipo u otro.
<table border="1" width="100%">
<tr><th>Alineacin</th>
<th>superior</th><th>centro</th><th>inferior</th>
<th>X</th></tr>
<tr><th>izquierda</th>
<td valign="top" align="left">top,left</td>
<td valign="middle" align="left">middle,left</td>
<td valign="bottom" align="left">bottom,left</td>
<td>1<br />2</td></tr>
<tr><th>centro</th>
<td valign="top" align="center">top,center</td>
<td valign="middle" align="center">middle,center</td>
<td valign="bottom" align="center">bottom,center</td>
<td>1<br />2</td></tr>
<tr><th>derecha</th>
<td valign="top" align="right">top,right</td>
<td valign="middle" align="right">middle,right</td>
<td valign="bottom" align="right">bottom,right</td>
<td>1<br />2</td></tr>
</table>

Resultado:
Alineacin superior centro inferior X
izquierda
top,left
middle,left
bottom,left
1
2
centro
top,center
middle,center
bottom,center
1
2
derecha
top,right
middle,right
bottom,right
1
2
7.6. Alinear verticalmente el contenido de una celda <th valign="x">, <td valign="x">
se expone en <col valign>. En <th/td align> se expone un ejemplo conjunto con alineaciones verticales
y horizontales de las celdas.

XHTML 1 Tablas

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

XHTML 1 Tablas

Încărcat de

Drepturi de autor:

Formate disponibile

11/7/2014 XHTML 1.

S-ar putea să vă placă și