{"id":124702,"date":"2019-01-02T18:02:01","date_gmt":"2019-01-02T17:02:01","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-fluid-table\/"},"modified":"2025-02-03T16:44:32","modified_gmt":"2025-02-03T15:44:32","slug":"create-a-fluid-table","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/crear-una-tabla-fluida","title":{"rendered":"Crear una tabla de fluidos"},"content":{"rendered":"<p>Una tabla fluida es una forma sencilla de a\u00f1adir muchos elementos a la pantalla y distribuirlos de manera uniforme y con capacidad de respuesta. <video style=\"max-width:820px; width:100%; padding:20px 0px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/fluid-table-example.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/fluid-table-example.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/fluid-table-example.png\" alt=\"Widget de tabla fluida\">Widget de tabla fluida<\/source><\/video><br \/>\nHe aqu\u00ed c\u00f3mo crear una:<\/p>\n<ol>\n<li>Arrastra un widget de Tabla al Lienzo.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15166\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget.png\" alt=\"Widget de tableta\" width=\"755\" height=\"401\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget.png 1640w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget-300x159.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget-768x407.png 768w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget-1024x543.png 1024w\" sizes=\"(max-width: 755px) 100vw, 755px\" \/><\/li>\n<li>Cambia sus columnas y filas para reflejar los diferentes espacios donde te gustar\u00eda colocar elementos. En nuestro ejemplo, nuestra tabla act\u00faa como pie de p\u00e1gina, por lo que tenemos dos columnas y una fila. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15167\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/ColumnsandRows.png\" alt=\"Columnas y filas\" width=\"755\" height=\"410\"><\/li>\n<li>Como nuestra Tabla es un pie de p\u00e1gina, f\u00edjala a la parte inferior de la pantalla y establece su anchura al 100%.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15168\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/PinandWidth.png\" alt=\"Tabla de clavijas y anchura porcentual\" width=\"755\" height=\"403\"><\/li>\n<li>En la Celda 1, cambia su Disposici\u00f3n a vertical, y luego arrastra dos widgets de Texto a la celda. Uno se colocar\u00e1 autom\u00e1ticamente encima del otro. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15169\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/DragTextWidgets.png\" alt=\"Arrastrar widgets de texto\" width=\"755\" height=\"408\"><\/li>\n<li>En la Celda 2, cambia su Disposici\u00f3n a horizontal y su Alineaci\u00f3n a centrada. Cambia su espaciado horizontal a 30. Arrastra unos cuantos iconos y un widget Bot\u00f3n a esta celda. Se colocar\u00e1n autom\u00e1ticamente uno al lado del otro con un espacio de 30px entre ellos.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15171\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/CellLayout.png\" alt=\"Disposici\u00f3n de las celdas\" width=\"755\" height=\"401\"><\/li>\n<li>Selecciona el widget Bot\u00f3n y cambia su anchura al 37%. Tambi\u00e9n puedes a\u00f1adir un margen alrededor del Bot\u00f3n si quieres que tenga m\u00e1s separaci\u00f3n con los iconos. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15172\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/CellWidth.png\" alt=\"Ancho de celda\" width=\"755\" height=\"403\"><\/li>\n<li>Con el Bot\u00f3n a\u00fan seleccionado, crea un evento \u00abAl cambiar el tama\u00f1o de la ventana\u00bb + \u00abOcultar\u00bb, y selecciona el Bot\u00f3n como objetivo a ocultar.\n<div class=\"embed-container\" style=\"padding-bottom:56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745761873\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li>Crea una condici\u00f3n para esta acci\u00f3n, de forma que s\u00f3lo oculte el bot\u00f3n cuando la Pantalla sea demasiado peque\u00f1a. Haz clic en el texto \u00abA\u00f1adir condici\u00f3n\u00bb. Aparecer\u00e1 el constructor de Expresiones Condicionales.Sigue estos pasos para crear la condici\u00f3n:\n<div class=\"embed-container\" style=\"padding-bottom:56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745761896\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p><strong>1.<\/strong> Haz clic en la pesta\u00f1a \u00abConstantes\u00bb. Arrastra el icono \u00abAncho de ventana\u00bb al espacio abierto en la expresi\u00f3n <strong>2.<\/strong> Haz clic en la pesta\u00f1a \u00abFunciones\u00bb y busca la secci\u00f3n \u00abComparadores\u00bb. Arrastra un icono &#8216;Menor que&#8217; (&#8216;&lt;&#8216;) junto al icono &#8216;Ancho de ventana&#8217; <strong>3.<\/strong> Por \u00faltimo, en el espacio abierto que aparece junto al icono &#8216;Menor que&#8217; (&#8216;&lt;&#8216;), haz doble clic y escribe 900 <strong>4.<\/strong> Haz clic en Aceptar para terminar de construir la condici\u00f3n <\/p>\n<\/li>\n<li>Haz clic en el texto \u00abSi no\u00bb, que abrir\u00e1 el cuadro de di\u00e1logo Eventos. Crea un evento \u00abAl cambiar el tama\u00f1o de la ventana\u00bb + \u00abMostrar\u00bb, y selecciona el Bot\u00f3n como objetivo a mostrar. Haz clic en Aceptar para terminar de crear el evento. No es necesario crear una condici\u00f3n para este evento.\n<div class=\"embed-container\" style=\"padding-bottom:56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745761932\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p>Ya est\u00e1. Haz clic en \u00abSimular\u00bb y cambia la anchura de la ventana para ver c\u00f3mo funciona tu tabla de fluidos. <\/p>\n<div><strong>Nota:<\/strong> La configuraci\u00f3n de la simulaci\u00f3n debe ajustarse para que se expanda a la anchura del navegador. Puedes especificarlo en los ajustes de simulaci\u00f3n o en la ventana de simulaci\u00f3n. <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15298\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/SimulationSetting.png\" alt=\"Ajuste de simulaci\u00f3n\" width=\"755\" height=\"491\"><br \/>\nPuedes <a href=\"https:\/\/s3-eu-west-1.amazonaws.com\/justinmind\/examples\/FluidTable.vp\">descargar nuestro ejemplo aqu\u00ed.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una tabla fluida es una forma sencilla de a\u00f1adir muchos elementos a la pantalla y distribuirlos de manera uniforme y con capacidad de respuesta. Widget de&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8418,8440],"tags":[],"class_list":["post-124702","post","type-post","status-publish","format-standard","hentry","category-formacion","category-prototipado-responsivo"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124702"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124702"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124702\/revisions"}],"predecessor-version":[{"id":126161,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124702\/revisions\/126161"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}