{"id":745,"date":"2021-05-25T08:00:10","date_gmt":"2021-05-25T06:00:10","guid":{"rendered":"http:\/\/webposible.com\/xposible\/?p=745"},"modified":"2021-05-24T11:28:47","modified_gmt":"2021-05-24T09:28:47","slug":"tablas-html-maquetadas-con-css-grid-tiene-sentido","status":"publish","type":"post","link":"http:\/\/webposible.com\/xposible\/2021\/tablas-html-maquetadas-con-css-grid-tiene-sentido\/","title":{"rendered":"Tablas HTML maquetadas con CSS Grid: \u00bfTiene sentido?"},"content":{"rendered":"<p>Hace algunas semanas maquet\u00e9 una tabla en html usando los elementos propios de la tabla (<code>table<\/code>, <code>caption<\/code>, <code>thead<\/code>, <code>tbody<\/code>, <code>th<\/code> y <code>td<\/code> y no hubo <code>tfoot<\/code> porque la tabla no ten\u00eda).<\/p>\n<p>\u2014 \u00bfPero que has hecho?<br \/>\n\u2014 Hacer una tabla.<br \/>\n\u2014 Pero ya no se hacen as\u00ed.<\/p>\n<p>Y me recomend\u00f3 la lectura del siguiente art\u00edculo: <a lang=\"en\" href=\"https:\/\/www.danielsalvado.com\/blog\/responsive-data-tables-with-css-grid\/\" hreflang=\"en\">Responsive data tables with <abbr lang=\"en\" title=\"Cascading Style Sheets\">CSS<\/abbr> Grid &#8211; Revisited<\/a>. Resumiendo el argumento del art\u00edculo, para hacer una tabla accesible se usan elementos como <code>div<\/code> y <code>span<\/code> para luego a\u00f1adir CSS usando las propiedades de <a lang=\"en\" href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/\" hreflang=\"en\"><abbr lang=\"en\" title=\"Cascading Style Sheets\">CSS<\/abbr> Grid<\/a> <code>display: grid;<\/code> y <code>grid-template-columns<\/code>.<\/p>\n<p>En Septiembre har\u00e9 20 a\u00f1os que llevo como desarrollador web, y hemos pasado de utilizar tablas para maquetar absolutamente todo (ojo, que todav\u00eda se hace y se encuentra c\u00f3digo con esta t\u00e9cnica totalmente desaconsejada) a <strong>no usar tablas ni para maquetar datos tabulares<\/strong>.<\/p>\n<p>Y la lista puede seguir con enlaces que parecen botones, textos que parecen t\u00edtulos (\u00bfos suena <code>.h1<\/code>?), y otras ocurrencias.<\/p>\n<p>El avance que se ha producido en <abbr lang=\"en\" title=\"Cascading Style Sheets\">CSS<\/abbr> con nuevas especificaciones y una gran velocidad de soporte por los principales navegadores, nos permite hacer aut\u00e9nticas virguer\u00edas con los estilos, y es algo genial. Pero no tenemos que olvidar algo esencial: <strong>las hojas de estilo <abbr lang=\"en\" title=\"Cascading Style Sheets\">CSS<\/abbr> son para definir estilos, y el <abbr lang=\"en\" title=\"Hyper Text Markup Language\">HTML<\/abbr> define la estructura de una p\u00e1gina web<\/strong>.<\/p>\n<p><em>El viejo truco de desactivar los estilos, y plantearse otras formas de navegar (lector de pantalla, por ejemplo), nos pueden ayudar a decidir la opci\u00f3n m\u00e1s correcta.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hace algunas semanas maquet\u00e9 una tabla en html usando los elementos propios de la tabla (table, caption, thead, tbody, th y td y no hubo tfoot porque la tabla no ten\u00eda). \u2014 \u00bfPero que has hecho? \u2014 Hacer una tabla. \u2014 Pero ya no se hacen as\u00ed. Y me recomend\u00f3 la lectura del siguiente art\u00edculo: [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19,32],"tags":[],"_links":{"self":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/745"}],"collection":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/comments?post=745"}],"version-history":[{"count":1,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/745\/revisions"}],"predecessor-version":[{"id":746,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/745\/revisions\/746"}],"wp:attachment":[{"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/media?parent=745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/categories?post=745"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/tags?post=745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}