{"id":1364,"date":"2020-05-28T16:15:01","date_gmt":"2020-05-28T14:15:01","guid":{"rendered":"http:\/\/blogs.uab.cat\/editorsweb\/?p=1364"},"modified":"2025-12-11T15:05:54","modified_gmt":"2025-12-11T13:05:54","slug":"bones-practiques-a-lhora-de-fer-taules","status":"publish","type":"post","link":"https:\/\/webs.uab.cat\/webedit\/2020\/05\/28\/bones-practiques-a-lhora-de-fer-taules\/","title":{"rendered":"Bones pr\u00e0ctiques a l&#8217;hora de fer taules"},"content":{"rendered":"\n<p class=\"wp-block-uab-entradeta entradeta\">Una taula \u00e9s un recurs \u00fatil per organitzar un grup de dades i ens pot ajudar a fer-les m\u00e9s entenedores. Per\u00f2 com tot en aquesta vida, conv\u00e9 no abusar-ne i, quan les fem, seguir un conjunt de bones pr\u00e0ctiques.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Abans de fer una taula conv\u00e9 que ens preguntem: realment en tenim necessitat?<\/p>\n\n\n\n<dl class=\"pir\">\n<dt>Quan conv\u00e9 fer una taula<\/dt>\n<\/dl>\n\n\n\n<dl class=\"pir\">\n<dd>Quan tingueu un conjunt de valors&nbsp;\/ informacions&nbsp;que tinguin una relaci\u00f3 directa.<\/dd>\n<\/dl>\n\n\n\n<dl class=\"pir\">\n<dt>Quan no hem de fer una taula?<\/dt>\n<\/dl>\n\n\n\n<dl class=\"pir\">\n<dd>Per maquetar els elements d&#8217;un text.<\/dd>\n<\/dl>\n\n\n\n<dl class=\"pir\">\n<dt>Com fer la taula en el gestor de continguts?<\/dt>\n<\/dl>\n\n\n\n<dl class=\"pir\">\n<dd>Caldr\u00e0 seguir els passos seg\u00fcents:<\/dd>\n<\/dl>\n\n\n\n<p><strong>1.\u00a0Inserir taula<\/strong><br>Sempre que sigui possible, generar la taula directament des de la finestra del ckeditor i evitar introduir-la mitjan\u00e7ant &#8220;copiar i enganxar&#8221;. El bot\u00f3 per introduir taules \u00e9s el seg\u00fcent: <a href=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/31\/2019\/04\/Taula.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"20\" height=\"20\" class=\"alignnone size-full wp-image-1033\" src=\"https:\/\/webs.uab.cat\/edicio-web\/wp-content\/uploads\/sites\/31\/2019\/04\/Taula.gif\" alt=\"Bot\u00f3 d'inserir taula\"><\/a><\/p>\n\n\n\n<p>Veureu que ara quan poseu el ratol\u00ed a sobre el text alternatiu que surt a sobre del bot\u00f3 diu &#8220;Taula responsive&#8221;.<\/p>\n\n\n\n<p><strong>2.&nbsp;Configurar els par\u00e0metres b\u00e0sics<\/strong><br>Recentment hem aplicat canvis en la manera de crear les taules per a que aquestes s\u2019adaptin autom\u00e0ticament a totes les mides de pantalla i siguin accessibles.&nbsp;Per aix\u00f2, quan cliquem a inserir taula, el quadre de configuraci\u00f3 que ens apareixer\u00e0&nbsp;ser\u00e0 aquest:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"375\" height=\"413\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2020\/05\/configurar-taula.gif\" alt=\"Quadre de configuraci\u00f3 de la taula\" class=\"wp-image-6609\"\/><\/figure>\n<\/div>\n\n\n<p>Cal que definiu el n\u00famero de files i de columnes i que ompliu el t\u00edtol de la taula.&nbsp;El n\u00famero de files ha de ser sense comptar les files que faran de t\u00edtol de columna.&nbsp;\u00c9s obligatori definir un t\u00edtol de taula.<\/p>\n\n\n\n<p><strong>3. Emplenar&nbsp;la resta de dades<\/strong><br>D&#8217;entrada la taula es visualitzar\u00e0 aix\u00ed en l&#8217;editor de text:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"115\" height=\"209\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2020\/05\/1avisualitzacio-taula.gif\" alt=\"Primera visualitzaci\u00f3 de la taula en l'editor de text\" class=\"wp-image-6607\"\/><\/figure>\n<\/div>\n\n\n<p>Tranquils, l&#8217;amplada de la taula s&#8217;adaptar\u00e0 al contingut que hi escriviu. Entenem que per les persones a les quals els hi agrada donar format als textos com si estiguessin treballant en un word aquesta visualitzaci\u00f3 inicial us pot resultar dif\u00edcil d\u2019entomar d\u2019entrada. Respireu, buideu el vostre cap d\u2019idees com ara justificar textos, posar colors a les cel\u00b7les o negretes i nom\u00e9s doteu de contingut a la taula. Quan ja la tingueu, mireu com queda a l&#8217;entorn de proves, segurament us dureu una grata sorpresa.<\/p>\n\n\n\n<p><strong>4. \u00c9s el moment de treballar l&#8217;accessibilitat i el SEO<\/strong><br>Quan comenceu a emplenar&nbsp;el contingut veureu que les cel\u00b7les de la fila superior tenen un format diferent. Aix\u00f2 \u00e9s degut a que estan marcades per \u00e9sser el t\u00edtol de la columna.&nbsp;El t\u00edtol de taula i el t\u00edtol de columna ajuden a que els lectors de pantalla que utilitzen les persones amb problemes de visi\u00f3 interpretin correctament les taules.&nbsp;Per tant,&nbsp;conv\u00e9 utilitzar un vocabulari descriptiu.&nbsp;Igualment, aquestes dades s\u00f3n llegides pels cercadors i per tant, tamb\u00e9 contribuiran al nostre posicionament.<\/p>\n\n\n\n<p><strong>5.&nbsp;Quant m\u00e9s senzilles, millor<\/strong><br>Eviteu combinar cel\u00b7les o dividir-les. Les taules han de ser el m\u00e0xim d&#8217;uniformes possibles. D&#8217;aquesta manera s\u00f3n m\u00e9s f\u00e0cils de comprendre per part dels usuaris i s&#8217;afavoreix a la seva lectura per part d\u2019un lector de pantalla.<\/p>\n\n\n\n<p>Tampoc doneu cap format de color a les cel\u00b7les, el full d&#8217;estils ja ho far\u00e0 per vosaltres. Penseu que el disseny de taula que s&#8217;ha definit t\u00e9 en compte els colors corporatius de la Universitat aix\u00ed com criteris per a una bona visualitzaci\u00f3.<\/p>\n\n\n\n<p>El disseny de taula per defecte a partir d&#8217;ara ser\u00e0 el seg\u00fcent:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"137\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2020\/05\/taula-desktop.gif\" alt=\"Visualitzaci\u00f3 de la taula en format desktop\" class=\"wp-image-6610\"\/><\/figure>\n<\/div>\n\n\n<p>I quan es passi a la versi\u00f3 m\u00f2bil:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"471\" height=\"514\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2020\/05\/taula-mobile.gif\" alt=\"Visualitzaci\u00f3 de la taula en m\u00f2bil\" class=\"wp-image-6611\"\/><\/figure>\n<\/div>\n\n\n<p>Si seguiu aquestes indicacions contribuireu a augmentar la qualitat del web.<\/p>\n\n\n\n<p class=\"wp-block-uab-info missatge\">Per a m\u00e9s informaci\u00f3 sobre com fer taules accessibles podeu consultar aquesta p\u00e0gina d&#8217;Atenci\u00f3 Ciutadana de la Generalitat: <a href=\"http:\/\/atenciociutadana.gencat.cat\/ca\/serveis\/webs\/accessibilitat\/errors-mes-comuns\/taules\" target=\"_blank\" rel=\"noopener\">Com construir taules accessibles<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":24,"featured_media":6608,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,13,7,72],"tags":[19,56],"class_list":["post-1364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibilitat","category-edicio-de-textos","category-normes-destil","category-novetats","tag-accessibilitat","tag-taules"],"_links":{"self":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts\/1364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/comments?post=1364"}],"version-history":[{"count":3,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts\/1364\/revisions"}],"predecessor-version":[{"id":6614,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts\/1364\/revisions\/6614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/media\/6608"}],"wp:attachment":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/media?parent=1364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/categories?post=1364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/tags?post=1364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}