Continguts:

1. Introducció
2. El model de taula de CSS
2.1. Objectes de taula anònims
3. Selectors de columna
4. Les taules en el model de formatat visual
4.1. Posició i alineació del títol
5. Disposició visual dels continguts d'una taula
5.1. Capes i transparència en les taules
5.2. Algorismes d'amplada de taules: la propietat 'table-layout'
5.3. Algorismes d'alçada de taules
5.4. L'alineació horitzontal en una columna
5.5. Efectes dinàmics en files i columnes
6. Vores
6.1. Model de vores separades
6.2. Model de vores col·lapsades
6.3. Estils de vora
7. Presentació audio de les taules
7.1. Capçaleres recitades: la propietat 'speak-header'
1. Introducció
Les taules representen relacions entre dades. Els autors especifiquen aquestes relacions en el llenguatge del document i especifiquen la seva presentació, en CSS, de dues maneres: visualment i acústicament.



Exemple: Taula de tres files i tres columnes descrita en HTML 4.0:

   <TABLE>
     <CAPTION>Aquesta és una simple taula 3x3</CAPTION>
     <TR id="fila1">
        <TH>Capçalera 1      <TD>cel·la 1        <TD>cel·la 2
     <TR id="fila2">
        <TH>Capçalera 2      <TD>cel·la 3        <TD>cel·la 4
     <TR id="fila3">
        <TH>Capçalera 3      <TD>cel·la 5        <TD>cel·la 6
   </TABLE>
[Resultat]

Aquest codi crea una taula (l'element TABLE), tres files (els elements TR), tres cel·les de capçalera (els elements TH), i sis cel·les de dades (els elements TD). Cal observar que les tres columnes d'aquest exemple estan especificades implícitament: hi ha tantes columnes en la taula com requereixen les cel·les de capçalera i de dades.

La següent regla CSS centra el text horitzontalment en les cel·les de capçalera i presenta el text amb un pes de font bold:
	TH { text-align: center; font-weight: bold }

Les següents regles alineen el text de les cel·les de capçalera sobre la seva línia base (baseline) i centren verticalment el text en cada cel·la de dades.
	TH { vertical-align: baseline }
	TD { vertical-align: middle }

Les següents regles especifiquen que la fila de dalt de tot estarà envoltada per una vora sòlida, blava i de 3px d'amplada i que cada una de les altres files estarà envoltada per una vora sòlida, negra i d'1px d'amplada.
	TABLE   { border-collapse: collapse }
	TR#fila1 { border-top: 3px solid blue }
	TR#fila2 { border-top: 1px solid black }
	TR#fila3 { border-top: 1px solid black }

Cal observar, no obstant, que les vores del voltant de les files se solapen on les files es troben. De quin color (negre o blau) i de quina amplada (1px o 3px) serà la vora que es troba entre les files fila1 i fila2? Això es discuteix en l'apartat sobre resolució de conflictes entre vores.

La següent regla posa el títol de la taula al capdamunt de la taula:
	CAPTION { caption-side: top }

Finalment, la següent regla especifica que, quan es presenta acústicament, cada fila de dades s'ha de recitar com "Capçalera, Dada, Dada":
	TH { speak-header: once }

Per exemple, la primera fila es recitaria "Capçalera1 cel·la1 cel·la2". D'altra banda, amb la següent regla:
	TH { speak-header: always }

la primera fila es recitaria com "Capçalera1 cel·la1 Capçalera2 cel·la2".

Aquest exemple mostra com CSS treballa amb els elements de l'HTML 4.0; en HTML 4.0 la semàntica dels diferents elements de taula (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH i TD) està ben definida. En altres llenguatges de document (tals com les aplicacions XML) pot no haver-hi elements de taula predefinits. Per tant, CSS2 permet als autors "mapejar" (establir una relació de correspondència entre) els elements del llenguatge del document i els elements de taula, via la propietat display. Per exemple, la següent regla fa que l'element LOLO actuï com un element TABLE de l'HTML i que l'element PEPE actuï com un element CAPTION:
	LOLO { display : table }
	PEPE { display : table-caption }
(En l'HTML no serà necessària establir cap correspondència d'aquest tipus).

En l'especificació de CSS2 (i per tant, en aquest manual) el terme element de taula fa referència a qualsevol element implicat en la creació d'una taula. Un element de taula "intern" és un element que produeix una fila, un grup de files, una columna, un grup de columnes o una cel·la.
2. El model de taula de CSS
El model de taula de CSS es basa en el model de taula de l'HTML 4.0, en el qual l'estructura d'una taula es troba paral·lelament molt propera al disseny visual de la taula. En aquest model, una taula consisteix en un títol opcional i un nombre indefinit de files de cel·les. El model de taula es diu que és "primari de files" ja que els autors especifiquen files, no columnes, de manera explícita en el llenguatge del document. Les columnes es deriven un cop totes les files han estat especificades -- la primera cel·la de cada fila pertany a la primera columna, la segona a la segona columna, etc.). Les files i les columnes poden agrupar-se estructuralment i reflectir aquesta agrupació en la presentació (per ex., es pot dibuixar una vora al voltant d'un grup de files).

Així, el model de taula consisteix en taules, títols, files, grups de files, columnes, grups de columnes i cel·les.

El model de taula de CSS no requereix que el llenguatge del document inclogui elements que corresponguin a cada un d'aquests components. Com s'ha apuntat abans, per a llenguatges de document (per ex., aplicacions XML) que no tenen elements de taula predefinits, els autors han de fer correspondre els elements del llenguatge del document amb elements de taula; això es fa amb la propietat display. Els següents valors per a display assignen semàntica de taula a un element arbitrari:

