Les taules s’han fet servir molt en el desenvolupament web per a maquetar contingut, tal i com far\u00edem en un Word per posar coses a dreta i esquerra. Per\u00f2 aquesta no \u00e9s la seva finalitat i, per tant, no les farem servir mai amb la finalitat de canviar la disposici\u00f3 dels elements, sin\u00f3 amb una finalitat informativa, sem\u00e0ntica.<\/p>\n\n\n\n
Sem\u00e0nticament, les taules permeten mostrar informaci\u00f3 de manera estructurada i accessible.<\/p>\n\n\n\n
El navegador llegeix l’HTML de les taules i les representa visualment, per\u00f2 podem controlar-ne l’aparen\u00e7a amb CSS. A les cel\u00b7les de les taules podem afegir qualsevol tipus de contingut: text, imatges, altres taules,…<\/p>\n\n\n\n
Per crear taules farem servir les seg\u00fcent etiquetes:<\/p>\n\n\n\n
\n
table<\/em> – per indicar on comen\u00e7a i on acaba la taula<\/li>\n\n\n\n
tr<\/em> – table row: per indicar on comen\u00e7a i on acaba cada fila<\/li>\n\n\n\n
td<\/em> – table description: per indicar on comen\u00e7a i acaba un text descriptiu (cel\u00b7la)<\/li>\n\n\n\n
th<\/em> – table heading: per indicar on comen\u00e7a i on acaba un text que fa de cap\u00e7alera (cel\u00b7la d’encap\u00e7alament)<\/li>\n<\/ul>\n\n\n\n
A m\u00e9s, podem fer servir altres etiquetes com:<\/p>\n\n\n\n
\n
thead<\/em> – per indicar on comenn\u00e7a i on acaba aquella fila o files que formen la cap\u00e7alera de la taula<\/li>\n\n\n\n
tbody<\/em> – per indicar on comen\u00e7a i on acaba aquella fila o files que formen el cos de la taula<\/li>\n\n\n\n
tfoot – per indicar on comen\u00e7a i on acaba aquella fila o files que formen el peu de la taula<\/li>\n\n\n\n
caption<\/em> – per posar un text descriptiu del contingut de la taula (un resum)<\/li>\n<\/ul>\n\n\n\n
Podem estilar les taules com ho fem amb qualsevol altre element d’HTML. Haur\u00e0s de tenir en compte:<\/p>\n\n\n\n
\n
Les taules (table) tenen, per defecte, el tipus de display \u00abtable\u00bb i la propietat \u00abborder-collapse\u00bb amb el valor \u00abseparate\u00bb (aix\u00f2 fa que les cel\u00b7les estiguin separades unes de les altres). La majoria de reset de CSS estableixen el valor de border-collapse a \u00abcollapse\u00bb<\/li>\n\n\n\n
Les files (tr) tenen, per defecte, el tipus de display \u00abtable-row\u00bb<\/li>\n\n\n\n
Les cel\u00b7les (td i th) tenen, per defecte, el tipus de display \u00abtable-cell\u00bb<\/li>\n\n\n\n
La cap\u00e7alera (thead) t\u00e9 per defecte el tipus de display \u00abtable-header-group\u00bb<\/li>\n\n\n\n
El cos (tbody) t\u00e9 per defecte el tipus de display \u00abtable-row-group\u00bb<\/li>\n\n\n\n
El resum (caption) t\u00e9 per defecte el tipus de diplay \u00abtable-caption\u00bb<\/li>\n<\/ul>\n\n\n\n
Aix\u00f2 ho has de tenir en compte, perqu\u00e8 hi haur\u00e0 algunes propietats que no podr\u00e0s aplicar a aquests elements. Per exemple: Les files no podran tenir ni border ni margin<\/p>\n\n\n\n
El n\u00famero de cel\u00b7les de cada fila ha de ser sempre el mateix per a que el navegador sigui capa\u00e7 de fer-la visible. Si necessitem fusionar cel\u00b7les podem fer servir els atributs \u00abcolspan<\/code>\u00bb i \u00abrowspan<\/code>\u00ab<\/p>\n\n\n\n
\n
colspan indica que una cel\u00b7la s’expandeix a altres columnes<\/li>\n\n\n\n
rowspan indica que una cel\u00b7la s’expandeix a altres files<\/li>\n<\/ul>\n\n\n\n
En aquest exemple, hem fet servir rowspan a la columna \u00abL\u00ednia\u00bb i colspan a la fila del tren de les 9.10 i a la cap\u00e7alera. Tamb\u00e9 hem fusionat les cel\u00b7les del tfoot fent servir colspan.<\/p>\n\n\n\n
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-16.png\")
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-17.png\")
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-18.png\")
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-19.png\")
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-20.png\")
<\/figure>\n\n\n\n