Tabla

Aquí tienes la traducción del archivo fuente de la guía de diseño al español, manteniendo un tono natural y conservando los componentes MDX, bloques de código y términos técnicos:

La tabla se utiliza para la visualización intuitiva de datos estructurados de cualquier tamaño.

Un elemento atómico de la tabla es una celda. Las celdas forman columnas y filas en la tabla. La tabla siempre tiene una cabecera.

§Celda de tabla

Una celda es un contenedor en la intersección de una fila y una columna de la tabla, en el que puedes colocar otros componentes:

• Texto
• Iconos
• Botones
• Etiquetas
• Avatar de usuario
• Barra de progreso
• Checkbox
• Selector
• Campo de entrada y otros componentes

Una sola celda puede contener un único componente (por ejemplo, texto) o una combinación de componentes (por ejemplo, un checkbox, texto e icono).

Una celda puede estar vacía si no hay datos que mostrar en ella. Además, el contenido de la celda puede estar oculto en su estado normal y volverse visible al pasar el ratón por encima de la celda o la fila.

§Recomendaciones para el uso de componentes

• No utilices más de tres componentes diferentes en una celda: esto dificulta la comparación de datos en la columna con dichas celdas y hace que la tabla sea menos legible. En tales casos, puedes crear una columna separada para la propiedad que describe cada componente.
• Elige los tamaños de los componentes en la tabla según tu tarea actual. Para datos de texto plano, es mejor usar el estilo text-body-1 sin decoración, y para otros elementos, usa el tamaño M.
• Recomendamos usar componentes del mismo tamaño dentro de una celda, por ejemplo, etiquetas y botones de tamaño M.

§Altura y anchura de la celda

El tamaño de la celda se determina por el tamaño de su contenido y los rellenos de la celda.

La altura estándar de la celda con texto de una sola línea, con el estilo text-subheader-1 (interlineado de 18px), es de 40px. Tanto el relleno superior como el inferior de la celda en este caso son de 11px.

Para una celda con texto de dos líneas, la altura de la celda es de 58px.

Puedes usar cualquier relleno en la parte superior, inferior, izquierda y derecha, pero recomendamos un sistema de rellenos que sean múltiplos de 4px. Los rellenos superior e inferior suelen ser iguales, pero puedes hacerlos diferentes. Lo mismo se aplica a los rellenos izquierdo y derecho (para más detalles, consulta la descripción de las filas y columnas en la tabla). Los rellenos superior e inferior no tienen por qué ser iguales a los izquierdo y derecho.

§Separador

Cada celda tiene un separador horizontal de 1px de altura. Este separador está alineado con el borde inferior de la celda, su anchura es igual a la anchura de la celda. Puedes omitir el separador para las celdas de la última fila de la tabla.

§Alineación

El contenido dentro de una celda puede estar alineado a la izquierda o a la derecha (para más detalles sobre la alineación del texto, consulta las descripciones de las columnas).

§Cabecera de la tabla

La cabecera de la tabla se encuentra en la parte superior de la tabla y contiene los nombres de las columnas. Además de los nombres, la cabecera también puede contener checkboxes y botones.

Evita los nombres de columna de dos líneas para evitar saltos de línea. Cuando el nombre se ajusta a la segunda línea o posteriores, la altura de la cabecera aumenta. Otros nombres y botones permanecen alineados en la parte superior en este caso.

§Columnas de la tabla

Una columna es un grupo de celdas dispuestas verticalmente. Dependiendo del tipo de contenido en las celdas, los datos de la columna pueden ser:

• Ordenados
• Alineados a la derecha

§Ordenación

Si los datos de la columna se pueden ordenar (por ejemplo, alfabéticamente, por tiempo o por tamaño), se coloca un icono de flecha junto al nombre de la columna. Cuando el usuario hace clic en el nombre del icono, las filas se ordenan por esta columna.

La ordenación es una funcionalidad opcional en la tabla. Está disponible en casos de uso específicos.

No puedes ordenar la tabla por dos columnas en paralelo.

Normalmente, si los datos de una columna se pueden ordenar, dichos datos deben tener la misma unidad de medida. Para evitar especificar la unidad en cada celda de la columna, añádela al nombre de la columna con una coma.

§Contenido alineado a la derecha

Esta característica solo está disponible para datos de texto y se utiliza para comparar datos (por ejemplo, tiempo dedicado o recursos consumidos). Dichos datos a menudo tienen la misma unidad y se pueden ordenar. Para datos de columna alineados a la derecha con una flecha de ordenación, coloca la flecha primero, seguida del texto.

§Bloqueo de columna al desplazarse