table (En HTML: TABLE)
Especifica que un element defineix una taula block-level: és un bloc rectangular que participa en un context de formatat de bloc.
inline-table (En HTML: TABLE)
Especifica que un element defineix una taula inline-level: és un bloc rectangular que participa en un context de formatat inline.
table-row (En HTML: TR)
Especifica que un element és una fila de cel·les.
table-row-group (En HTML: TBODY)
Especifica que un element agrupa una o més files.
table-header-group (En HTML: THEAD)
Com 'table-row-group', però per al formatat visual el grup de files sempre es presenta abans que totes les altres files i grups de files i després de qualsevol títol superior. Els agents d'usuari impressors poden repetir les files de la capçalera en cada pàgina abarcada per una taula.
table-footer-group (En HTML: TFOOT)
Com 'table-row-group', però per al formatat visual el grup de files sempre es presenta després de totes les altres files i grups de files i abans de qualsevol títol inferior. Els agents d'usuari impressors poden repetir les files del peu en cada pàgina abarcada per una taula.
table-column (En HTML: COL)
Especifica que un element descriu una columna de cel·les.
table-column-group (En HTML: COLGROUP)
Especifica que un element agrupa una o més columnes.
table-cell (En HTML: TD, TH)
Especifica que un element representa una cel·la de la taula.
table-caption (En HTML: CAPTION)
Especifica un títol per a la taula.

Els elements amb la propietat display fixada a 'table-column' o a 'table-column-group' no es presenten (exactament com si tinguessin 'display: none'), però són útils en el sentit que poden tenir atributs els quals indueixin a un cert estil per a les columnes que representen.
	TABLE    { display: table }
	TR       { display: table-row }
	THEAD    { display: table-header-group }
	TBODY    { display: table-row-group }
	TFOOT    { display: table-footer-group }
	COL      { display: table-column }
	COLGROUP { display: table-column-group }
	TD, TH   { display: table-cell }
	CAPTION  { display: table-caption }

Els agents d'usuari poden ignorar aquests valors de la propietat display per als documents HTML, ja que els autors no haurien d'alterar el comportament esperat d'un element.
2.1. Objectes de taula anònims
Els llenguatges de document diferents de l'HTML poden no contenir tots els elements del model de taula CSS2. En aquests casos, els elements "perduts" s'han de suposar a fi que el model de taula funcioni. Qualsevol element de taula generarà automàticament necessaris objectes de taula anònims al voltant de sí mateix, consistents en al menys tres objectes aniuats corresponents a un element 'table'/'inline-table', a un element 'table-row' i a un element 'table-cell'. Els elements perduts generen objectes anònims (per ex., caixes anònimes en la presentació visual de taules) d'acord amb les següents regles:

1. Si el pare P d'un element 'table-cell' T no és un 'table-row' es generarà, entre P i T, un objecte corresponent a un 'table-row'. Aquest objecte abarcarà tots els germans consecutius 'table-cell' (en l'arbre del document) de T.

2. Si el pare P d'un element 'table-row' T no és un element 'table', 'inline-table' o 'table-row-group' es generarà, entre P i T, un objecte corresponent a un element 'table'. Aquest objecte abarcarà tots els germans consecutius (en l'arbre del document) de T que requereixin un pare 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' i 'table-caption'.

3. Si el pare P d'un element 'table-column' T no és un element 'table', 'inline-table' o 'table-column-group' es generarà, entre P i T, un objecte corresponent a un element 'table'. Aquest objecte abarcarà tots els germans consecutius (en l'arbre del document) de T que requereixin un pare 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' i 'table-caption'.

4. Si el pare P d'un element 'table-row-group' (o 'table-header-group', 'table-footer-group' o 'table-column-group') T no és un element 'table' o 'inline-table' es generarà, entre P i T, un objecte corresponent a un element 'table'. Aquest objecte abarcarà tots els germans consecutius (en l'arbre del document) de T que requereixin un pare 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' i 'table-caption'.

5. Si un fill T d'un element 'table' (o 'inline-table') P no és un element 'table-row-group', 'table-header-group', 'table-footer-group' o 'table-row' es generarà, entre P i T, un objecte corresponent a un element 'table-row'. Aquest objecte abarcarà tots els germans consecutius de T que no siguin elements 'table-row-group', 'table-header-group', 'table-footer-group' o 'table-row'.

6. Si un fill T d'un element 'table-row-group' (o 'table-header-group' o 'table-footer-group') P no és un element 'table-row' es generarà, entre P i T, un objecte corresponent a un element 'table-row'. Aquest objecte abarcarà tots els germans consecutius de T que no siguin elements 'table-row'.

7. Si un fill T d'un element 'table-row' P no és un element 'table-cell' es generarà, entre P i T, un objecte corresponent a un element 'table-cell'. Aquest objecte abarcarà tots els germans consecutius de T que no siguin elements 'table-cell'.

Exemple:

En aquest exemple XML, un element 'table' es suposa que conté l'element HBOX:
<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>
perquè el full d'estil associat és:
	HBOX { display: table-row }
	VBOX { display: table-cell }

Exemple:

En aquest exemple, tres elements 'table-cell' es suposa que contenen el text de les ROWs. Cal observar que el text es troba, a més, encapsulat en caixes inline anònimes, tal com s'explica en el model de formatat visual:
<STACK>
  <ROW>Aquesta és la fila <D>superior</D>.</ROW>
  <ROW>Aquesta és la fila <D>central</D>.</ROW>
  <ROW>Aquesta és la fila <D>inferior</D>.</ROW>
</STACK>
El full d'estil és:
	STACK { display: inline-table }
	ROW   { display: table-row }
	D     { display: inline; font-weight: bolder }

Els agents d'usuari HTML no cal que creïn objectes anònims d'acord amb les regles de més amunt.
3. Selectors de columna
Les cel·les de les taules poden pertànyer a dos contextes: files i columnes. Tanmateix, en el document font les cel·les són descendents de les files, mai de les columnes. Cal tenir en compte, però, que alguns aspectes de les cel·les poden estar influenciats per la inicialització de certes propietats en les columnes.

Les següents propietats s'apliquen als elements de columna i de grup de columnes:

border
Les diverses propietats de vora s'apliquen a les columnes només si border-collapse està inicialitzada a 'collapse' en l'element de taula. En aquest cas, les vores assignades a columnes i grups de columnes són dades d'entrada per a l'algorisme de resolució de conflictes entre vores, el qual selecciona l'estil de vora de cada límit de cel·la.


