DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Tabla

Datos

Componente para ordenar valores relacionados en filas y columnas.

Table

Tabla por defecto

Descripción visual

Tabla con encabezados de columna en texto gris oscuro, filas de datos con texto negro sobre fondo blanco. Bordes sutiles grises separan las celdas. Tres columnas de ancho variable contienen texto alineado a la izquierda.

Caption de la tabla
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla por defecto

Contenido

Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption de la tabla",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ]
}) }}

Tabla con tfoot

Descripción visual

Tabla con encabezados de columna en texto gris oscuro, filas de datos con texto negro, y fila final de totales en negrita. Fondo blanco uniforme con bordes grises sutiles entre celdas. Cuatro filas de contenido donde la última muestra valores sumados.

Caption de la tabla
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Suma 325€ 275€
Mostrar códigodel ejemplo: Tabla con tfoot

Contenido

Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption de la tabla",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "foot": [
    {
      "text": "Suma",
      "classes": "uppercase"
    },
    {
      "text": "325€",
      "classes": "lg:text-right"
    },
    {
      "text": "275€",
      "classes": "lg:text-right"
    }
  ]
}) }}

Tabla con caption visible

Este ejemplo con caption visible se considera tabla compleja a nivel de accesibilidad. Así que tendría que tener una descripción con un details asociado a la tabla con el atributo aria-describedby.

Descripción visual

Tabla precedida por título de encabezado en negrita negro. Encabezados de columna en gris oscuro, tres filas de datos con texto negro sobre fondo blanco. Bordes grises sutiles delimitan celdas con contenido alineado a la izquierda.

Caption 1: Meses y pagos
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla con caption visible

Contenido

Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ]
}) }}

Tabla con wrapper

Usa el parámetro wrapper para rodear la tabla con un <div> y poder añadir clases, normalmente para hacer scroll horizontal en la tabla en anchuras pequeñas. Por accesibilidad, parámetro wrapper necesitará los atributos: tabindex=0, role=section y un aria-label o aria-labelledby.

Descripción visual

Tabla con fondo blanco, bordes grises claros de 1px separando celdas. Encabezados en texto negro normal, primera columna con etiquetas en negrita. Valores monetarios en cada celda con texto negro normal. Diseño de 11 columnas y 3 filas de datos.

Caption 1: Meses y pagos
Mes de pago Primer pago Segundo pago Rate for A Rate for B Rate for C Rate for D Rate for E Rate for F Rate for G Rate for H
Enero 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Febrero 75€ 55€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Marzo 165€ 125€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Mostrar códigodel ejemplo: Tabla con wrapper

Contenido

Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "sticky left-0 top-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago",
      "classes": "lg:whitespace-nowrap"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for A",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for B",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for C",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for D",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for E",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for F",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for G",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for H",
      "classes": "lg:whitespace-nowrap lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll del ejemplo Tabla con wrapper"
    }
  }
}) }}

Tabla no responsive

Usa la clase modificadora .c-table--no-responsive junto al parámetro wrapper para tablas que usen rowspan o colspan o tablas que no queremos que muestren sus celdas apiladas en móvil.

Descripción visual

Tabla con fondo blanco, sin bordes visibles entre celdas. Tres columnas con encabezados en texto gris. Tres filas de datos con etiquetas en la primera columna y valores monetarios alineados en las columnas centrales. Espaciado amplio entre columnas, texto negro normal para datos.

Caption 1: Meses y pagos
Mes de pago Primer pago Segundo pago
Enero 85€
Febrero
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla no responsive

Contenido

Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "classes": "c-table--no-responsive w-full",
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago",
      "classes": "lg:whitespace-nowrap"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-center",
        "rowspan": 2,
        "colspan": 2
      }
    ],
    [
      {
        "text": "Febrero"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll  del ejemplo Tabla no responsive"
    }
  }
}) }}

Tabla con columnas sticky

En este ejemplo la primera y última columna se mantienen fijas y el resto hacen scroll horizontal si la anchura es pequeña.

Descripción visual

Tabla con fondo blanco, bordes grises de 1px delimitando celdas. Diez columnas con encabezados en texto negro. Tres filas de contenido mostrando valores monetarios distribuidos en celdas. Primera columna con etiquetas en texto negro normal.

Caption 1: Meses y pagos
Mes de pago Primer pago Segundo pago Rate for A Rate for B Rate for C Rate for D Rate for E Rate for F Rate for G Rate for H
Enero 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Febrero 75€ 55€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Marzo 165€ 125€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Mostrar códigodel ejemplo: Tabla con columnas sticky

Contenido

Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "sticky top-0 left-0 w-0 mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago",
      "classes": "lg:whitespace-nowrap sticky left-0 w-60 bg-white"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for A",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for B",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for C",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for D",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for E",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for F",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for G",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for H",
      "classes": "lg:whitespace-nowrap lg:text-right sticky right-0 w-60 bg-white"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Febrero",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Marzo",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ]
  ],
  "wrapper": {
    "classes": "overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll del ejemplo Tabla con columnas sticky"
    }
  },
  "classes": "relative lg:whitespace-nowrap"
}) }}