Índice
O modelo de tabelas da HTML permite que os autores distribuan os dados --texto, texto pré-formatado, imaxes, vínculos, formulários, campos de formulários, outras tabelas, etc. -- en filas e colunas de celas.
Cada tabela pode ter unha lexenda asociada (ver o elemento CAPTION ) que fornece unha descrición breve do obxectivo da tabela. Tamén se pode fornecer unha descrición máis longa (mediante o atributo summary ) para que utilice a xente que use axentes de usuário que usen síntese de voz ou braille.
As filas de tabela poden-se agrupar nas seccións cabezallo, pé e corpo (mediante os elementos THEAD , TFOOT e TBODY , respectivamente). Os grupos de filas portan información estrutural adicional e os axentes de usuários poden-na mostrar de modo que se resalte a sua estrutura. Os axentes de usuário poden explotar a división entre cabezallo/corpo/pé para permitir o desprazamento de seccións de corpo independentemente das seccións de cabezallo e pé. Cando se imprimen tabelas longas, a información de cabezallo e pé pode-se repetir en cada unha das páxinas que conteña dados da tabela.
Os autores poden tamén agrupar colunas para fornecer información estrutural adicional que os axentes de usuário poden explotar. Ademáis, os autores poden declarar propriedades de coluna no início dunha definición de tabela (mediante os elementos COLGROUP e COL ) de modo que os axentes de usuário podan mostrar a tabela incrementalmente en vez de teren que esperar a que cheguen todos os dados da tabela antes de mostrá-los.
Dado que as celas de tabela poden conter tanto información de "cabezallo" (ver o elemento TH ) como de "dados" (ver o elemento TD , as celas poden-se extender por várias filas e colunas. O modelo de tabelas da HTML 4 permite que os autores etiqueten cada cela para que os axentes de usuário non visuais lle podan comunicar ao usuário información de cabezallo sobre a cela máis facilmente. Estes mecanismos non só axudan moito aos usuários con dificuldades visuais, fan posíbel que os navegadores inalámbricos multi-modais con capacidades gráficas limitadas (p.ex., "buscas" e telemóbeis que se poden conectar à web) podan usar as tabelas.
As tabelas non deberian ser usadas meramente para dispor o conteúdo do documento, xa que isto pode apresentar problemas ao mostrá-las en médios non visuais. Ademáis, ao se usaren con gráficos, estas tabelas poden obrigar aos usuários a desprazar-se horizontalmente para ver unha tabela deseñada nun sistema cunha pantalla máis grande. Para reducir estes problemas, os autores deberian usar follas de estilo para controlar o deseño en vez de tabelas.
Nota. Esta especificación inclui información máis detallada sobre tabelas nas seccións sobre consideracións sobre o deseño de tabelas e cuestións de implementación .
Velaqui unha tabela simples que ilustra algunhas das características do modelo de tabelas da HTML. A seguinte definición de tabela:
<TABLE border="1"
summary="Esta tabela mostra algunhas estatísticas sobre
moscas da fruta: altura e peso médios e percentaxe
con ollos vermellos (tanto para machos como fémeas).">
<CAPTION><EM>Tabela de proba con celas unidas</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Média
<TH rowspan="2">Ollos<BR>vermellos
<TR><TH>altura<TH>peso
<TR><TH>Machos<TD>1.9<TD>0.003<TD>40%
<TR><TH>Fémeas<TD>1.7<TD>0.002<TD>43%
</TABLE>
poderia-se mostrar asi nun dispositivo tty:
Tabela de proba con celas unidas
/-----------------------------------------\
| | Média | Ollos |
| |-------------------| vermellos|
| | altura | peso | |
|-----------------------------------------|
| Machos | 1.9 | 0.003 | 40% |
|-----------------------------------------|
| Fémeass | 1.7 | 0.002 | 43% |
\-----------------------------------------/
ou asi nun axente de usuário gráfico:
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ATTLIST TABLE -- elemento de tabela --
%attrs; -- %coreattrs, %i18n, %events --
summary %Text; #IMPLIED -- propósito/estrutura para saída de voz --
width %Length; #IMPLIED -- ancho da tabela --
border %Pixels; #IMPLIED -- controla o ancho da moldura arredor da tabela --
frame %TFrame; #IMPLIED -- que partes mostrar da moldura --
rules %TRules; #IMPLIED -- liñas entre filas e colunas --
cellspacing %Length; #IMPLIED -- espaciado entre as celas --
cellpadding %Length; #IMPLIED -- espaciado dentro das celas --
>
Etiqueta inicial: requerida, Etiqueta final: requerida
Definicións dos atributos
Atributos que se definen noutro lugar
O elemento TABLE contén todos os outros elementos que especifican lexenda, filas, conteúdo e formato.
A seguinte lista informativa decrebe que operacións poden realizar os axentes de usuário ao mostrar unha tabela:
O modelo de tabela da HTML deseñou-se de xeito que, coa axuda do autor, os axentes de usuário poidan mostrar as tabelas incrementalmente (isto é, segundo van chegando as filas da tabela) en vez de ter que agardar a que cheguen todos os dados antes de mostrá-los.
Para que un axente de usuário formate unha tabela nunha pasada, os autores deben-lle dicer ao axente de usuário:
Máis en concreto, un axente de usuário pode mostrar unha tabela nunha única pasada cando os anchos das colunas se especifiquen usando unha combinación de elementos COLGROUP e COL . Se algunha das colunas se especifica en termos relativos ou de percentaxes (ver a sección sobre o cálculo do ancho das colunas ), os autores tamén deben especificar o ancho da tabela mesma.
A direccionalidade da tabela é, ora a direccionalidade herdada (por omisión é de esquerda a direita), ora a especificada polo atributo dir do elemento TABLE .
Nunha tabela de esquerda a direita, a coluna cero está na parte esquerda e a fila cero está na parte superior. Nunha tabela de direita a esquerda, a coluna cero está na parte direita e a fila cero está na parte superior.
Cando un axente de usuário lle asigna celas extra a unha fila (ver a sección sobre cálculo do número de colunas dunha tabela ), adicionan-se celas de fila extra à direita da tabela en tabelas de esquerda a direita e à esquerda en tabelas de direita a esquerda.
Observe-se que TABLE é o único elemento no que dir invirte a orde visual das colunas; unha fila de tabela única () ou un grupo de colunas () non se poden invertir independentemente.
Cando se indica para o elemento TABLE , o atributo dir tamén afecta à dirección do texto dentro das celas da tabela (xa que o atributo dir é herdado polos elementos de nível de bloco).
Para especificar unha tabela de direita a esquerda, seleccione o atributo dir como segue:
<TABLE dir="RTL">
...resto da tabela... </TABLE>
A dirección do texto en celas individuais pode-se trocar indicando-o no atributo dir nun elemento que define a cela. Consulte a sección sobre texto bidireccional para máis información sobre cuestións de dirección de texto.
<!ELEMENT CAPTION - - (%inline;)* -- lexenda de tabela -->
<!ATTLIST CAPTION
%attrs; -- %coreattrs, %i18n, %events --
>
Etiqueta inicial: requerida, Etiqueta final: requerida
Definicións dos atributos
Atributos que se definen noutro lugar
Se está presente, o texto do elemento CAPTION deberia descreber a natureza da tabela. O elemento CAPTION só se permite imediatamente depóis da etiqueta inicial TABLE . Un elemento TABLE só pode conter un elemento CAPTION .
Os axentes de usuário visuais permiten que as persoas con visión comprendan rapidamente a estrutura da tabela a partir dos cabezallos, asi como da lexenda. Unha consecuéncia disto é que as lexendas serán con frecuéncia inapropriadas como resumo do obxectivo e estrutura da tabela desde a perspectiva de quen use axentes de usuário non visuais.
Os autores, polo tanto, deberian ter cuidado de fornecer información adicional que resuma o obxectivo e a estrutura da tabela usando o atributo summary do elemento TABLE . Isto é especialmente importante en tabelas sen lexendas. Os exemplos que se dan máis abaixo ilustran o uso do atributo summary.
Os axentes de usuário visuais deberian evitar recortar calquer parte da tabela, incluída a lexenda, a non ser que fornezan un modo de aceder a todas as partes, p.ex., mediante o desprazamento horizontal ou vertical. Recomendamos que o texto da lexenda se construa co mesmo ancho que a tabela (Ver tamén a sección sobre algoritmos de representación recomendados .)
Etiqueta inicial: requerida, Etiqueta final: opcional
<!ELEMENT TBODY O O (TR)+ -- corpo da tabela -->
Etiqueta inicial: opcional, Etiqueta final: opcional
<!ATTLIST (THEAD|TBODY|TFOOT) -- sección de tabela --
%attrs; -- %coreattrs, %i18n, %events --
%cellhalign; -- aliñamento horizonal nas celas --
%cellvalign; -- aliñamento vertical nas celas --
>
Atributos que se definen noutro lugar
As filas das tabelas poden-se agrupar en cabezallo de tabela, pé de tabela e unha ou máis seccións de corpo de tabela usando os elementos THEAD , TFOOT e TBODY respectivamente. Esta división permite que os axentes de usuário aceiten o deslocamento de corpos de tabela independentemente do cabezallo e o pé da tabela. Cando se impriman tabelas longas, a información do cabezallo e pé de tabela pode-se repetir en cada páxina que conteña dados de tabela.
O cabezallo e pé de tabela deberian conter información sobre as colunas da tabela. O corpo da tabela deberia conter filas de dados de tabela.
De estaren presentes, cada elemento THEAD , TFOOT e TBODY contén un grupo de filas. Cada grupo debe conter polo menos unha fila, definida co elemento TR .
Este exemplo ilustra a orde e estrutura de cabezallos, pés e corpos de tabelas.
<TABLE>
<THEAD>
<TR> ...información de cabezallo... </THEAD> <TFOOT> <TR> ...información de pé.. </TFOOT> <TBODY> <TR> ...primeira fila de dados do bloco un... <TR> ...segunda fila de dados do bloco un... </TBODY> <TBODY> <TR> ...primeira fila de dados do bloco dous... <TR> ...segunda fila de dados do bloco dous... <TR> ...terceira fila de dados do bloco dous... </TBODY> </TABLE>
TFOOT debe aparecer antes de TBODY dentro dunha definición de TABLE para que os axentes de usuário podan mostrar o pé antes de receberen todas as (potencialmente numerosas) filas de dadas. O que segue resume que etiquetas se requiren e cais se poden omitir:
Os axentes de usuário conformes deben obedecer estas regras por razóns de compatibilidade para trás.
A tabela do exemplo anterior poderia-se abreviar retirando algunhas etiquetas finais, como en:
<TABLE>
<THEAD>
<TR> ...información do cabezallo... <TFOOT> <TR> ...información do pé... <TBODY> <TR> ...primeira fila de dados do bloco un... <TR> ...segunda fila de dados do bloco un... <TBODY> <TR> ...primeira fila de dados do bloco dous... <TR> ...segunda fila de dados do bloco dous... <TR> ...terceira fila de dados do bloco dous... </TABLE>
As seccións THEAD , TFOOT e TBODY deben conter o mesmo número de colunas.
Os grupos de colunas permiten que os autores creen divisións estruturais dentro dunha tabela. Os autores poden resaltar esta estrutura mediante follas de estilo ou atributos HTML (p.ex., o atributo rules do elemento TABLE ). Para un exemplo da apresentación visual de grupos de colunas, consulte a tabela de exemplo .
Unha tabela pode, ben conter un único grupo de colunas implícito (non hai elemento COLGROUP que delimite a coluna), ben calquer número de grupos de colunas explícitos (cada un delimitado por un elemento COLGROUP ).
O elemento COL permite que os autores compartillen aributos entre várias colunas sen implicar nengun agrupamento estrutural. A "extensión" ("span") do elemento COL é o número de colunas que compartillara os atributos do elemento.
<!ELEMENT COLGROUP - O (COL)* -- grupo de colunas de tabela -->
<!ATTLIST COLGROUP
%attrs; -- %coreattrs, %i18n, %events --
span NUMBER 1 -- número de colunas nun grupo por omisión --
width %MultiLength; #IMPLIED -- ancho por omisión de colunas englobadas --
%cellhalign; -- aliñamento horizontal das celas --
%cellvalign; -- aliñamento vertical das celas --
>
Etiqueta inicial: requerida, Etiqueta final: opcional
Definicións dos atributos
Os axentes de usuário deben ignorar este atributo se o elemento COLGROUP contén un ou máis elementos COL .
Este atributo especifica un ancho por omisión para cada coluna do grupo de colunas actual. Ademáis dos valores en píxeis, percentaxes e valores relativos padróns, este atributo permite a forma especial "0*" (cero asterisco), que significa que o ancho de cada coluna do grupo deberia ser o ancho mínimo para conter os conteúdos da coluna. Isto implica que se deban coñecer os conteúdos inteiros dunha coluna antes de que se poda computar correctamente o seu ancho. Os autores deberian ter en conta que especificar "0*" evitará que os axentes de usuário mostren a tabela incrementalmente.
Este atributo anula-se en calquer coluna no grupo de colunas cuxo ancho se especifique mediante un elemento COL .
Atributos que se definen noutro lugar
O elemento COLGROUP crea un grupo de colunas explícito. O número de colunas no grupo de colunas pode-se especificar de duas maneiras, mutualmente excluíntes:
A avantaxe de usar o atributo span é que os autores poden agrupar información sobre anchos de colunas. Asi, se unha tabela contén cuarenta colunas, cada unha delas dun ancho de 20 píxeis, é máis fácil escreber:
<COLGROUP span="40" width="20">
</COLGROUP>
que:
<COLGROUP>
<COL width="20">
<COL width="20">
...até un total de 40 elementos COL... </COLGROUP>
Cando sexa necesário individualizar unha coluna (p.ex., para información de estilo, para especificar información de ancho.) dentro dun grupo, os autores deben identificar esa coluna cun elemento COL . Asi, para aplicar unha información de estilo especial à última coluna da tabela anterior, individualizamo-la como segue:
<COLGROUP width="20">
<COL span="39">
<COL id="formata-me-especialmente">
</COLGROUP>
O atributo width do elemento COLGROUP herdan-no as 40 colunas. O primeiro elemento COL refere-se às primeiras 39 colunas (sen lles facer nada especial) e o segundo asinga-lle un valor id à cuadraxéxima coluna para que as follas de estilo se podan referir a ela.
A tabela do exemplo seguinte contén dous grupos de colunas. A primeira coluna contén 10 colunas e o segundo 5 colunas. O ancho por omisión de cada coluna do primeiro grupo de colunas é 50 píxeis. O ancho de cada coluna no segundo grupo de colunas será o mínimo requerido para esa coluna.
<TABLE>
<COLGROUP span="10" width="50">
<COLGROUP span="5" width="0*">
<THEAD>
<TR><TD> ... </TABLE>
<!ELEMENT COL - O EMPTY -- coluna de tabela -->
<!ATTLIST COL -- grupos de colunas e propriedades --
%attrs; -- %coreattrs, %i18n, %events --
span NUMBER 1 -- Os atributos COL afectan N colunas --
width %MultiLength; #IMPLIED -- especificación do ancho de coluna --
%cellhalign; -- aliñamento horizontal en celas --
%cellvalign; -- aliñamento vertical en celas --
>
Etiqueta inicial: requerida , Etiqueta final: proibida
Definicións dos atributos
Atributos que se definen noutro lugar
O elemento COL permite que os autores agrupen as especificacións de atributos das colunas das tabelas. COL non agrupa as colunas xuntas estruturalmente -- ese é o papel do elemento COLGROUP . Os elementos COL están vacios e serven só como apoio para os atributos. Poden aparecer dentro ou fora dun grupo de colunas excplícito (isto é, un elemento COLGROUP ).
O atributo width de COL refere-se ao ancho de cada coluna na extensión do elemento.
Hai duas maneiras de determinar o número de colunas dunha tabela (en orde de prioridade):
É un erro que unha tabela conteña elementos COLGROUP ou COL e que os dous cálculos non resulten no mesmo número de colunas.
Unha vez que o axente de usuário calcule o número de colunas da tabela, pode-as agrupar en grupos de colunas.
Por exemplo, por cada unha das tabelas seguintes, os dous métodos de cálculo de colunas resultan en tres colunas. As tres primeiras tabelas poden-se mostrar incrementalmente.
<TABLE>
<COLGROUP span="3"></COLGROUP>
<TR><TD> ... ...filas... </TABLE> <TABLE> <COLGROUP> <COL> <COL span="2"> </COLGROUP> <TR><TD> ... ...filas... </TABLE> <TABLE> <COLGROUP> <COL> </COLGROUP> <COLGROUP span="2"> <TR><TD> ... ...filas... </TABLE> <TABLE> <TR> <TD><TD><TD> </TR> </TABLE>
Os autores poden especificar os anchos das colunas de tres maneiras:
Porén, se a tabela non ten un ancho fixo, os axentes de usuário deben receber todos os dados da tabela antes de que poidan determinar o espazo horizontal que require a tabela. Só entón se pode asignar ese espazo a colunas proporcionais.
Se un autor non especifica información sobre o ancho dunha coluna, un axente de usuário pode non ser capaz de formatar a tabela incrementalmente dado que debe agardar a que chegue a coluna de dados inteira para poder asignar o ancho apropriado.
Se os anchos das colunas resultan demasiados estreitos para os conteúdos dunha cela de tabela determinada, os axentes de usuário poden escoller redeseñar a tabela.
A tabela deste exemplo contén seis colunas. A primeira non pertence a un grupo de colunas explícito. As tres seguintes pertencen ao primeiro grupo de colunas explícito e as duas últimas pertencen ao segundo grupo de colunas explícito. Esta tabela non se pode formatar incrementalmente dado que contén especificacións de ancho de coluna proporcionais e nengun valor para o atributo width do elemento TABLE .
Unha vez que o axente de usuário (visual) recebeu os dados da tabela, o axente de usuário asignará o espazo como segue: Primeiro, o axente de usuário asignara-lle 30 píxeis às colunas un e dous. Depóis, reservará-se o espazo mínimo requerido pola terceira coluna. O espazo horizontal restante dividirá-se en seis porcións iguais (dado que 2* + 1* + 3* = 6 porcións). A coluna catro (2*) receberá duas desas porcións, a coluna cinco (1*) receberá unha e a coluna seis (3*) receberá tres.
<TABLE>
<COLGROUP>
<COL width="30">
<COLGROUP>
<COL width="30">
<COL width="0*">
<COL width="2*">
<COLGROUP align="center">
<COL width="1*">
<COL width="3*" align="char" char=":">
<THEAD>
<TR><TD> ... ...filas... </TABLE>
Indicamos que o atributo align do terceiro grupo de colunas sexa "center" (centrado). Todas as celas de calquer coluna deste grupo herdarán este valor, mais poden-no anular. Con efeito, o COL final é o que fai, ao especificar que cada cela da coluna que governa se aliñe no carácter ":".
Na seguinte tabela, as especificacións de ancho de coluna permiten que o axente de usuário fomate a tabela incrementalmente:
<TABLE width="200">
<COLGROUP span="10" width="15">
<COLGROUP width="*">
<COL id="penultima-coluna">
<COL id="ultima-coluna">
<THEAD>
<TR><TD> ... ...filas... </TABLE>
As primeiras dez colunas terán 15 píxeis de ancho cada unha. Cada unha das duas últimas colunas receberá a metade dos 50 píxeis restantes. Observe-se que os elementos COL aparecen só para que se poda especificar un valor id para as duas últimas colunas.
Nota. Ainda que o atributo width no elemento TABLE non está desaprovado, recomenda-se-lles aos autores que usen follas de estilo para especificar anchos de colunas.
<!ELEMENT TR - O (TH|TD)+ -- fila de tabela -->
<!ATTLIST TR -- fila de tabela --
%attrs; -- %coreattrs, %i18n, %events --
%cellhalign; -- aliñamento horizontal nas celas --
%cellvalign; -- aliñamento vertical nas celas --
>
Etiqueta inicial: requerida, Etiqueta final: opcional
Atributos que se definen noutro lugar
Os elementos TR actuan como contentores dunha fila de celas de tabela. Pode-se omitir a etiqueta final.
Esta tabela de exemplo contén tres filas, cada unha iniciada co elemento TR :
<TABLE summary="Esta tabela mostra o número de tazas
de café consumidas por cada senador, o tipo
de café (descafeinado ou normal), e se
se tomaron con azúcar.">
<CAPTION>Tazas de café consumidas por cada senador</CAPTION>
<TR> ...Fila de cabezallo... <TR> ...Primeira fila de dados... <TR> ...Segunda fila de dados... ...resto da tabela... </TABLE>
<!ELEMENT (TH|TD) - O (%flow;)* -- cela de cabezallo de tabela, cela de dados de tabela -->
<!-- O rango é máis simple que o atributo de cabezallos das tabelas normais -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">
<!-- TH é para cabezallos, TD para dados, mais para celas que se usen como ambos, use-se TD -->
<!ATTLIST (TH|TD) -- cela de cabezallo ou de dados --
%attrs; -- %coreattrs, %i18n, %events --
abbr %Text; #IMPLIED -- abreviatura para cela de cabezallo --
axis CDATA #IMPLIED -- lista separada por vírgulas de cabezallos relacionados--
headers IDREFS #IMPLIED -- lista de id para celas de cabezallo --
scope %Scope; #IMPLIED -- rango coberto polas celas de cabezallo --
rowspan NUMBER 1 -- número de filas polas que se extende unha cela --
colspan NUMBER 1 -- número de colunas polas que se extende unha cela --
%cellhalign; -- aliñamento horizontal nas celas --
%cellvalign; -- aliñamento vertical nas celas --
>
Etiqueta incicial: requerida, Etiqueta final: opcional
Definicións dos atributos
Atributos que se definen noutro lugar
As celas de tabelas poden conter dous tipos de información:
información de cabezallo e
dados.
Esta distinción permite que os axentes de usuário
mostren as celas de cabezallo e de dados de maneira distinta, mesmo na
auséncia de follas de estilo. Por exemplo, os axentes de usuário
visuais poden mostrar o texto da cela de cabezallo en negrita. Os sintetizadores
de voz poden mostrar a información de cabezallo cunha inflexión
do ton de voz distinta
O elemento TH define unha cela que contén información de cabezallo. Os axentes de usuário dispoñen de duas informacións de cabezallo: os conteúdos do elemento TH e o valor do atributo abbr . Os axentes de usuário deben mostrar tanto os conteúdos da cela ou o valor do atributo abbr . Para os médios visuais, este último pode ser apropriado cando non hai espazo dabondo para mostrar os conteúdos inteiros da cela. Para os médios non visuais, pode-se usar abbr para os cabezallos de tabela cando estes se mostran xunto cos conteúdos das celas aos que se aplican.
Os atributos headers e scope tamén permiten que os autores axuden aos axentes de usuário non visuais a procesaren a información de cabezallo. Consulte a sección sobre etiquetaxe de celas para axentes de usuário non visuais para máis información e exemplos.
O elemento TD define unha cela que contén dados.
As celas poden estar vacias (isto é, non conteren dados).
Por exemplo, a tabela seguinte contén catro colunas de tabela, cada unha encabezada por unha descrición da coluna.
<TABLE summary="Esta tabela mostra o número de tazas
de café consumidas por cada senador, o tipo
de café (descafeinado ou normal), e se
se tomaron con azúcar.">
<CAPTION>Tazas de café consumidas por cada senador</CAPTION>
<TR>
<TH>Nome</TH>
<TH>Tazas</TH>
<TH>Tipo de café</TH>
<TH>Azúar?</TH>
<TR>
<TD>T. Sexton</TD>
<TD>10</TD>
<TD>Expreso</TD>
<TD>Non</TD>
<TR>
<TD>J. Dinnen</TD>
<TD>5</TD>
<TD>Descafeinado</TD>
<TD>Si</TD>
</TABLE>
Un axente de usuário nun dispositivo tty poderia-o mostrar asi:
Nome Tazas Tipo de café Azúcar? T. Sexton 10 Expreso Si J. Dinnen 5 Descafeinado Non
As celas poden-se extender por várias filas ou colunas. O número de filas ou colunas polas que se extende unha cela indica-se cos atributos rowspan e colspan dos elementos TH e TD .
Nesta definición de tabela, especificamos que a célula da cuarta fila, segunda coluna, deberia-se extender por un total de tres colunas, incluída a coluna actual.
<TABLE borde="1">
<CAPTION>Tazas de té consumidas por cada senador</CAPTION>
<TR><TH>Nome<TH>Tazas<TH>Tipo de café<TH>Azúcar?
<TR><TD>T. Sexton<TD>10<TD>Expreso<TD>Non
<TR><TD>J. Dinnen<TD>5<TD>Descafeinado<TD>Si
<TR><TD>A. Soria<TD colspan="3"><em>Non disponíbel</em>
</TABLE>
Esta tabela podia ser mostrada por un axente visual nun dispositivo tty asi:
Tazas de café consumidas por cada senador
----------------------------------------
| Nome |Tazas|Tipo de café |Azúcar?|
----------------------------------------
|T. Sexton|10 |Expreso |Non |
----------------------------------------
|J. Dinnen|5 |Descafeinado |Si |
----------------------------------------
|A. Soria |Non disponíbel |
----------------------------------------
O exemplo seguinte ilustra (con axuda dos bordes de tabela) como as definicións de celas que se extenden por máis de unha fila ou coluna afectan à definición de celas posteriores. Considere a seguinte definición de tabela:
<TABLE border="1">
<TR><TD>1 <TD rowspan="2">2 <TD>3
<TR><TD>4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>
Segundo a cela "2" se expande pola primeira e segunda filas, a definición da segunda fila terá isto en conta. Asi, o segundo TD da segunda fila en realidade define a terceira cela da fila. Visualmente, a tabela poderia-se mostrar asi nun dispositivo tty:
-------------
| 1 | 2 | 3 |
----| |----
| 4 | | 6 |
----|---|----
| 7 | 8 | 9 |
-------------
mentres que un axente de usuário gráfico poderia-o mostrar asi:
Observe-se que se o TD que define a cela "6" se omitise, o axente de usuário teria que ter adicionado unha cela vacia extra para completar a fila.
Da mesma maneira, na seguinte definición de tabela:
<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD colspan="2">4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>
a cela "4" extende-se por duas colunas, de xeito que o segundo TD da fila en realidade define a terceira cela ("6"):
-------------
| 1 | 2 | 3 |
--------|----
| 4 | 6 |
--------|----
| 7 | 8 | 9 |
-------------
Un axente de usuário gráfico poderia-o mostrar asi:
A definición de celas que se sobrepoñen é un erro. Os axentes de usuário poden variar na maneira de trataren este erro (p.ex., pode variar a visualización).
O seguinte exemplo ilegal ilustra como se poderian crear celas que se sobrepoñan. Nesta tabela, a cela "5" extende-se por duas filas e a cela "7" extende-se por duas colunas, de xeito que hai unha sobreposición na cela entre "7" e "9":
<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD>4 <TD rowspan="2">5 <TD>6
<TR><TD colspan="2">7 <TD>9
</TABLE>
Nota. As seccións seguintes descreben os atributos de tabelas HTML relacionadas co seu formato visual. Cando se publicou esta especificación por primeira vez en 1997, [CSS1] non oferecia os mecanismos para controlar todos os aspeitos de formato de tabelas visual. Desde entón [CSS2] acrescentaron-se propriedades que permiten o formato visual de tabelas.
HTML 4 inclui mecanismos para controlar:
Os atributos seguintes afectan à moldura exterior da tabela e as liñas internas.
Definicións de atributos
Para axudar a distinguir entre as celas dunha tabela, podemos asinalar o atributo border do elemento TABLE . Considere-se o exemplo anterior:
<TABLE border="1"
summary="Esta tabela mostra o número de tazas
de café consumidas por cada senador, o tipo
de café (descafeinado ou normal), e se
se tomaron con azúcar.">
<CAPTION>Tazas de café consumidas por cada senador</CAPTION>
<TR>
<TH>Nome</TH>
<TH>Tazas</TH>
<TH>Tipo de café</TH>
<TH>Azúcar?</TH>
<TR>
<TD>T. Sexton</TD>
<TD>10</TD>
<TD>Expreso</TD>
<TD>Non</TD>
<TR>
<TD>J. Dinnen</TD>
<TD>5</TD>
<TD>Descafeinado</TD>
<TD>Si</TD>
</TABLE>
No exemplo seguinte, o axente de usuário deberia mostrar bordos de cinco pontos de ancho nos lados esquerdo e direito da tabela, con liñas trazadas entre cada coluna.
<TABLE border="5" frame="vsides" rules="cols">
<TR> <TD>1 <TD>2 <TD>3
<TR> <TD>4 <TD>5 <TD>6
<TR> <TD>7 <TD>8 <TD>9
</TABLE>
Os axentes de usuário deberian observar o seguinte por compatibilidade para trás.
Por exemplo, as definicións seguintes son equivalentes:
<TABLE border="2">
<TABLE border="2" frame="border" rules="all">
asi como as seguintes:
<TABLE border>
<TABLE frame="border" rules="all">
Nota. O atributo border tamén define o comportamento do bordo para os elementos OBJECT e IMG , mais toma un valor diferente para eses elementos.
Poden-se asignar os seguintes atributos para diferentes elementos da tabela (ver as suas definicións).
<!-- atributos de aliñamento horizonal para os conteúdos das celas -->
<!ENTITY % cellhalign
"align (left|center|right|justify|char) #IMPLIED
char %Character; #IMPLIED -- carácter de aliñamento, p.ex.char=':' --
charoff %Length; #IMPLIED -- distáncia ao carácter de aliñamento --"
>
<!-- atributos de aliñamento vertical para os conteúdos das celas -->
<!ENTITY % cellvalign
"valign (top|middle|bottom|baseline) #IMPLIED"
>
Definicións dos atributos
Cando se usa charoff para indicar a distáncia a un carácter de aliñamento, a dirección da distáncia determina-se pola dirección do texto actual (indicada polo atributo dir ) En textos de esquerda a direita (por omisión), a distáncia é desde a marxe esquerda. En textos de direita a esquerda, a distáncia é desde a marxe direita. Os axentes de usuário non teñen por que aceitar este atributo.
A tabela deste exemplo aliña unha fila de valores de moedas ao longo do carácter de decimais. Indicamos que o carácter de decimais será "," explicitamente.
<TABLE border="1">
<COLGROUP>
<COL><COL align="char" char=",">
<THEAD>
<TR><TH>Verdura <TH>Custo por quilo
<TBODY>
<TR><TD>Leitugas <TD>€1
<TR><TD>Cenoiras <TD>€10,50
<TR><TD>Nabos <TD>€100,30
</TABLE>
A tabela formatada pode-se parecer ao seguinte:
-----------------------------
| Verdura |Custo por quilo|
|-----------|---------------|
|Leituga | €1 |
|-----------|---------------|
|Cenoiras | €10,50 |
|-----------|---------------|
|Nabos | €100,30 |
-----------------------------
Non se define o comportamento do axente de usuário cando os conteúdos dunha cela conteñen máis de un carácter de aliñamento especificado con char e os conteúdos saltan de liña. Os autores, polo tanto, deberian ter coidado co seu uso de char .
Nota. Os axentes de usuário visuais normalmente mostran os elementos TH centrados verticalmente e horizontalmente dentro da cela en negrita.
O aliñamento dos conteúdos da cela pode-se especificar cela a cela ou ser herdado dos elementos que as engloban, tais como a fila, a coluna ou a tabela mesma.
A orde de precedéncia (de maior a menor) dos atributos align , char e charoff é a seguinte:
A orde de precedéncia (de maior a menor) do atributo valign (asi como dos outros atributos herdados lang , dir , e style ) é o seguinte:
Ademáis, ao mostrar celas, o aliñamento horizontal determina-se por colunas de preferéncia às filas, mentres que no aliñamento vertical, as filas teñen preferéncia sobre as colunas.
O aliñamento por omisión das celas depende do axente de usuário. Porén, os axentes de usuário deberian substituir o atributo por omisión para a direccionalidade actual (isto é, non simplesmente "esquerda" para todos os casos).
Os axentes de usuário que non aceitan o valor "xustificar" do atributo align deberian usar no seu lugar o valor da direccionalidade herdada.
Definicions dos atributos
Estes dous atributos controlan o espaciado entre e dentro das celas. A seguinte ilustración explican como se relacionan:
No exemplo seguinte, o atributo cellspacing ("espaciado de cela") especifica que as celas deberian estar separadas unha de otura e da moldura da tabela por vinte píxeis. O atributo cellpadding ("recheo de cela") especifica que a marxe superior da cela e a marxe inferior da cela estexan separadas dos conteúdos da cela ("cell content") por un 10% do espazo vertical disponíbel (sendo o total 20%). De maneira semellante, a marxe esquerda da cela e a marxe direita da cela estarán cada unha separadas dos conteúdos da cela por un 10% do espazo horizontal disponíbel (sendo o total 20%).
<TABLE cellspacing="20" cellpadding="20%">
<TR> <TD>Dados1 <TD>Dados2 <TD>Dados3
</TABLE>
Se unha tabela ou coluna dadas teñen un ancho fixo, cellspacing e cellpadding poden esixir máis espazo que o asignado. Os axentes de usuário poden-lles dar a estes elementos precedéncia sobre o atributo width ("ancho") cando se dá un conflito, mais non se lles esixe.
Os axentes de usuário non visuais tais e como os sintetizadores de voz e os dispositivos baseados en braille poden usar os seguintes atributos de elementos TD e TH para mostrar as celas das tabelas máis intuitivamente:
No exemplo seguinte, asignamos-lle información de cabezallo a celas indicando o atributo headers . Cada cela da mesma coluna refere-se à mesma cela de cabezallo (mediante o atributo id ).
<TABLE border="1"
summary="Esta tabela mostra o número de tazas
de café consumidas por cada senador, o tipo
de café (descafeinado ou normal), e se
se tomaron con azúcar.">
<CAPTION>Tazas de café consumidas por cada senador</CAPTION>
<TR>
<TH id="t1">Nome</TH>
<TH id="t2">Tazas</TH>
<TH id="t3" abbr="Tipo">Tipo de café</TH>
<TH id="t4">Azúcar?</TH>
<TR>
<TD headers="t1">T. Sexton</TD>
<TD headers="t2">10</TD>
<TD headers="t3">Expreso</TD>
<TD headers="t4">Non</TD>
<TR>
<TD headers="t1">J. Dinnen</TD>
<TD headers="t2">5</TD>
<TD headers="t3">Descafeinado</TD>
<TD headers="t4">Si</TD>
</TABLE>
Un sintetizador de voz poderia mostrar esta tabela como segue:
Lexenda: Tazas de café consumidas por cada senador
Resumo: Esta tabela mostra o número de tazas
de café consumidas por cada senador, o tipo
de café (descafeinado ou normal), e se
se tomaron con azúcar.
Nome: T. Sexton, Tazas: 10, Type: Expreso, Azúcar: Non
Nome: J. Dinnen, Tazas: 5, Type: Descafeinado, Azúcar: Si
Observe-se como se abrévia o cabezallo "Tipo de café" como "Tipo" usando o abributo abbr.
Velaqui o mesmo exemplo substituindo o atributo scope polo atributo headers . Observe-se o valor "col" para o atributo scope , que quer dicer "todas as celas da coluna actual":
<TABLE border="1"
summary="Esta tabela mostra o número de tazas
de café consumidas por cada senador, o tipo
de café (descafeinado ou normal), e se
se tomaron con azúcar.">
<CAPTION>Tazas de café consumidas por cada senador</CAPTION>
<TR>
<TH scope="col">Nome</TH>
<TH scope="col">Tazas</TH>
<TH scope="col" abbr="Tipo">Tipo de café</TH>
<TH scope="col">Azúcar?</TH>
<TR>
<TD>T. Sexton</TD>
<TD>10</TD>
<TD>Expreso</TD>
<TD>Non</TD>
<TR>
<TD>J. Dinnen</TD>
<TD>5</TD>
<TD>Descafeinado</TD>
<TD>Si</TD>
</TABLE>
Velaqui un exemplo algo máis complexo que ilustra outros valores do atributo scope :
<TABLE border="1" cellpadding="5" cellspacing="2"
summary="Cursos de história oferecidos na comunidade de
Bath organizados por nome do curso, tutor, resumo,
código e matrícula">
<TR>
<TH colspan="5" scope="colgroup">Cursos para a comunidade -- Bath Outono 1997</TH>
</TR>
<TR>
<TH scope="col" abbr="Nome">Nome do curso</TH>
<TH scope="col" abbr="Tutor">Tutor do curso</TH>
<TH scope="col">Resumo</TH>
<TH scope="col">Código</TH>
<TH scope="col">Matrícula</TH>
</TR>
<TR>
<TD scope="row">Despóis da Guerra Civil</TD>
<TD>Dr. John Wroughton</TD>
<TD>
O curso examinará os turbulentos anos en Inglaterra
despóis de 1646. <EM>Seis reunións semanais a partir do luns 13
de outubro.</EM>
</TD>
<TD>H27</TD>
<TD>€32</TD>
</TR>
<TR>
<TD scope="row">Introdución à Inglaterra anglo-saxona</TD>
<TD>Mark Cottle</TD>
<TD>
Curso de un dia no que se apresentará unha reconstrución
do período alto-medieval, os anglo-saxóns e
a sua sociedade <EM>Sábado 18 de outubro.</EM>
</TD>
<TD>H28</TD>
<TD>€18</TD>
</TR>
<TR>
<TD scope="row">A glória que foi Grécia</TD>
<TD>Valerie Lorenz</TD>
<TD>
Berce da democrácia, a filosofia, corazón do teatro, fogar
do debato. Os romanos talvez o fixeron, mais os gregos fixeron-no
antes. <EM>Sábado 25 de outubro de 1998 todo o dia</EM>
</TD>
<TD>H30</TD>
<TD>€18</TD>
</TR>
</TABLE>
Un axente de usuário gráfico poderia-o mostrar asi:
Observe-se o uso do atributo scope co valor "row". Ainda que a primeira cela de cada fila contén dados, non información de cabezallo, o atributo scope fai que a cela de dados se comporte como unha cela de cabezallo. Isto permite que os sintetizadores de voz fornezan o nome do curso se se lles pide ou que o lean imediatamente antes do conteúdo de cada cela.
Os usuários que naveguen por unha tabela cun axente de usuário baseado na voz poden desexar escoitar unha explicación dos conteúdos da cela ademáis dos conteúdos mesmos. Unha maneira na que o usuário poderia fornecer unha explicación seria falando información de cabezallo asociada antes de falar os conteúdos da cela de dados (ver a sección sobre asociación de información de cabezallo con celas de dados ).
Os usuários poden tamén querer información sobre máis de unha cela, en cuxo caso a información de cabezallo proporcionada ao nível da cela (con headers , scope e abbr ) pode non fornecer un contexto adecuado. Considere-se a tabela seguinte, que clasifica os gastos en comidas, hotéis e transporte entre duas localidades (San Jose e Seattle) durante vários dias:
Os usuários poderian querer extraer información da tabela en forma de perguntas:
Cada perguna implica que o axente de usuário realice un cálculo
que pode incluir nengunha ou máis celas. Para determinar, por exemplo,
os costos das comidas do 25 de agosto, o axente de usuário debe
saber que celas da tabela se refiren a "Comidas" (todas) e cais se refiren
a "Datas" (en concreto, 25 de agosto), e achar a intersección entre
os dous conxuntos.
Para acomodar este tipo de pergunta, o modelo de tabelas da HTML 4 permite
que os autores coloquen cabezallos de cela e dados en categorias. Por exemplo,
para a tabela de gastos de viaxe, un autor poderia agrupar as celas de
cabezallo "San Jose" e "Seattle" na categoria "Localidade", os cabezallos
"Comidas", "Hotéis" e "Transporte" na categoria "Despesas", e os
catro dias na categoria "Data". As tres perguntas anteriores terian entón
os seguintes significados:
Os autores categorizan unha cela de cabezallo ou de dados indicando o atributo axis para a cela. Por exemplo, na tabela de despesas de viaxe, a cela que contén a información "San Jose" poderia-se colocar na categoria "Localidade" asi:
<TH id="a6" axis="localidade">San Jose</TH>
Calquer cela que conteña información relacionada con "San Jose" deberia referir-se a este cabezallo mediante os atributos headers ou scope . Asi, as despesas en comidas de 25-Ag-1997 deberian-se marcar para que se refiran ao atributo id (cuxo valor aqui é "a6") da cela de cabezallo "San Jose":
<TD headers="a6">37.74</TD>
Cada atributo headers fornece unha lista de referéncias id . Os autores poden categorizar asi unha cela dada de diferentes maneiras (ou ao longo de calquer cantidade de "cabezallo", e daqui o nome).
Abaixo etiquetamos a tabela de despesas de viaxe con información sobre a categoria:
<TABLE border="1"
summary="Esta tabela resume as despesas de viaxe
nas que se incurriu durante as viaxes de Agosto
a San Jose e Seattle">
<CAPTION>
Informe de dietas
</CAPTION>
<TR>
<TH></TH>
<TH id="a2" axis="despensas">Comidas</TH>
<TH id="a3" axis="despensas">Hoteis</TH>
<TH id="a4" axis="despensas">Transporte</TH>
<TD>subtotais</TD>
</TR>
<TR>
<TH id="a6" axis="localidade">San Jose</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR>
<TD id="a7" axis="data">25-Ag-97</TD>
<TD headers="a6 a7 a2">37.74</TD>
<TD headers="a6 a7 a3">112.00</TD>
<TD headers="a6 a7 a4">45.00</TD>
<TD></TD>
</TR>
<TR>
<TD id="a8" axis="data">26-Ag-97</TD>
<TD headers="a6 a8 a2">27.28</TD>
<TD headers="a6 a8 a3">112.00</TD>
<TD headers="a6 a8 a4">45.00</TD>
<TD></TD>
</TR>
<TR>
<TD>subtotais</TD>
<TD>65.02</TD>
<TD>224.00</TD>
<TD>90.00</TD>
<TD>379.02</TD>
</TR>
<TR>
<TH id="a10" axis="localidade">Seattle</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR>
<TD id="a11" axis="data">27-Ag-97</TD>
<TD headers="a10 a11 a2">96.25</TD>
<TD headers="a10 a11 a3">109.00</TD>
<TD headers="a10 a11 a4">36.00</TD>
<TD></TD>
</TR>
<TR>
<TD id="a12" axis="data">28-Ag-97</TD>
<TD headers="a10 a12 a2">35.00</TD>
<TD headers="a10 a12 a3">109.00</TD>
<TD headers="a10 a12 a4">36.00</TD>
<TD></TD>
</TR>
<TR>
<TD>subtotais</TD>
<TD>131.25</TD>
<TD>218.00</TD>
<TD>72.00</TD>
<TD>421.25</TD>
</TR>
<TR>
<TH>Totais</TH>
<TD>196.27</TD>
<TD>442.00</TD>
<TD>162.00</TD>
<TD>800.27</TD>
</TR>
</TABLE>
Observe-se que etiquetar asi a tabela tamén permite que os axentes de usuário eviten confundir ao usuário con información non querida. Por exemplo, se un sintetizador de voz tivese que ler todas as cifras da coluna "Comidas" desta tabela como resposta à pergunta "Canto gastei en comidas?", un usuário non seria capaz de distinguir as despesas dun dia dos subtotais ou totais. Se categorizan con coidado os dados das celas, os autores permiten-lles aos axentes de usuário facer distincións semánticas importantes à hora de representá-los.
Por suposto que non hai limite a como poden os autores caracterizar a información dunha tabela. Na tabela de dietas, por exemplo, poderiamos acrescentar as categorias adicionais "subtotais" e "totais".
Esta especificación non require que os axentes de usuário traten a información fornecida polo atributo axis , nen tampouco fai recomendacións sobre como poden os axentes de usuário apresentar-lle a información axis aos usuários ou como poden os usuários perguntar-lle ao axente de usuário sobre esta información.
Poren, os axentes de usuário, en particular os sintetizadores de voz, poden querer redistribuir a información comun a várias celas que sexan o resultado dunha pergunta. Por exemplo, se o usuário pergunta "Canto gastei en comidas en San Jose?", o axente de usuário determinaria primeiro as celas en questión (25-Ag-1997: 37.74, 26-Ag-1997:27.28), e mostraria logo esta información. Un axente de usuário que a lese poderia-o facer asi:
Localidade: San Jose. Data: 25-Ag-1997. Despesas, Comidas: 37.74
Localidade: San Jose. Data: 26-Ag-1997. Despesas, Comidas: 27.28
ou, de maneira máis compacta:
San Jose, 25-Ag-1997, Comidas: 37.74
San Jose, 26-Ag-1997, Comidass: 27.28
Unha apresentación ainda máis económica reuniria a información comun e regorganizaria-a:
San Jose, Comidas, 25-Ag-1997: 37.74
26-Ag-1997: 27.28
Os axentes de usuário que aceiten este tipo de apresentación deberian permitir que os axentes de usuário tivesen un modo de personalizar a apresentación (p.ex., con follas de estilo).
En auséncia de información de cabezallo tanto do atributo scope como de headers , os axentes de usuário poden construir a información de cabezallo dacordo co algoritmo seguinte. O obxectivo do algoritmo é achar unha lista ordenada de cabezallos. (Na descrición seguinte do algoritmo asume-se que a direccionalidade da tabela vai de esquerda a direita.)
Esta tabela ilustra filas e colunas agrupadas. O exemplo está adaptado de "Developing International Software", de Nadine Kano.
En "arte ascii", a tabela seguinte:
<TABLE border="2" frame="hsides" rules="groups"
summary="Aceitación da páxina de códigos en diferentes versións
de MS Windows.">
<CAPTION>ACEITACIÓN DA PÁXINA DE CÓDIGOS EN MICROSOFT WINDOWS</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Páxina de códigos<BR>ID
<TH>Nome
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP de ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Europa do Leste<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cirílico<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Grego<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turco<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hebreu<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Árabe<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Báltico<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Coreano (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS Estados Unidos<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>Árabe (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Árabe (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Árabe (Árabe transparente)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Árabe (ASMO transparente)<TD><TD>X<TD><TD><TD>X
</TABLE>
mostraria-se como algo parecido a isto:
ACEITACIÓN DA PÁXINA DE CÓDIGOS EN MICROSOFT WINDOWS
===============================================================================
Code-Page | Name | ACP OEMCP | Windows Windows Windows
ID | | | NT 3.1 NT 3.51 95
-------------------------------------------------------------------------------
1200 | Unicode (BMP of ISO 10646) | | X X *
1250 | Windows 3.1 Europa do Leste | X | X X X
1251 | Windows 3.1 Cirílico | X | X X X
1252 | Windows 3.1 US (ANSI) | X | X X X
1253 | Windows 3.1 Grego | X | X X X
1254 | Windows 3.1 Turco | X | X X X
1255 | Hebreu | X | X
1256 | Árabe | X | X
1257 | Baltico | X | X
1361 | Coreano (Johab) | X | ** X
-------------------------------------------------------------------------------
437 | MS-DOS Estados Unidos | X | X X X
708 | Árabe (ASMO 708) | X | X
709 | Árabe (ASMO 449+, BCON V4) | X | X
710 | Árabe (Árabe transparente) | X | X
720 | Árabe (ASMO transparente) | X | X
===============================================================================
Un axente de usuário gráfico poderia-o mostrar asi:
Este exemplo ilustra como se pode usar COLGROUP para agrupar colunas e indicar o aliñamento por omisión das colunas. De maneira semellante, usa-se TBODY para agrupar filas. Os atributos frame e rules din-lle ao axente de usuário que bordes e liñas mostrar.