background
Les propietats de fons assignen el fons de les cel·les de la columna, però només si tant la cel·la com la fila tenen fons transparents. Veieu l'apartat "Capes i transparència en les taules".


width
La propietat width dóna l'amplada mínima per a la columna.


visibility
Si la propietat visibility d'una columna està fixada a 'collapse' cap de les cel·les de la columna són presentades, i les cel·les que s'espandeixen per altres columnes són retallades. A més, l'amplada de la taula es disminueix per l'amplada que la columna hagi ocupat. Veieu l'apartat sobre els efectes dinàmics de més avall. Els altres valors de visibility no hi tenen cap efecte.


Exemple:

Aquí hi ha alguns exemples de regles d'estil que inicialitzen propietats en les columnes. Les primeres dues regles juntes implementen l'atribut "rules" de l'HTML 4.0 amb un valor de "cols". La tercera regla fa que la columna "totals" sigui blava, les dues últimes regles mostren com donar una mida fixa a una columna, utilitzant l'algorisme de disseny fixe:
	COL   { border-style: none solid }
	TABLE { border-style: hidden }
	COL.totals { background: blue }
	TABLE { table-layout: fixed }
	COL.totals { width: 5em }
4. Les taules en el model de formatat visual
En termes del model de formatat visual, una taula pot comportar-se com un element block-level o bé com un element inline-level reemplaçat. Les taules tenen contingut, farciment, vores i marges.

En ambdós casos, l'element de taula genera una caixa anònima que conté la caixa de la taula en sí mateixa i la caixa del títol (sí n'hi ha). Les caixes de la taula i del títol retenen les seves pròpies àrees de contingut, farciment, marge i vora, i les dimensions de la caixa anònima rectangular són el més petites possible per a contenir-ho tot. Els marges verticals es col·lapsen on les caixes de la taula i del títol es toquen. Qualsevol reposicionament de la taula ha de moure la caixa anònima sencera, no només la caixa de la taula, per tal que el títol segueixi la taula.



Això és un diagrama d'una taula amb un títol al capdamunt; el marge inferior del títol es col·lapsa amb el marge superior de la taula.
4.1. Posició i alineació del títol
La propietat caption-side és la propietat que s'utilitza per especificar la posició de la caixa del títol respecte la caixa de la taula.

Els títols al capdamunt o al capdavall d'un element 'table' es formaten ben bé com si fossin un element de bloc abans o després de la taula, excepte que (1) hereten les propietats heretables de la taula, i (2) no estan considerats com a una caixa de bloc pels propòsits dels elements 'compact' o 'run-in' que poden precedir la taula.

Un títol que es trobi al capdamunt o al capdavall d'una caixa de taula també es comporta com una caixa de bloc per als càlculs d'amplada; l'amplada es calcula respecte l'amplada del bloc contenidor de la caixa de la taula.

Per a un títol que es troba a l'esquerra o a la dreta d'una caixa de taula, per altra banda, un valor diferent de 'auto' per a la propietat width assigna l'amplada explícitament, però 'auto' li diu a l'agent d'usuari que trïi una "amplada raonable". Aquesta pot variar de la des de "la caixa més estreta possible" a "una sola línia", per tant es recomana als usuaris que no especifiquin 'auto' per a les amplades dels títols situats a la dreta o a l'esquerra.

Per alinear el contingut del títol horitzontalment dins la caixa de títol cal utiltizar la propietat text-align. Per a l'alineació vertical d'un caixa de títol situada a l'esquerra o a la dreta de la caixa de la taula, cal utilitzar la propietat vertical-align.

Il·lustració-exemple d'un tipus de títol que es pot assignar a una taula:



Per més informació i exemples sobre el funcionament de la propietat caption-side consulteu en aquest manual el llistat on es troben definides totes les propietats de CSS2.
5. Disposició visual dels continguts d'una taula
Igual com altres elements del llenguatge del document, els elements de taula interns generen caixes rectangulars amb contingut, farciment i vores. Tanmateix, no tenen marges.

La disposició visual d'aquestes caixes està governada per una graella rectangular i irregular de files i columnes. Cada caixa ocupa tot un cert nombre de cel·les de la graella, determinat d'acord amb les següents regles. Aquestes regles no s'apliquen a l'HTML 4.0 o a versions anteriors de l'HTML; l'HTML imposa les seves pròpies limitacions a l'expansió de les files i les columnes.

  1. Cada caixa de fila ocupa una fila de cel·les de la graella. Totes juntes, les caixes de files omplen la taula de dalt a baix en l'ordre en què apareixen en el document font (és a dir, la taula ocupa exactament tantes files de la graella com elements de fila hi ha).


  2. Un grup de files ocupa les mateixes cel·les que ocupen les files que conté.


  3. Una caixa de columna ocupa una o més columnes de cel·les de la graella. Les caixes de columna estan situades l'una al costat de l'altra en l'ordre en què apareixen. La primera caixa de columna pot ser a l'esquerra o bé a la dreta, depenent del valor de la propietat direction de la taula.


  4. Una caixa d'un grup de columnes les mateixes cel·les que ocupen les columnes que conté.


  5. Les cel·les poden expandir-se per vàries files o columnes. (Encara que CSS2 no defineix com es determina el nombre de files o columnes expandides, un agent d'usuari pot tenir un especial coneixement sobre el document font; una futura versió de CSS pot facilitar una manera per a expressar aquest coneixement en sintaxi CSS.) Cada cel·la és, per tant, una caixa rectangular, d'una o més cel·les d'amplada i alçada. La fila superior d'aquest rectangle es troba en la fila especificada pel pare de la cel·la. El rectangle ha de estar tant allunyat cap a l'esquerra com sigui possible, però no pot haver-hi sobreposició amb cap altra caixa de cel·la, i ha de trobar-se a la dreta de totes les cel·les de la mateixa fila en què es troben en el document font. (Aquesta restricció s'ha d'acomplir si la propietat direction de la taula és 'ltr'; si direction és 'rtl', s'intercanvien "esquerra" i "dreta" en la frase prèvia.)


  6. Una caixa de cel·la no es pot extendre més enllà de l'última caixa de fila o de grup de files d'una taula o d'un grup de files; els agents d'usuari han d'escurçar-la fins que hi càpiga.

