![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-18.png\")
<\/p>\nUna taula \u00e9s un mitj\u00e0 per organitzar dades en files i columnes.<\/p>\n
En documents HTML una taula pot ser considerada, resumidament, com un grup de files<\/b> on cadascuna cont\u00e9 a un grup de cel\u00b7les<\/b>. Aix\u00f2 \u00e9s conceptualment diferent a un grup de columnes que cont\u00e9 a un grup de files, i aquesta difer\u00e8ncia tindr\u00e0 un impacte en la composici\u00f3 i comportament de la taula.<\/p>\n
Una taula b\u00e0sica pot ser declarada usant tres elements: table<\/b> (el contenidor principal), tr<\/b> (representant a les files) i td<\/b> (representant a les cel\u00b7les).<\/p>\n
<\/p>\n
Es pot veure en l’exemple anterior, el concepte de files contenint columnes. Es fa evident com les cel\u00b7les, que han estat numerades d’acord a la seva aparici\u00f3 en el codi, segueixen una seq\u00fc\u00e8ncia en la representaci\u00f3 que va d’esquerra a dreta, una fila per vegada.<\/b><\/p>\nCel\u00b7les de cap\u00e7alera<\/h1>\n
Una cel\u00b7la de cap\u00e7alera \u00e9s un tipus especial de cel\u00b7la utilizada per organitzar i categoritzar altres cel\u00b7les de la taula. Es representen amb l\u2019element th.<\/b><\/p>\n
Exemple. Taula que mostra informaci\u00f3 sobre el clima dels pr\u00f2xims dies. Aqu\u00ed les cel\u00b7les de cap\u00e7alera, representades per l\u2019element th, s\u00f3n ubicades a la primera fila de la taula sobre les cel\u00b7les comunes.<\/i><\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-19.png\")
<\/p>\n
Podem observar com cada cel\u00b7la de cap\u00e7alera de la taula, ha adoptat un estil diferent per a identificar-la com a tal.<\/p>\n
L\u2019atribut scope aporta un mecanisme per indicar expl\u00edcitament a quines cel\u00b7les afecta una cel\u00b7la de cap\u00e7alera. Aquest atribut nom\u00e9s <\/b>pot ser declarat en una cel\u00b7la d’encap\u00e7alament i prendre els valors “col”, “row”, “colgroup” i “rowgroup”. Els valors “col” i “row” indiquen que la cel\u00b7la de cap\u00e7alera proveeix informaci\u00f3 per a la resta de les cel\u00b7les a la columna o fila (respectivament) en qu\u00e8 est\u00e0 present.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-20.png\")
<\/p>\n
La cel\u00b7la de la cantonada superior esquerra de la taula, proveiria informaci\u00f3 ambigua si l’atribut scope no estigu\u00e9s present<\/b>. En altres paraules, afectaria les cel\u00b7les en la seva columna, aix\u00ed com a les cel\u00b7les a la seva fila. La pres\u00e8ncia de l’atribut scope ha deixat en clar que les cel\u00b7les afectades per aquest encap\u00e7alat s\u00f3n aquelles en la mateixa fila<\/b>.<\/p>\nEl t\u00edtol<\/h1>\n
El t\u00edtol d’una taula \u00e9s un altre component que aporta a la llegibilitat<\/b>.<\/p>\n
En HTML, els t\u00edtols de les taules s\u00f3n inserits mitjan\u00e7ant l’element caption<\/b>, just despr\u00e9s de l’etiqueta d’obertura de la mateixa taula i abans que tots els altres elements de la seva estructura.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-21.png\")
<\/p>\n
La unificaci\u00f3 de cel\u00b7les \u00e9s un mecanisme mitjan\u00e7ant el qual un autor pot combinar o fusionar<\/b> dos o m\u00e9s cel\u00b7les adjacents (td i th) en una taula. Aquest efecte es pot aconseguir utilitzant els atributs colspan<\/b>, per unificaci\u00f3 horitzontal, i rowspan<\/b>, per unificaci\u00f3 vertical. Aquests atributs poden prendre un valor enter major a zero, que representa el nombre de cel\u00b7les que participaran en la unificaci\u00f3.<\/p>\n
La idea darrere d’aquest mecanisme s’explica per si mateixa: quan l’atribut colspan \u00e9s establert en una cel\u00b7la, indica als int\u00e8rprets que la mateixa ha d’abastar, no nom\u00e9s el seu propi espai, sin\u00f3 tamb\u00e9 l’espai d’un nombre de cel\u00b7les contig\u00fces cap a la seva dreta. El mateix succeeix per a l’atribut rowspan per\u00f2 cap avall. A causa de l’estructura de les taules en HTML, La unificaci\u00f3 nom\u00e9s pot fer-se cap a la dreta o cap avall. Fer-ho cap amunt o cap a l’esquerra consistiria un intent d’abastar espai ja utilitzat.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-22.png\")
<\/p>\n
HTML proveeix tres elements que poden ajudar els autors a organitzar la informaci\u00f3 presentada en una taula<\/b>. Aquests s\u00f3n: <thead><\/b>, per a agrupar les files que presenten infromaci\u00f3 de cap\u00e7alera; <tfoot><\/b> per contenir a les files que representen un peu o resum; i <tbody><\/b>, per representar un bloc de files que consisteix en un cos de dades.<\/p>\n
El cos de les taules tenen dues particularitats: primer, que pot haver-hi m\u00e9s d’un cos en una mateixa taula; i segon, que l’element tbody pot ser om\u00e8s quan la taula t\u00e9 nom\u00e9s un cos. De les taules que encaixen en el segon cas es diu que tenen un cos impl\u00edcit.<\/p>\n
Quan una taula t\u00e9 m\u00faltiples cossos, cada cos ha d’agrupar files que estan tem\u00e0ticament relacionades.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-23.png\")
<\/p>\n","protected":false},"excerpt":{"rendered":"
Una taula \u00e9s un mitj\u00e0 per organitzar dades en files i columnes. En documents HTML una taula pot ser considerada, resumidament, com un grup de files on cadascuna cont\u00e9 a un grup de cel\u00b7les. Aix\u00f2 \u00e9s conceptualment diferent a un grup de columnes que cont\u00e9 a un grup de files, i aquesta difer\u00e8ncia tindr\u00e0 un … <\/p>\n