Por extraño que parezca, una de las tecnologías web más difíciles de dominar es una de las primeras en estar disponibles para el navegador después de un texto plano e imágenes. El problema es aún mayor hoy en día con tantos tipos de dispositivos diferentes en los que hay que pensar.
Las tablas perfectas son casi imposibles de crear a menos que contengan tan pocos elementos que es probable que no se desencadenen problemas. Los tipos de errores que pueden surgir incluyen:
- Ajuste de texto incorrecto
- Errores de justificación
- Representación de tablas fuera de la pantalla
- Problemas de desplazamiento
- Errores de altura de fila
- Errores de ancho de columna
- Fealdad general o desorden
En este artículo veremos cómo evitar problemas como ese, para que sus tablas tengan la mejor oportunidad de crear una buena impresión.
Estrategias de evitación para evitar
Debido a que las tablas son tan difíciles de acertar, algunas personas intentan evitar usarlas. Algunas estrategias comunes son usar CSS para crear una tabla falsa y usar una imagen de la tabla de datos sin implementarla en el código.
Ambas estrategias de evitación tienen defectos y deben evitarse. El uso de CSS para imitar una tabla carece de la estructura semántica inherente a una tabla, lo que puede crear problemas de usabilidad y accesibilidad.
La imagen de una tabla no sufrirá los problemas que se enumeran en la introducción, pero degrada su potencial de SEO y no puede modificarse fácilmente si necesita actualizar sus datos. También introduce problemas de usabilidad y accesibilidad.
Los marcos son tus amigos
Los marcos comunes como Bootstrap y Foundation contienen muchas herramientas para ahorrar tiempo, y las tablas no son una excepción. Crear una mesa de aspecto elegante en Bootstrap no es difícil, pero tiene algunas limitaciones si se construye fuera del bastidor sin agregar un poco de sastrería a medida a sus esfuerzos.
Las miradas no lo son todo.
Debido a que el contenido y el estilo siempre deben ser independientes, puede tener sentido construir su tabla en HTML simple primero para asegurarse de que se vea bien antes de que se aplique cualquier estilo de tabla especial.
Esto también puede ser útil para recordarle que una buena construcción de mesas requiere algo más que hacer que la mesa se vea bien. También debería ser útil enformatsistema de entrega de iones. Si el objetivo de la tabla no es transmitir enformation, entonces no deberías usar una mesa para lo que sea que estés haciendo.
Objetivo de accesibilidad
Algunas personas tienen dificultades para ver y leer el texto impreso, por lo que es una buena idea hacer que las tablas sean accesibles para ellos. Puede encontrar todo lo que necesita saber para hacer que sus mesas sean más accesibles desde WebAIM.
Considere dar valores de ID a los componentes de la tabla
Para un control máximo sobre cada parte de la tabla (filas, celdas), puede considerar darlas endivivalores de ID dual. Agregar valores de clase también le dará aún más flexibilidad.
Hacer estas cosas crea mucho más trabajo para usted, por lo que solo es práctico cuando necesita poder afinar cualquier elemento por referencia. Si decide hacer esto, podrá manipular directamente cualquier elemento de la tabla mediante JavaScript y CSS.
Una de las complejidades de la creación de tablas es que declaramos filas pero no columnas. Las columnas se crean dinámicamente, calculadas de acuerdo con la cantidad de elementos de datos que coloca en cada fila. Esta es la razón por la cual las tablas se agregan a su página de tiempo de carga
Efectivamente, significa que las columnas existen solo en un sentido abstracto antes de que se represente la página, por lo que no puede darles ningún tipo de referencia. Al asignar al primer elemento TD de una fila una clase de, por ejemplo, "firstCol", proporciona una forma de hacer referencia directamente a una columna.
Las mesas compactas son las mejores
Se ha puesto de moda construir todo con componentes grandes y de alta visibilidad. Desde un punto de vista de accesibilidad, esto es maravilloso. En términos de facilidad de uso, sin embargo, no siempre es la mejor manera, ya que puede conducir a problemas.
Los desarrolladores de Bootstrap experimentaron con responsive mesas, pero mesas y responsiveness no van bien juntos. Diseñar sus tablas desde el principio para que quepan en una pantalla móvil en modo vertical es una decisión inteligente.
Las mesas siempre deben ser desplazables.
Es una buena práctica establecer siempre el valor de desbordamiento de una tabla en automático, pero no en la propia tabla. En su lugar, envuelve la tabla dentro de un div, algo como esto:
Luego hay una gran cantidad de código PHP que construye el cuerpo de la tabla, cerrando con esto:
La parte que hace el trabajo de hacer que la tabla se pueda desplazar está en la primera línea, donde la tabla de división se ajusta a una altura fija y tiene su valor de desbordamiento establecido en automático. Si hace esto en la propia tabla, en lugar de en un envoltorio alrededor de la tabla, puede tener efectos no deseados.
Llama a los bateadores pesados si necesitas
Para tablas simples, esto es excesivo, pero cuando tiene una tabla que realmente necesita ventajas como anchos de columna ajustables y ordenación de columnas, hay algunas aplicaciones jQuery poderosas que se han creado para ayudar con la tarea de construir tablas complejas.
La opción más impresionante que desearía para un sitio de WordPress es wpDataTables, una tabla de WordPress plugin que facilita su trabajo con tablas, gráficos y gestión de datos. Con él, puedes crear responsive Tablas y gráficos de WordPress.
La plugin funciona muy rápido con tablas grandes, hasta millones de filas, pero también puede hacer muchas personalizaciones y filtrar las tablas casi como si estuviera en Excel o Google Spreadsheets.
El más grande y más probable es el mejor. Flexigrid. Esto tiene un aspecto similar a una tabla de Java Swing y funciona de una manera similar.
Las características de Flexigrid pueden incluso ser demasiado para lo que necesita, por lo que en este caso podría considerar TableSorter, que es un poco más simple.
Si bien las características de este tipo de herramientas pueden ser emocionantes, es importante que aumenten aún más el tiempo de carga de su página. Es mejor guardar este tipo de cosas para cuando realmente debes tenerlas.
Las herramientas de conversión automatizadas normalmente no dan los mejores resultados
Hay complementos de CMS disponibles que le permiten convertir tablas de documentos a tablas HTML. Estos no son tan buenos como construir la mesa manualmente, por lo que si desea obtener resultados superiores, este tipo de automatización no es el camino a seguir.
Tu propia automatización casera está bien, sin embargo
Usando PHP para construir sus tablas desde la base de datos enformation es siempre una buena idea, y definitivamente preferible a escribir todo manualmente. La diferencia aquí es que tienes control total sobre cómo funciona la automatización.
Cuando utiliza la automatización de terceros, el autor de terceros tiene que hacer suposiciones sobre su tabla. Esto significa que terminará con una tabla genérica que puede carecer de muchas características en comparación con la creación de la tabla.
Usa las mesas apropiadamente y te recompensarán.
Las buenas mesas se diseñan, no surgen por casualidad. Cuando diseñas una entradaformatsistema de suministro de iones, desea que sea eficiente y eficaz. Asegúrese de que sus tablas estén diseñadas para ser exactamente eso, y su sitio obtendrá el máximo beneficio de su inclusión.
imagen del encabezado cortesía de
Comentarios Comentarios 0