Nota. Les cel·les d'una taula poden estar posicionades però no és recomanable: el posicionament absolut i el fixe, així com el floating (veieu 'Floats'), substrau una caixa del fluxe afectant, d'aquesta manera, la mida de la taula.

Aquí hi ha dos exemples. El primer se suposa que té lloc en un document HTML:

	<TABLE>
	  <TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
	  <TR><TD colspan="2">5
	</TABLE>


	<TABLE>
	  <ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
	  <ROW><CELL colspan="2">5
	</TABLE>
La segona taula està formatada com en la figura de la dreta. No obstant, la presentació HTML de la taula està explícitament indefinida per l'HTML, i CSS no intenta definir-la. Els agents d'usuari són lliures de presentar-la, per ex., com en la figura de l'esquerra:



A l'esquerra, una possible representació d'una taula en HTML 4.0 errònia; a la dreta l'únic format possible d'una taula similar no-HTML.
5.1. Capes i transparència en les taules
Amb el propòsit de trobar el fons de cada cel·la de la taula, els diferents elements de taula poden ser pensats com si estiguessin sobre sis capes superimposades. El fons assignat a un element en una de les capes només serà visible si les capes de sobre seu tenen un fons transparent.

Aquest és l'esquema de les capes d'una taula:



  1. La capa més baixa és un sol pla, que representa la caixa de la taula en sí mateixa. Igual com totes les caixes, pot ser transparent.


  2. La següent capa conté els grups de columnes. Els grups de columnes són tan alts com la taula, però no necessiten cobrir tota la taula horitzontalment.


  3. Al damunt dels grups de columnes hi ha les àrees que representen les caixes de les columnes. Cada grup de columnes és tan alt com la taula, però no necessàriament cobreixen tota la taula horitzontalment.


  4. Seguidament ve la capa que conté els grups de files. Cada grup de files és tan ample com la taula. Tots junts, els grups de files cobreixen completament la taula de dalt a baix.


  5. La penúltima capa conté les files. Les files també cobreixen la taula sencera.


  6. La capa de dalt de tot conté les cel·les en sí. Tal com mostra la figura, encara que totes les files continguin el mateix nombre de cel·les, pot ser que no cada cel·la tingui especificat un contingut. Aquestes cel·les "buides" son transparents, deixant que les altres capes es vegin a través d'elles.

En el següent exemple, la primera fila conté quatre cel·les, però la segona no en conté cap, i així el fons de la taula es veu a través, excepte on una cel·la de la primera fila s'expandeix en aquesta fila. El següent codi HTML i regles d'estil
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   <HTML>
   <HEAD>
   <STYLE type="text/css">
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
   </STYLE>
   </HEAD>
   <BODY>
      <P>
      <TABLE>
         <TR>
            <TD> 1 
            <TD rowspan="2"> 2
            <TD> 3 
            <TD> 4 
         </TR>
         <TR><TD></TD></TR>
      </TABLE> 
   </BODY>
</HTML>
podria tenir un format així:



Taula amb tres cel·les buides en la fila de baix de tot.
5.2. Algorismes d'amplada de taules: la propietat 'table-layout'
CSS no defineix un disseny "òptim" per a les taules ja que, en molts casos, el que és òptim és qüestió de gust. CSS defineix restriccions que els agents d'usuari han de respectar quan disposin una taula. Els agents d'usuari poden utilitzar l'algorisme que desitgin per a fer-ho, i són lliures de preferir oferir rapidesa abans que precisió, excepte quan es seleccioni l'"algorisme de disseny fixe".

La propietat table-layout controla l'algorisme utilitzat per a presentar les cel·les, les files i les columnes de la taula. Mitjançant aquesta propietat es pot triar entre dos algorismes diferents, els quals estan explicats a continuació.

Disseny de taules fixe

Amb aquest (ràpid) algorisme, el disseny horitzontal de la taula no depèn dels continguts de les cel·les; només depèn de l'amplada de la taula, de l'amplada de les columnes i també de les vores o de l'espaiat de les cel·les.

L'amplada de la taula pot ser especificada explícitament amb la propietat width. Un valor de 'auto' (tant per a 'display:table' com per 'display:inline-table') significa que s'utilitza l'algorisme de disseny de taules automàtic.

En l'algorisme de disseny de taules fixe, l'amplada de cada columna es determina així:

  1. Un element de columna amb un valor diferent de 'auto' per a la propietat width fixa l'amplada per a aquella columna.


  2. D'altra manera, una cel·la en la primera fila amb un valor diferent de 'auto' per a la propietat width fixa l'amplada per a aquella columna. Si la cel·la s'expandeix més d'una columna, l'amplada es divideix entre les columnes.


  3. Les columnes restants es divideixen equitativament l'espai horitzontal que sobra de la taula (menys les vores o l'espaiat de les cel·les).

