Haciendo mejores tablas HTML

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 la mesa requiere más que simplemente hacer que la mesa se vea bien. También debería ser un sistema útil de entrega de información. Si el objetivo de la tabla no es transmitir información, entonces no debería usar una tabla para lo que sea que esté 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 obtener el máximo control sobre cada parte de la tabla (filas, celdas), puede considerar darles valores de ID individuales. Agregar valores de clase también te 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

De hecho, significa que las columnas solo existen 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 de TD en una fila una clase de, por ejemplo, "firstCol", proporciona una forma de hacer referencia directa 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 tablas de respuesta, pero las tablas y la capacidad de respuesta no van bien juntas. Diseñar sus mesas desde el principio para que quepan en una pantalla móvil en modo retrato es un movimiento 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.

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

Usar PHP para construir sus tablas a partir de la información de la base de datos es siempre una buena idea, y definitivamente es preferible 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 están diseñadas, no solo suceden. Cuando diseñas un sistema de entrega de información, quieres que sea eficiente y efectivo. 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

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.