Las tablas de datos no manejan muy bien el diseño responsivo. Desafortunadamente, este momento existe. El diseño responsivo consiste en personalizar su diseño para adaptarse a diferentes tamaños de pantalla. Entonces, ¿qué sucede cuando la pantalla es más estrecha que el ancho mínimo de la tabla de datos? Puede alejar la imagen y ver la tabla completa, pero el tamaño del texto será demasiado pequeño para leerlo. O puede ampliar el punto de lectura, pero deberá desplazarse verticalmente horizontalmente y (lamentablemente) para ver la tabla. Las tablas de datos pueden ser bastante amplias y ciertamente lo son. Las tablas se pueden hacer flexibles en ancho (peso=100%), pero el contenido de las celdas puede volverse tan estrecho que simplemente no se puede ver.

Para evitar este desagradable momento se utilizan tablas adaptativas. Una tabla de este tipo mostrará una barra de desplazamiento horizontal si la pantalla es demasiado pequeña para mostrar el contenido completo.

Para crear una tabla responsiva, agregue un elemento contenedor desbordamiento-x: automático alrededor

Nota. En OS X Lion (en Mac), las barras de desplazamiento están ocultas de forma predeterminada y solo aparecen cuando están en uso (incluso si están configuradas en "overflow:scroll" o auto).

Las webs adaptativas hace tiempo que dejaron de ser una curiosidad y cada vez son más comunes. Teniendo en cuenta las últimas novedades en el ranking de los motores de búsqueda (si alguien no lo sabe, en las búsquedas desde dispositivos móviles se da prioridad a los sitios responsivos), el número de estos sitios seguirá creciendo. Se puede estar en contra de la adaptación para dispositivos móviles o a favor, pero el hecho es que cada vez más los clientes exigen que su sitio web sea adaptable y los webmasters tienen que hacerlo.

Uno de los principales problemas a la hora de adaptar un sitio a diferentes resoluciones son las tablas. Especialmente si contienen muchos datos. Veamos dos formas de diseñar una tabla responsiva.

Primero, veamos cómo se ve la tabla:

Seamos honestos: una tabla así no puede considerarse verdaderamente adaptativa. Se ve bien en dispositivos móviles, nada sobresale en ninguna parte y el diseño del sitio no "fluye". Este método es muy adecuado si las tablas son escasas en su sitio y no tiene sentido conectar algún complemento y escribir estilos adicionales debido a ellos. Bootstrap utiliza este método. Entonces, ¿cómo funciona esto?

Es simple: la tabla está envuelta en un div, que se establece en un ancho máximo del 100% y desbordamiento: automático.

Si la mesa es larga, también puedes establecer la altura máxima y fijar el encabezado de la mesa.

El resultado, como el siguiente ejemplo, se puede ver en esta página.

Si tiene tablas con frecuencia en su sitio, tiene sentido utilizar el complemento Footable.

Primero debe conectar el complemento (descargarlo en GitHub o conectarlo desde una CDN) y también inicializarlo:

$(función() ( $(".table").footable(); ));

Aquí necesitamos aclarar algo: por alguna razón el script no cuenta el ancho de la ventana gráfica, sino el ancho de la tabla. Para solucionar este problema, es necesario "modernizar" ligeramente el script:

JQuery(función () ( jQuery(".table").footable(( calcularWidthOverride: función() ( retorno (ancho: jQuery(ventana).width()); ) )); ))

En la inicialización indicamos la clase de tabla o solo la etiqueta de la tabla si queremos que todas las tablas del sitio sean adaptativas.

¿Qúe significa todo esto? En las tabletas, las columnas “RAM”, “Diagonal”, “PPI” y “Batería” estarán ocultas. Cuando se reduzca a teléfonos, la columna “Precio” también los unirá.

Los puntos de control se pueden especificar en la inicialización:

JQuery(function () ( jQuery(".table").footable(( calcularWidthOverride: function() ( return (ancho: jQuery(window).width()); ), puntos de interrupción: ( móvil: 0, tableta: 720, escritorio: 1024 ) );

Esto significa que en el rango 0-720 la regla se aplica para dispositivos móviles, 720-1024 para tabletas y por encima de 1024 para computadoras de escritorio. No hay nada que le impida crear aún más reglas si es necesario.

También puede asegurarse de que alguna columna esté expandida de forma predeterminada. Para hacer esto, especifique el atributo de datos data-expanded="true"

Las capacidades del complemento no terminan ahí, pero es suficiente para crear tablas adaptables. La próxima vez veremos otras posibilidades.

ventanas: Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1].

linux: Firefox 1.5+, Google Chrome/Chromium, Opera 9.5+, SeaMonkey 1.0+ [2].

Si una tabla HTML contiene demasiados datos, se vuelve más ancha que el espacio disponible en la página y comienza a desbordarse. Para remediar la situación, puede agregar desplazamiento horizontal a la tabla. Ejemplo:

HTML/XHTML. Código:

1

2

3

4

5

6

7

8

9

10

tabla_datos_1

Tabla_datos_2

Tabla_datos_3

Tabla_datos_4

Tabla_datos_5

Tabla_datos_6

Tabla_datos_7

Tabla_datos_8

Tabla_datos_9

Tabla_datos_10

tabla (pantalla: bloque; desbordamiento-x: auto;)

/* CSS adicional, solo para darle algo de apariencia al ejemplo: */

tabla (colapso de frontera: colapso;)

tabla td,th (relleno: 10px; borde: 1px #000 sólido;)

Nota: La propiedad CSS display: block hace que la tabla ocupe solo el ancho necesario para acomodar los datos sin distorsión visual. No más, sin ocupar todo el ancho del espacio disponible en la página. Incluso si se agrega ancho: 100% al código CSS. Ejemplo:

Aliosque subditos y tema

Existen muchos servicios en línea para crear sitemap.xml. Sin embargo, puede hacerlo usted mismo en su computadora usando el navegador Lynx y varias utilidades de línea de comandos de Linux. El siguiente es un ejemplo de un script bash llamado "sitemap.sh" que los utiliza. Script Bash que crea el archivo sitemap.xml: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat cat /home/me/sitemap/www/traverse.dat | sed -e "s/\\.//g" | ordenar | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/ \&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i " s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/