L'amplada de la taula és aleshores el valor més gran de la propietat width per a l'element de taula i la suma de les amplades de les columnes (més l'espaiat de les cel·les o les vores). Si la taula és més ampla que les columnes, l'espai extra hauria de distribuir-se entre les columnes.

D'aquesta manera, l'agent d'usuari pot començar a disposar la taula un cop s'ha rebut sencera la primera fila. Les cel·les de les files subseqüents no afecten a les amplades de les columnes. Qualsevol cel·la que tingui contingut que sobresurti utilitza la propietat overflow per a determinar si es retalla o no el contingut que sobresurt.

Disseny de taules automàtic

En aquest algorisme (el qual requereix generalment no més de dues passades) l'amplada de la taula ve donada per l'amplada de les seves columnes (i de les vores que hi intervenen). Aquest algorisme reflecteix el comportament de diversos agents d'usuari HTML força populars. Els agents d'usuari no estan obligats a implementar aquest algorisme per a determinar la disposició de la taula en cas que la propietat table-layout sigui 'auto'; poden utilitzar qualsevol altre algorisme.

Aquest algorisme pot ser ineficient ja que requereix que l'agent d'usuari tingui accés a tot el contingut de la taula abans de determinar-ne la disposició final i això pot necessitar més d'una passada.

Les amplades de les columnes es determinen tal com segueix:

  1. Es calcula l'amplada mínima del contingut (AMC) de cada cel·la: el contingut formatat pot ocupar unes quantes línies però no pot sobresurtir de la caixa de la cel·la. Si la width especificada (W) de la cel·la és més gran que AMC, aleshores W és l'amplada mínima de cel·la. Un valor de 'auto' significa que AMC és l'amplada mínima de cel·la.

    També cal calcular l'amplada "màxima" de cada cel·la: es formata el contingut sense més línies de trencament que les línies de trencament explícites.


  2. Per a cada columna, es determina una amplada màxima i mínima de columna des de les cel·les que s'expandeixen només per aquesta columna. L'amplada mínima és aquella requerida per la cel·la amb l'amplada mínima més gran (o la propietat width de columna, la que sigui més gran). L'amplada màxima és aquella requerida per la cel·la amb l'amplada màxima més gran (o la width de columna, la que sigui més gran).


  3. Per a cada cel·la que s'expandeix per més d'una columna, cal incrementar les amplades mínimes de les columnes per les quals s'expandeix per tal que, juntes, siguin al menys tan amples com la cel·la. Cal fer el mateix amb les amplades màximes. Si és possible, cal dilatar totes aquestes columnes per aproximadament la mateixa quantitat.

Això dóna l'amplada màxima i mínima per a cada columna. Les amplades de les columnes influencien l'amplada final de la taula tal com segueix:

  1. Si la propietat width dels elements 'table' o 'inline-table' té un valor especificat (W) diferent de 'auto', el valor computat de la propietat és el més gran entre W i l'amplada mínima requerida per totes les columnes més l'espaiat de les cel·les o les vores (MIN). Si W és més gran que MIN, l'amplada extra hauria de ser distribuida entre les columnes.


  2. Si l'element 'table' o 'inline-table' té 'width: auto', l'amplada computada de la taula és el valor més gran entre l'amplada del bloc contenidor de la taula i MIN. No obstant, si l'amplada màxima requerida per les columnes més l'espaiat de les cel·les o les vores (MAX) és menor que la del bloc contenidor, cal utilitzar MAX.

Un valor percentual per a l'amplada d'una columna és relatiu a l'amplada de la taula. Si la taula té 'width: auto', un percentatge representa una restricció sobre l'amplada de la columna, la qual un agent d'usuari hauria d'intentar satisfer. (Òbviament, això no és sempre possible: si l'amplada de la columna és '110%', la restricció no pot ser satisfeta.)

Nota. En aquest algorisme, tant les files (i els grups de files) com les columnes (i els grups de columnes) restringeixen i son restringides per les dimensions de les cel·les que contenen. El fet d'assignar l'amplada d'una columna pot indirectament influir en l'alçada d'una fila, i viceversa.
5.3. Algorismes d'alçada de taules
L'alçada d'una taula ve donada per la propietat height de l'element 'table' o 'inline-table'. Un valor de 'auto' significa que l'alçada és la suma de les alçades de les files més qualsevol espaiat de cel·les o les vores. Qualsevol altre valor especifica l'alçada explícitament; la taula pot, d'aquesta manera, ser més alta o més baixa que l'alçada de les seves files. CSS2 no especifica la presentació quan l'alçada especificada de la taula difereix de l'alçada del contingut, en particular, si l'alçada del contingut hauria de sobreescriure l'alçada especificada o no; si no ho fa, com hauria de distribuir-se l'espai extra entre les files que sumen menys que l'alçada especificada de la taula; o, si l'alçada del contingut excedeix l'alçada especificada de la taula, si l'agent d'usuari hauria de proporcionar un mecanisme d'scroll o no. Nota. Futures versions de CSS poden especificar això d'una manera més extensa.

L'alçada de la caixa d'un element 'table-row' es calcula un cop l'agent d'usuari té totes les cel·les de la fila disponibles: és el màxim de la height especificada de la fila i l'alçada mínima (MIN) requerida per les cel·les. Un valor per a height de 'auto' per a un 'table-row' significa que l'alçada calculada de la fila és MIN. MIN depèn de l'alçada de la caixa de la cel·la i de l'alineació de la caixa de la cel·la (molt semblant al càlcul de l'alçada d'una caixa de línia). CSS2 no defineix a què fan referència els valors percentuals de height quan s'especifiquen per a files de la taula i grups de files.

En CSS2, l'alçada de la caixa d'una cel·la és el màxim de la propietat height de la cel·la de la taula i l'alçada mínima requerida pel contingut (MIN). Un valor de 'auto' per a height implica un valor computat de MIN. CSS2 no defineix a què fan referència els valors percentuals de height quan s'especifiquen per a cel·les de taula.

CSS2 no especifica com les cel·les que s'espandeixen per més d'una fila afecten els càlculs de l'alçada de les files, excepte que la suma de les alçades de les files implicades ha de ser el suficientment gran com per què englobi la cel·la que s'expandeix per aquestes files.

La propietat vertical-align de cada cel·la de la taula determina la seva alineació dins la fila. El contingut de cada cel·la té una lína base, una part superior, una part inferior i una part central, tal com té la fila. En el context de les taules, els valors per a vertical-align tenen els següents significats:

baseline
La línia base de la cel·la es posa a la mateixa alçada que la línia base de la primera de les files per les quals s'expandeix (veieu més avall la definició de línies base de cel·les i files).
top
La part superior de la caixa de la cel·la s'alinea amb la part superior de la primera de les files per les quals s'expandeix.
bottom
La part inferior de la caixa de la cel·la s'alinea amb la part inferior de l'última de les files per les quals s'expandeix.
middle
La part central de la cel·la s'alinea amb la part central de les files per les quals s'expandeix.
sub, super, text-top, text-bottom
Aquests valors no s'apliquen a les cel·les; enlloc d'això, la cel·la s'alinea a la línia base.

La línia base d'una cel·la és la línia base de la primera caixa de línia de dins de la cel·la. Si no hi ha text, la línia base és la línia base de l'objecte que es visualitzi en la cel·la, o, si no n'hi ha cap, la part inferior de la caixa de la cel·la. La distància màxima entre la part superior de la caixa de la cel·la i la línia base de totes les cel·les que tenen 'vertical-align: baseline' s'utilitza per a fixar la línia base de la fila. Per exemple:



Diagrama que mostra l'efecte de diversos valors per a vertical-align en les cel·les d'una taula.


Les caixes de cel·la 1 i 2 estan alineades a les seves línies base. La caixa de cel·la 2 té l'alçada més gran per sobre de la línia base, per tant això determina la lína base de la fila. Cal remarcar que si no hi hagués cap caixa de cel·la alineada a la seva línia base, la fila no tindria (no necessitaria) cap línia base.

Per evitar situacions ambigües, l'alineació de les cel·les procedeix en el següent ordre:

  1. Primer es posicionen les cel·les que estan alineades a la seva línia base. Això establirà la línia base de la fila. Després es posicionen les cel·les amb 'vertical-align: top'.
  2. Ara la fila té una part superior, possiblement també una línia base, i una alçada provisional, la qual és la distància de la part superior a la part inferior més baixa de les cel·les posicionades fins ara. (Veieu més avall les condicions sobre el farciment de les cel·les.)
  3. Si alguna de les cel·les restants, aquelles que estan alineades a la part inferior o central, té una alçada que és més gran que l'alçada actual de la fila, l'alçada de la fila serà incrementada a la màxima d'aquelles cel·les, abaixant la part inferior.
  4. Finalment, es posicionen les cel·les restants.

Les caixes de cel·la que són més petites que l'alçada de la fila reben un farciment extra superior o inferior.
5.4. L'alineació horitzontal en una columna
L'alineació horitzontal del contingut d'una cel·la de dins d'una caixa de cel·la s'especifica amb la propietat text-align.

Quan la propietat text-align per a més d'una de les cel·les d'una columna està fixada a un valor <cadena>, el contingut d'aquelles cel·les s'alinea al llarg d'un eix vertical. El començament de la cadena toca aquest eix. La direccionalitat (sentit) dels caràcters determina si la cadena queda a l'esquerra o a la dreta de l'eix.

El fet d'alinear el text d'aquesta manera només és útil si el text hi cap en una sola línia. El resultat és indefinit si el contingut de la cel·la s'expandeix per més d'una línia.

Si el valor de text-align per a una cel·la de taula és una cadena però la cadena no es troba en el contingut de la cel·la, el final del contingut de la cel·la toca l'eix vertical de l'alineació.

Cal remarcar que les cadenes no han de ser les mateixes per a cada cel·la, encara que normalment ho són.

CSS no facilita una manera d'especificar el desplaçament de l'eix de l'alineació vertical respecte el límit de la caixa d'una columna.

Exemple:

El següent full d'estil:
	TD { text-align: "." }
	TD:before { content: "$" }
farà que la columna de les quantitats en dòllars de la següent taula HTML:
  <TABLE>
     <COL width="40">
     <TR> <TH>Trucades de llarga distància
     <TR> <TD> 1.30
     <TR> <TD> 2.50
     <TR> <TD> 10.80
     <TR> <TD> 111.01
     <TR> <TD> 85.
     <TR> <TD> 90
     <TR> <TD> .05
     <TR> <TD> .06
  </TABLE>
s'alineï amb el punt decimal. S'ha utilitzat el pseudo-element :before per a inserir un signe de dòllar abans de cada figura. La taula es podria presentar tal com segueix:

5.5. Efectes dinàmics en files i columnes
La propietat visibility pren el valor 'collapse' per als elements de fila, grup de files, columna i grup de columnes. Aquest valor fa que la fila o columna sencera es substragui de la visualització, i que l'espai que normalment ocupa la fila o columna estigui disponible per a un altre contingut. La supressió de la fila o columna, no obstant, no afecta d'altra manera el disseny (la disposició) de la taula. Això permet que els efectes dinàmics substraguin files o columnes de la taula, sense forçar una redisposició de la taula a fi de justificar els canvis potencials en les restriccions de les columnes.
6. Vores
Hi ha dos models diferents per a fixar les vores de les cel·les de les taules en CSS. L'un és més aconsellable per a les anomenades vores separades al voltant de cel·les individuals, l'altre és més aconsellable per a les vores que són contínues d'un extrem a l'altre de la taula. Es poden aconseguir molts estils de vora amb qualsevol d'aquests dos models, per tan sovint és una qüestió de gustos el fet d'utilitzar l'un o l'altre.

La propietat border-collapse selecciona un model de vora per a una taula.
6.1. Model de vores separades
En aquest model, cada cel·la té una vora individual. La propietat border-spacing especifica la distància entre les vores de cel·les adjacents. Aquest espai s'omple amb el fons de l'element de taula. Les files, columnes, grups de files i grups de columnes no poden tenir vores (és a dir, els agents d'usuari han d'ignorar les propietats de vora per a aquells elements).

Vores al voltant de cel·les buides: la propietat 'empty-cells'
En el model de vores separades, la propietat empty-cells controla la presentació de les vores del voltant de les cel·les que no tenen contingut visible. Les cel·les buides i les cel·les amb la propietat visibility inicialitzada a 'hidden' es considera que no tenen contingut visible. El contingut visible inclou "&nbsp;" i altres espais blancs excepte l'ASCII CR ("\0D"), LF ("\0A"), tab ("\09"), i l'espai ("\20").
6.2. El model de vores col·lapsades
En el model de vores col·lapsades és possible especificar vores que envoltin tota una cel·la, fila, grup de files, columna i grup de columnes, o part d'elles. Les vores per a l'atribut HTML "rule" es poden especificar d'aquesta manera.

Les vores es troben centrades sobre les línies de graella que hi ha entre les cel·les. Els agents d'usuari han de trobar una regla consistent per a arrodonir en cas d'un número primer d'unitats discretes (píxels de pantalla, punts d'impressora).

Aquest diagrama de més avall indica com interactuen l'amplada de la taula, les amplades de les vores, el farciment i l'amplada de cel·la. La seva relació ve donada per la següent eqüació, que és satisfeta per cada fila de la taula:

amplada_fila = (0.5 * amplada_vora0) + farciment_esquerre1 + amplada1 + farciment_dret1 + amplada_vora1 + farciment_esquerre2 +...+ farciment_dretn + (0.5 * amplada_voran)

Aquí, n és el nombre de cel·les de la fila, i amplada_vorai fa referència a la vora que hi ha entre les cel·les i i i+1. Cal remarcar que només es compta la meitat de les dues vores exteriors en l'amplada de la taula; l'altra meitat d'aquestes dues vores queda dins l'àrea de marge:



Esquema que mostra les amplades de les cel·les i de les vores i el farciment de les cel·les.


Cal remarcar que, en aquest model, l'amplada de la taula inclou una meitat de la vora de la taula. També, en aquest model, una taula no és obligatori que tingui farciment (però sí marges).

Resolució de conflictes entre vores

En el model de vores col·lapsades, les vores de cada límit de cada cel·la poden especificar-se per mitjà de les propietats de vora sobre la varietat d'elements que es troben en aquell límit (cel·les, files, grups de files, columnes, grups de columnes i la taula en sí), i aquestes vores poden variar en amplada, estil i color. La regla del dit polze és que a cada límit s'escull l'estil de vora més atraient, excepte que cap ocurrència de l'estil 'hidden' torni la vora incondicionalment invisible.

Les següents regles determinen quin estil de vora "guanya" en cas de conflicte:

  1. Les vores amb la propietat border-style a 'hidden' tenen precedència per davant de totes les altres vores conflictives. Qualsevol vora amb aquest valor suprimeix totes les vores que es trobin en aquesta localització.


  2. Les vores amb un estil de 'none' tenen la prioritat més baixa. Només si les propietats de vora de tots els elements que es troben en aquest límit són 'none' la vora s'ometrà (però cal remarcar que 'none' és el valor per defecte per a l'estil de vora).


  3. Si cap dels estils és 'hidden' i al menys un d'ells no és 'none', aleshores les vores més primes es descarten en favor de les més gruixudes. Si n'hi ha unes quantes que tenen la mateixa border-width aleshores els estils preferits són, en aquest ordre: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', i el més baix: 'inset'.


  4. Si els estils de vora difereixen només en el color, aleshores un estil fixat sobre una cel·la guanya a un estil fixat sobre una fila, el qual guanya a un grup de files, columna, grup de columnes i, finalment, a una taula.