Si la tabla no cabe dentro de los bordes de la pantalla, aparece una barra de desplazamiento horizontal. En tales casos, puedes bloquear ciertas columnas de la tabla para que permanezcan siempre en la pantalla. Puedes bloquear las primeras o las últimas columnas de la tabla. Puedes usar cualquier número de columnas bloqueadas, pero asegúrate de que haya suficiente espacio para las columnas que se desplazan, teniendo en cuenta el ancho mínimo de la ventana gráfica soportado.

Cuando se bloquean, las celdas de estas columnas obtienen un separador adicional: se coloca a la derecha si la columna está bloqueada a la izquierda y a la izquierda si la columna está bloqueada a la derecha. Este separador limitará el desplazamiento de otras celdas.

En la columna más a la derecha, puedes añadir acciones para una fila. Estas acciones se pueden acceder a través de un icono de tres puntos, que se expande en una lista. Bloquea esta columna al desplazarse para que el usuario siempre pueda acceder a las acciones. Coloca el icono de engranaje, que abre la configuración de columnas de la tabla al hacer clic, en la cabecera de dicha columna.

§Configuración de columna

Los usuarios pueden personalizar el número y el orden de las columnas. Para ello, añade un icono de engranaje en la cabecera de la última columna de la tabla. Cuando el usuario hace clic en el icono de engranaje, aparece una ventana emergente de configuración.

§Filas de la tabla

Una fila es un grupo de celdas dispuestas horizontalmente.

§Filas clickables

Cuando los usuarios hacen clic en una fila de la tabla, pueden ser dirigidos a otra página, una ventana modal o una barra lateral. Al pasar el ratón por encima de estas filas, el color de fondo cambia a --g-color-base-simple-hover.

Para una visualización más ordenada del efecto hover en una fila de tabla clickeable, puedes añadir pequeños márgenes a la izquierda y a la derecha. Con estos márgenes, el contenido ya no se alinea a la cuadrícula. Por lo tanto, no recomendamos estos márgenes en casos sin hover.

§Filas con operaciones masivas

Puedes aplicar acciones masivas a filas donde la primera celda contiene un checkbox. Un conjunto de acciones de grupo a menudo coincide con el conjunto de acciones individuales de una sola fila de tabla.

Si una fila está seleccionada, su color de fondo cambia a --g-color-base-selection, y aparece una barra de acciones con una lista de acciones de grupo en la parte inferior de la página.

Si hay acciones diferentes disponibles para diferentes filas de tabla, recomendamos mostrar solo aquellas acciones en la barra de acciones que estén disponibles para todas las filas seleccionadas. Otros comportamientos pueden ser habilitados a discreción del diseñador.

§Alineación de contenido

Para filas donde la altura de la celda es superior a 40px, el contenido puede estar alineado en la parte superior o centrado en las celdas.

La alineación superior es preferible porque mejora la legibilidad de los datos. En este caso, todos los componentes que contienen texto deben alinearse a la primera línea.

Si una fila alineada en la parte superior contiene iconos, avatares de usuario, botones de icono, checkboxes, barras de progreso y otros elementos no textuales, establece sus rellenos superiores de manera que su eje horizontal coincida con el eje del texto en una celda de una sola línea.

Puedes usar la alineación centrada cuando sea difícil ajustar los márgenes superiores de la celda para todos los tipos de contenido en una fila, o cuando la alineación no afecte la legibilidad del contenido.

§Recomendaciones de uso

Utiliza tablas:

• Para organizar un gran volumen de datos homogéneos que describen las propiedades de un objeto.
• Para ordenar y comparar datos en tu página.
• Para encontrar rápidamente valores mediante la ordenación, el filtrado y el escaneo del contenido de la tabla.

No recomendamos:

Aquí tienes la traducción del archivo fuente de la guía de diseño a español, manteniendo un tono natural y conservando todos los componentes MDX, bloques de código y términos técnicos:

• Para usar tablas para describir objetos con una sola propiedad. Una lista es una mejor opción para tales casos. Por ejemplo, deberías usar una lista para presentar información sobre el nombre del color y su codificación HEX.
• Para usar tablas para describir objetos que tienen propiedades heterogéneas distintas. Es mejor describir cada objeto individualmente en este caso. Por ejemplo, si tu tarea es describir los dispositivos utilizados por un empleado. Estos dispositivos pueden incluir un portátil (propiedades: SO, capacidad de almacenamiento, tamaño de pantalla), un ratón de ordenador (propiedades: con cable o inalámbrico) y una lámpara de escritorio (propiedades: fabricante, tipo de montaje). No añadas todos estos datos en una sola tabla e intenta encontrar un método de visualización diferente.