Exemple:

El següent exemple il·lustra l'aplicació d'aquestes regles de precedència. Aquest full d'estil:
  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }
amb aquest HTML font:

	<P>
	<TABLE>
	<COL id="col1"><COL id="col2"><COL id="col3">
	<TR id="fila1">
	    <TD> 1
	    <TD> 2
	    <TD> 3
	</TR>
	<TR id="fila2">
	    <TD> 4 
	    <TD class="solid-blue"> 5
	    <TD class="solid-green"> 6
	</TR>
	<TR id="fila3">
	    <TD> 7
	    <TD> 8
	    <TD> 9
	</TR>
	<TR id="fila4">
	    <TD> 10
	    <TD> 11
	    <TD> 12
	</TR>
	<TR id="fila5">
	    <TD> 13
	    <TD> 14
	    <TD> 15
	</TR>
	</TABLE>
produiria una cosa semblant a això:



Un exemple de taula amb les vores col·lapsades.


Exemple:

El següent exemple mostra una taula amb línies horitzontals entre les files. La vora superior de la taula està inicialitzada a 'hidden' per a suprimir la vora superior de la primera fila. Això és el que implementa l'atribut "rules" de l'HTML 4.0 (rules="rows"):
	TABLE[rules=rows] TR { border-top: solid }
	TABLE[rules=rows]    { border-collapse: collapse;
                               border-top: hidden }



Taula amb línies horitzontals entre les files.


En aquest cas el mateix efecte es pot assolir també sense haver de fixar una vora 'hidden' a TABLE; es tracta la primera fila separadament. El mètode que es prefereixi és qüestió de gustos:
	TR:first-child { border-top: none }
	TR { border-top: solid }

Exemple:

Aquí hi ha un altre exemple de vores col·lapsades ocultes:


Taula amb dues vores internes omeses.


HTML font:
	<TABLE style="border-collapse: collapse; border: solid;">
	<TR><TD style="border-right: hidden; 
                       border-bottom: hidden">lolo</TD>
	    <TD style="border: solid">pepe</TD></TR>
	<TR><TD style="border: none">lolo</TD>
	    <TD style="border: solid">pepe</TD></TR>
	</TABLE>
6.3. Estils de vora
Alguns dels valors per a la propietat border-style tenen diferents significats per les taules que per a altres elements. En la llista següent estan marcats amb un asterisc:

none
Sense vora.
*hidden
El mateix que 'none, però en el model de vores col·lapsades també inhibeix qualsevol altra vora (veieu l'apartat sobre conflictes entre les vores).
dotted
La vora és una sèrie de punts.
dashed
La vora és una sèrie de segments curts de línia.
solid
La vora és un sol segment de línia.
double
La vora són dues línies sòlides. La suma de les dues línies i de l'espai que hi ha entre elles és igual al valor de la propietat border-width.
groove
La vora sembla com si s'hagués escarvat en el llenç.
ridge
L'oposat de 'groove': la vora sembla com si surtís del llenç.
*inset
En el model de vores separades, la vora fa que la caixa sencera sembli com si hagués estat incrustada en el llenç. En el model de vores col·lapsades, és el mateix que 'groove'.
*outset
En el model de vores separades, la vora fa que la caixa sencera sembli com si s'hagués substret del llenç. En el model de vores col·lapsades, és el mateix que 'ridge'.
7. Presentació audio de les taules
Quan una taula és recitada per un generador de parla, la relació entre les cel·les de dades i les de capçalera ha de ser expressada d'una manera diferent que amb l'alineació vertical i horitzontal. Alguns navegadors de parla poden permetre que un usuari es mogui en l'espai bidimensional, i així donar-li la oportunitat de projectar les relacions representades espaialment. Quan això no sigui possible, el full d'estil ha d'especificar en quins punts són recitades les capçaleres.
7.1. Capçaleres recitades: la propietat 'speak-header'
La propietat speak-header especifica si les capçaleres de la taula seran recitades abans de cada cel·la o només abans d'una cel·la quan aquesta cel·la estigui associada a una capçalera diferent que la cel·la prèvia.

Cada llenguatge de document pot tenir diferents mecanismes que permetin els autors especificar les capçaleres. Per exemple, en HTML 4.0 és possible especificar informació de capçalera amb tres atributs diferents ("headers", "scope" i "axis"), i l'especificació dóna un algorisme per a determinar la informació de capçalera quan aquests atributs no han estat especificats.

Exemple:



Aquesta és la imatge d'una taula amb cel·les de capçalera ("San Jose" i "Seattle") que no es troben en la mateixa columna o fila que les dades a les quals s'apliquen.

Aquest exemple en HTML presenta els diners gastats en menjars, hotels i transport en dues localitzacions (San Jose i Seattle, als EEUU) per a dies successius. Conceptualment, es pot pensar en la taula en termes d'un espai n-dimensional. Les capçaleres d'aquest espai són: localització, dia, categoria i subtotal. Algunes cel·les defineixen marques al llarg d'un eix mentre que altres donen els diners gastats (en dòlars) en els punts de dins d'aquest espai. El codi per a aquesta taula és:
   <TABLE>
      <CAPTION>Balanç de les Despeses del Viatge</CAPTION>
         <TR>
         <TH></TH>
	   <TH>Menjars</TH>
	   <TH>Hotels</TH>
	   <TH>Transport</TH>
	   <TH>subtotals</TH>
	   </TR>
	   <TR>
	   <TH id="san-jose" axis="san-jose">San Jose</TH>
	   </TR>
	   <TR>
	   <TH headers="san-jose">25-Ag-98</TH>
	   <TD>37.74</TD>
	   <TD>112.00</TD>
	   <TD>45.00</TD>
	   <TD></TD>
	   </TR>
	   <TR>
	   <TH headers="san-jose">26-Ag-98</TH>
	   <TD>27.28</TD>
	   <TD>112.00</TD>
	   <TD>45.00</TD>
	   <TD></TD>
	   </TR>
	   <TR>
	   <TH headers="san-jose">subtotal</TH>
	   <TD>65.02</TD>
	   <TD>224.00</TD>
	   <TD>90.00</TD>
	   <TD>379.02</TD>
	   </TR>
	   <TR>
	   <TH id="seattle" axis="seattle">Seattle</TH>
	   </TR>
	   <TR>
	   <TH headers="seattle">27-Ag-98</TH>
	   <TD>96.25</TD>
	   <TD>109.00</TD>
	   <TD>36.00</TD>
	   <TD></TD>
	   </TR>
	   <TR>
	   <TH headers="seattle">28-Ag-98</TH>
	   <TD>35.00</TD>
	   <TD>109.00</TD>
	   <TD>36.00</TD>
	   <TD></TD>
	   </TR>
	   <TR>
	   <TH headers="seattle">subtotals</TH>
	   <TD>131.25</TD>
	   <TD>218.00</TD>
	   <TD>72.00</TD>
	   <TD>421.25</TD>
	   </TR>
	   <TR>
	   <TH>Totals</TH>
	   <TD>196.27</TD>
	   <TD>442.00</TD>
	   <TD>162.00</TD>
	   <TD>800.27</TD>
	   </TR>
   </TABLE>
Proporcionant les dades modelades d'aquesta manera, els autors fan possible que els navegadors capaços d'emetre parla explorin la taula de maneres riques, per ex., cada cel·la podria ser recitada com una llista, repetint les capçaleres aplicables abans de les dades de cada cel·la:

San Jose, 25-Ag-98, Menjars:37.74
San Jose, 25-Ag-98, Hotels:112.00
San Jose, 25-Ag-98, Transport:45.00
...

El navegador també podria recitar les capçaleres només quan aquestes canviessin:

San Jose, 25-Ag-98, Menjars: 37.74
Hotels: 112.00
Transport: 45.00
26-Ag-98, Menjars: 27.28
Hotels: 112.00
...
Tancar
Pàgina Principal
Introducció al Manual d'HTML Dinàmic
Glossari
Referències























HTML 4.0
Introducció al manual d'HTML 4.0
Taules
Formularis
Objectes, imatges i applets
Scripts
Informació de l'idioma i sentit del text
Frames
Nous elements
Elements menyspreuats i obsolets
Fulls d'estil
Nous atributs de l'HTML 4.0
Índex d'atributs nous
Índex d'atributs menyspreuats
DTD
Annexe












Introducció als CSS
Introducció als CSS2 i al manual
Propietats CSS2
Fulls d'estil audibles
Model de caixa
Sintaxi i tipus bàsics de dades
Model de formatat visual
Detalls del model de formatat visual
Assignar valors de propietats, la cascada i l'herència
Interfície d'usuari
Efectes visuals
Text
Taules
Fonts
Contingut generat, numeració automàtica i llistes
Colors i fons
Selectors
Tipus de mitjans
Mitjans paginats
Suport de CSS2
Annexe




Introducció al DOM
DOM Nivell 1 - Nucli
DOM Nivell 1 - HTML
Articles sobre el DOM






















Programació en DHTML
Demos