Tablas

La tabla muestra datos organizados y estructurados en filas y columnas. Se utiliza para categorizar y comparar contenido relacionado. Este componente permite escanear más fácilmente información compleja.


Uso

Cuándo usar

  • Cuando necesites mostrar contenido estructurado en filas y columnas.
  • Cuando las personas usuarias deban comparar valores.
  • Cuando exista un gran volumen de información que requiere organización.
  • Cuando la persona usuaria necesite escanear y detectar patrones rápidamente.

Cuándo no usar

  • No utilizar la tabla si no se tienen al menos 2 columnas de información.
  • No utilizar la tabla para estructurar contenido a modo de grilla. Para estructurar información relacionada se sugiere utilizar tarjetas o listas.

Tamaños

Desktop

La tabla al 100% ocupa el ancho total de la grilla de 12 columnas de Obelisco.

Tabla desktop al 100%

Cuando la tabla se encuentra al 75%, ocupa 8 columnas de la grilla de Obelisco.

Tabla desktop al 75%

Mobile

En mobile, la tabla ocupa el ancho total del dispositivo y cuando excede el tamaño máximo del contenedor dentro de la grilla, la tabla de scrollea horizontalmente.

Tabla tabla_mobile

Disposición

Las tablas deben ubicarse siempre en el centro del contenedor principal. En dispositivos desktop y tablet, se ajustan al ancho máximo definido por la grilla de la página, y en mobile, la tabla se alinea al centro y puede habilitar desplazamiento horizontal dentro del contenedor para evitar pérdida de información.

Cómo usar los íconos

Sin separadores

NúmeroTítulo de la celdaSubtítulo de hasta 2 líneas donde se puede sumar contenido de soporteEnlaceBotónCheckboxEtiqueta
1JuanEnlace predeterminado
Texto predeterminado
2MaríaEnlace predeterminado
Texto predeterminado
3EstherEnlace predeterminado
Texto predeterminado
4JoséEnlace predeterminado
Texto predeterminado

<div class="responsive-scroll" tabIndex="0">
    <table class="table table-borderless">
        <thead>
            <tr>
            <th scope="col" class="tb-number">Número</th>
            <th scope="col" class="tb-text">
              <span class="th-title">Título de la celda</span>
              <span class="th-subtitle">Subtítulo de hasta 2 líneas donde se puede sumar contenido de soporte</span>
            </th>
            <th scope="col" class="tb-link">Enlace</th>
            <th scope="col" class="tb-button">Botón</th>
            <th scope="col" class="tb-check">Checkbox</th>
            <th scope="col" class="tb-tag">Etiqueta</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td class="text-right">1</td>
            <td>Juan</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                    class="form-checkbox-input"
                    type="checkbox"
                    name="professionCheckbox"
                    id="profession-checkbox-designer"
                    value="diseñador"
                    />
                    <label class="form-checkbox-label" for="profession-checkbox-designer">
                    Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-default">Texto predeterminado</span></td>
            </tr>
            <tr>
            <td class="text-right">2</td>
            <td>María</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                    class="form-checkbox-input"
                    type="checkbox"
                    name="professionCheckbox"
                    id="profession-checkbox-developer"
                    value="desarrollador"
                    />
                    <label class="form-checkbox-label" for="profession-checkbox-developer">
                    Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-danger">Texto predeterminado</span></td>
            </tr>
            <tr>
            <td class="text-right">3</td>
            <td>Esther</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                    class="form-checkbox-input"
                    type="checkbox"
                    name="professionCheckbox"
                    id="profession-checkbox-content-1"
                    value="redactor"
                    />
                    <label class="form-checkbox-label" for="profession-checkbox-content-1">
                    Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-info">Texto predeterminado</span></td>
            </tr>
            <tr>
            <td class="text-right">4</td>
            <td>José</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                        class="form-checkbox-input"
                        type="checkbox"
                        name="professionCheckbox"
                        id="profession-checkbox-content-2"
                        value="redactor"
                        />
                    <label class="form-checkbox-label" for="profession-checkbox-content-2">
                        Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-warning">Texto predeterminado</span></td>
            </tr>
        </tbody>
    </table>
</div>

Con separadores

NúmeroTextoEnlaceBotónCheckboxEtiqueta
1JuanEnlace predeterminado
Texto predeterminado
2MaríaEnlace predeterminado
Texto predeterminado
3EstherEnlace predeterminado
Texto predeterminado
4JoséEnlace predeterminado
Texto predeterminado

<div class="responsive-scroll" tabIndex="0">
    <table class="table">
        <thead>
            <tr>
            <th scope="col" class="tb-number">Número</th>
            <th scope="col" class="tb-text">Texto</th>
            <th scope="col" class="tb-link">Enlace</th>
            <th scope="col" class="tb-button">Botón</th>
            <th scope="col" class="tb-check">Checkbox</th>
            <th scope="col" class="tb-tag">Etiqueta</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td class="text-right">1</td>
            <td>Juan</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                        class="form-checkbox-input"
                        type="checkbox"
                        name="professionCheckbox"
                        id="profession-checkbox-content-5"
                        value="redactor"
                        />
                    <label class="form-checkbox-label" for="profession-checkbox-content-5">
                        Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-default">Texto predeterminado</span></td>
            </tr>
            <tr>
            <td class="text-right">2</td>
            <td>María</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                        class="form-checkbox-input"
                        type="checkbox"
                        name="professionCheckbox"
                        id="profession-checkbox-content-6"
                        value="redactor"
                    />
                    <label class="form-checkbox-label" for="profession-checkbox-content-6">
                        Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-success">Texto predeterminado</span></td>
            </tr>
            <tr>
            <td class="text-right">3</td>
            <td>Esther</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                        class="form-checkbox-input"
                        type="checkbox"
                        name="professionCheckbox"
                        id="profession-checkbox-content-7"
                        value="redactor"
                        />
                    <label class="form-checkbox-label" for="profession-checkbox-content-7">
                        Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-info">Texto predeterminado</span></td>
            </tr>
            <tr>
            <td class="text-right">4</td>
            <td>José</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                        class="form-checkbox-input"
                        type="checkbox"
                        name="professionCheckbox"
                        id="profession-checkbox-content-8"
                        value="redactor"
                        />
                    <label class="form-checkbox-label" for="profession-checkbox-content-8">
                        Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-warning">Texto predeterminado</span></td>
            </tr>
        </tbody>
    </table>
</div>

Con patrón cebra

NúmeroTextoEnlaceBotónCheckboxEtiqueta
1JuanEnlace predeterminado
Texto predeterminado
2MaríaEnlace predeterminado
Texto predeterminado
3EstherEnlace predeterminado
Texto predeterminado
4JoséEnlace predeterminado
Texto predeterminado

<div class="responsive-scroll" tabIndex="0">
    <table class="table table-striped">
        <thead>
            <tr>
            <th scope="col" class="tb-number">Número</th>
            <th scope="col" class="tb-text">Texto</th>
            <th scope="col" class="tb-link">Enlace</th>
            <th scope="col" class="tb-button">Botón</th>
            <th scope="col" class="tb-check">Checkbox</th>
            <th scope="col" class="tb-tag">Etiqueta</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td class="text-right">1</td>
            <td>Juan</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                        class="form-checkbox-input"
                        type="checkbox"
                        name="professionCheckbox"
                        id="profession-checkbox-content-18"
                        value="redactor"
                        />
                    <label class="form-checkbox-label" for="profession-checkbox-content-18">
                        Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-default">Texto predeterminado</span></td>
            </tr>
            <tr>
            <td class="text-right">2</td>
            <td>María</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                        class="form-checkbox-input"
                        type="checkbox"
                        name="professionCheckbox"
                        id="profession-checkbox-content-19"
                        value="redactor"
                        />
                    <label class="form-checkbox-label" for="profession-checkbox-content-19">
                        Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-warning">Texto predeterminado</span></td>
            </tr>
            <tr>
            <td class="text-right">3</td>
            <td>Esther</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                        class="form-checkbox-input"
                        type="checkbox"
                        name="professionCheckbox"
                        id="profession-checkbox-content-20"
                        value="redactor"
                        />
                    <label class="form-checkbox-label" for="profession-checkbox-content-20">
                        Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-info">Texto predeterminado</span></td>
            </tr>
            <tr>
            <td class="text-right">4</td>
            <td>José</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>
            <td>
                <button type="button" class="btn btn-outline-tertiary">Botón</button>
            </td>
            <td>
                <div class="form-checkbox">
                    <input
                        class="form-checkbox-input"
                        type="checkbox"
                        name="professionCheckbox"
                        id="profession-checkbox-content-21"
                        value="redactor"
                        />
                    <label class="form-checkbox-label" for="profession-checkbox-content-21">
                        Checkbox
                    </label>
                </div>
            </td>
            <td><span class="badge badge-danger">Texto predeterminado</span></td>
            </tr>
        </tbody>
    </table>
</div>

Con checkbox

CheckboxNúmeroTextoTextoTexto
$100,00Texto predeterminadoTexto predeterminadoTexto predeterminado
$100,00Texto predeterminadoTexto predeterminadoTexto predeterminado
$100,00Texto predeterminadoTexto predeterminadoTexto predeterminado
$100,00Texto predeterminadoTexto predeterminadoTexto predeterminado

<div class="responsive-scroll" tabIndex="0">
    <table class="table">
        <thead>
            <tr>
                <th scope="col" class="tb-check">Checkbox</th>
                <th scope="col" class="tb-number">Número</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="form-checkbox">
                        <input
                            class="form-checkbox-input"
                            type="checkbox"
                            name="checkboxNoText"
                            id="checkbox-no-text"
                            value="Sin texto"
                        />
                        <label class="form-checkbox-label" for="checkbox-no-text" aria-label="Casilla múltiple sin texto">
                        </label>
                    </div>
                </td>
                <td class="text-right">$100,00</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>
                    <div class="form-checkbox">
                        <input
                            class="form-checkbox-input"
                            type="checkbox"
                            name="checkboxNoText-1"
                            id="checkbox-no-text-1"
                            value="Sin texto"
                        />
                        <label class="form-checkbox-label" for="checkbox-no-text-1" aria-label="Casilla múltiple sin texto">
                        </label>
                    </div>
                </td>
                <td class="text-right">$100,00</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>
                    <div class="form-checkbox">
                        <input
                            class="form-checkbox-input"
                            type="checkbox"
                            name="checkboxNoText-2"
                            id="checkbox-no-text-2"
                            value="Sin texto"
                        />
                        <label class="form-checkbox-label" for="checkbox-no-text-2" aria-label="Casilla múltiple sin texto">
                        </label>
                    </div>
                </td>
                <td class="text-right">$100,00</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>
                    <div class="form-checkbox">
                        <input
                            class="form-checkbox-input"
                            type="checkbox"
                            name="checkboxNoText-3"
                            id="checkbox-no-text-3"
                            value="Sin texto"
                        />
                        <label class="form-checkbox-label" for="checkbox-no-text-3" aria-label="Casilla múltiple sin texto">
                        </label>
                    </div>
                </td>
                <td class="text-right">$100,00</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
        </tbody>
    </table>
</div>

Tipos de celda

De texto

TextoTextoTexto
Texto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminado

<div class="responsive-scroll" tabIndex="0">
    <table class="table">
        <thead>
            <tr>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                </tr>
                <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                </tr>
                <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                </tr>
                <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
        </tbody>
    </table>
</div>

De número

TextoNúmeroTextoTextoTexto
Este un texto de prueba para registrar el alto máximo de la celda y la cantidad de caracteres permitidos.$100,00Texto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminado$100,00Texto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminado$100,00Texto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminado$100,00Texto predeterminadoTexto predeterminadoTexto predeterminado

<div class="responsive-scroll" tabIndex="0">
    <table class="table">
        <thead>
            <tr>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-number">Número</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Este un texto de prueba para registrar el alto máximo de la celda y
                    la cantidad de caracteres permitidos.
                </td>
                <td class="text-right">$100,00</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td class="text-right">$100,00</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td class="text-right">$100,00</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td class="text-right">$100,00</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
        </tbody>
    </table>
</div>

De enlace

TextoTextoEnlaceTextoTexto
Este un texto de prueba para registrar el alto máximo de la celda y la cantidad de caracteres permitidos.Texto predeterminadoEnlace predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoEnlace predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoEnlace predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoEnlace predeterminadoTexto predeterminadoTexto predeterminado

<div class="responsive-scroll" tabIndex="0">
    <table class="table">
        <thead>
            <tr>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-link">Enlace</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Este un texto de prueba para registrar el alto máximo de la celda y
                    la cantidad de caracteres permitidos.
                </td>
                <td>Texto predeterminado</td>
                <td>
                    <a href="#" target="_blank" rel="noreferrer">
                    Enlace predeterminado
                    </a>
                </td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>
                    <a href="#" target="_blank" rel="noreferrer">
                    Enlace predeterminado
                    </a>
                </td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>
                    <a href="#" target="_blank" rel="noreferrer">
                    Enlace predeterminado
                    </a>
                </td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>
                    <a href="#" target="_blank" rel="noreferrer">
                    Enlace predeterminado
                    </a>
                </td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
        </tbody>
    </table>
</div>

De etiqueta

TextoTextoTextoTextoEtiqueta
Este un texto de prueba para registrar el alto máximo de la celda y la cantidad de caracteres permitidos.Texto predeterminadoTexto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminadoTexto predeterminadoTexto predeterminado

<div class="responsive-scroll" tabIndex="0">
    <table class="table">
        <thead>
            <tr>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-tag">Etiqueta</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Este un texto de prueba para registrar el alto máximo de la celda y
                    la cantidad de caracteres permitidos.
                </td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td><span class="badge badge-default">Texto predeterminado</span></td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td><span class="badge badge-danger">Texto predeterminado</span></td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td><span class="badge badge-info">Texto predeterminado</span></td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td><span class="badge badge-success">Texto predeterminado</span></td>
            </tr>
        </tbody>
    </table>
</div>

De botón

TextoTextoBotónTextoTexto
Este un texto de prueba para registrar el alto máximo de la celda y la cantidad de caracteres permitidos.Texto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminadoTexto predeterminado

<div class="responsive-scroll" tabIndex="0">
    <table class="table">
        <thead>
            <tr>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-button">Botón</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Este un texto de prueba para registrar el alto máximo de la celda y
                    la cantidad de caracteres permitidos.
                </td>
                <td>Texto predeterminado</td>
                <td>
                    <button type="button" class="btn btn-outline-tertiary">Botón</button>
                </td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>
                    <button type="button" class="btn btn-outline-tertiary">Botón</button>
                </td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>
                    <button type="button" class="btn btn-outline-tertiary">Botón</button>
                </td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>
                    <button type="button" class="btn btn-outline-tertiary">Botón</button>
                </td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
            </tr>
        </tbody>
    </table>
</div>

De botón con ícono

TextoTextoTextoBotón de ícono
Este un texto de prueba para registrar el alto máximo de la celda y la cantidad de caracteres permitidos.Texto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminado
Texto predeterminadoTexto predeterminadoTexto predeterminado

<div class="responsive-scroll" tabIndex="0">
    <table class="table">
        <thead>
            <tr>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-text">Texto</th>
                <th scope="col" class="tb-button">Botón de ícono</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Este un texto de prueba para registrar el alto máximo de la celda y
                    la cantidad de caracteres permitidos.
                </td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>
                    <div class="actions-table">
                    <button type="button" class="btn btn-xs">
                        <span class="material-symbols-rounded o-icon" aria-hidden="true">edit</span>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <i class="bx bxs-trash-alt o-icon"></i>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <span class="material-symbols-rounded o-icon" aria-hidden="true">visibility</span>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <i class="bx bxs-download o-icon"></i>
                    </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>
                    <div class="actions-table">
                    <button type="button" class="btn btn-xs">
                        <span class="material-symbols-rounded o-icon" aria-hidden="true">edit</span>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <i class="bx bxs-trash-alt o-icon"></i>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <span class="material-symbols-rounded o-icon" aria-hidden="true">visibility</span>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <i class="bx bxs-download o-icon"></i>
                    </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>
                    <div class="actions-table">
                    <button type="button" class="btn btn-xs">
                        <span class="material-symbols-rounded o-icon" aria-hidden="true">edit</span>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <i class="bx bxs-trash-alt o-icon"></i>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <span class="material-symbols-rounded o-icon" aria-hidden="true">visibility</span>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <i class="bx bxs-download o-icon"></i>
                    </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>Texto predeterminado</td>
                <td>
                    <div class="actions-table">
                    <button type="button" class="btn btn-xs">
                        <span class="material-symbols-rounded o-icon" aria-hidden="true">edit</span>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <i class="bx bxs-trash-alt o-icon"></i>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <span class="material-symbols-rounded o-icon" aria-hidden="true">visibility</span>
                    </button>
                    <button type="button" class="btn btn-xs">
                        <i class="bx bxs-download o-icon"></i>
                    </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Anatomía

Anatomia de la tabla
ElementoCarácter
1. Titulo de la tablaOpcional, brinda un contexto general sobre el contenido de la tabla.
2. Descripción de la tablaOpcional, describe brevemente el contenido de la tabla.
3. Campo de búsquedaOpcional, brinda la posibilidad de realizar una búsqueda en la tabla y filtrar resultados.
4. Celdas de encabezadosObligatorio. Fila que muestra la etiqueta de categoría de cada columna.
5. Celda de contenidoObligatorio. Valor individual correspondiente a una etiqueta de categoría específica.
6. Fila de tablaObligatorio. Agrupación horizontal de celdas de contenido.
7. Columna de tablaObligatorio. Agrupación vertical de celdas de contenido bajo una categoría.
8. PaginadoOpcional, se utiliza para organizar el contenido de la tabla en varias páginas.

Celdas de encabezado

Las celdas de encabezado se alinean a la izquierda. Los títulos admiten hasta 55 caracteres y los subtítulos hasta 65; si se exceden, se truncan. El encabezado clasifica los datos de la columna y puede incluir un subtítulo breve como asistencia.

Celdas de encabezado

Fila de tabla

Las tablas pueden incluir celdas de contenido o encabezado. Mantienen un ancho fijo y, si no entran completas, muestran una barra de desplazamiento. Pueden usar un patrón de cebra (filas alternadas con fondo primario y secundario) para mejorar la legibilidad: la primera fila de contenido siempre debe tener fondo primario para diferenciarse del encabezado.

Fila de tabla

Celda de contenido

Pueden contener diferentes tipos de información como texto, números, etiquetas, enlaces y botones (CTAs).

Celda de selección

De selección

Celda de texto

De texto

(Máximo de 105 caracteres permitidos)

Celda de enlace

De enlace

Celda de número

De número

(Se alinean a la derecha, exceptuando fechas y números de teléfono)

Celda de etiqueta

De etiqueta

Celda de botón

De botón

Celda de icono

De botones de ícono

Columna de tabla

Las tablas suelen contar con una cantidad reducida de columnas para disminuir la carga cognitiva y facilitar la lectura en dispositivos pequeños. Generalmente incluyen hasta cinco columnas, sin considerar la casilla de selección.

Fila de tabla

Espaciados

El espaciado interno de la tabla organiza el contenido en filas y columnas, lo que asegura la legibilidad y facilita la identificación de la información.

Ejemplo espaciados 1
Ejemplo espaciados 2
Ejemplo espaciados 3

Las tablas se integran con otros componentes como filtros, campo de búsqueda, botones, desplegables y paginado, manteniendo los espaciados correspondientes.

Ejemplo espaciados 4

Navegación alternativa

El componente de tabla está construido para ser reconocido por herramientas de asistencia como la navegación por teclado o lectores por voz.

TABENTER

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Además, con el enter, puede accionar los elementos sobre el item en el que la persona está posicionada.

Navegacion alternativa de la tabla

Etiquetado descriptivo

El componente Tabla debe construirse utilizando las etiquetas semánticas de HTML: <table>, envuelve toda la estructura de la tabla; <th>, define las celdas de encabezado y <td> que especifica las celdas de datos.

Los encabezados deben incluir el atributo scope (por ejemplo scope="col") para indicar la relación entre el título y las celdas de datos correspondientes.

Cuando una celda contenga elementos interactivos (casillas de selección, botones, enlaces, etc.), estos deben implementarse con etiquetas semánticas nativas: <a> para enlaces, <button> para acciones e <input type="checkbox"> para casillas de selección.

Además, los elementos deben contar con etiquetas claras. En caso de ser necesario, se recomienda complementar con aria-label para proporcionar contexto adicional, indicando a qué fila o elemento corresponde la acción.

<div class="responsive-scroll" tabIndex="0">
    <table class="table table-borderless" aria-describedby="Tabla">
        <thead>
            <tr>
            <th scope="col" class="tb-number">Número</th>
            <th scope="col" class="tb-text">
              <span class="th-title">Título de la celda</span>
              <span class="th-subtitle">Subtítulo de hasta 2 líneas donde se puede sumar contenido de soporte</span>
            </th>
            <th scope="col" class="tb-link">Enlace</th>
            <th scope="col" class="tb-button">Botón</th>
            <th scope="col" class="tb-check">Checkbox</th>
            <th scope="col" class="tb-tag">Etiqueta</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td class="text-right">1</td>
            <td>Juan</td>
            <td>
                <a href="#" target="_blank" rel="noreferrer">
                Enlace predeterminado
                </a>
            </td>

Criterios WCAG aplicados

1.3.1 Info and Relationships (Level A)

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

1.3.2 Meaningful Sequence (Level A)

Cuando la secuencia en que se presenta el contenido afecta su significado, se puede determinar mediante programación una secuencia de lectura correcta.

1.4.1 Use of Color (Level A)

El color no se utiliza como el único medio visual para transmitir información, indicar una acción, provocar una respuesta o distinguir un elemento visual.

1.4.11 Non-text Contrast (Level AA)

La presentación visual de los siguientes elementos tiene una relación de contraste de al menos 3:1 con respecto a los colores adyacentes: componentes de la interfaz de usuario; objetos gráficos.

1.4.12 Text Spacing (Level AA)

No se produce pérdida de contenido ni funcionalidad al configurar todo lo siguiente y no cambiar ninguna otra propiedad de estilo: altura de línea establecida en 1,5; espaciado después de párrafos establecido al menos en 2 veces el tamaño de fuente; espaciado entre letras establecido al menos en 0,12 veces el tamaño de fuente; espaciado entre palabras establecido al menos en 0,16 veces el tamaño de fuente.

1.4.3 Minimum Contrast (Level AA)

La presentación visual del texto y las imágenes del texto tiene una relación de contraste de al menos 4,5:1.

2.1.1 Keyboard (Level A)

Toda la funcionalidad del contenido se puede operar a través de una interfaz de teclado.

2.1.2 No Keyboard Trap (Level A)

Si el foco del teclado se puede mover a un componente de la página usando una interfaz de teclado, entonces el foco se puede mover lejos de ese componente usando solo una interfaz de teclado.

2.2.1 Timing Adjustable (Level A)

Si hay limitaciones de tiempo establecidas por el contenido, se debe cumplir una de las siguientes condiciones: desactivar, ajustar, extender, excepción en tiempo real, excepción esencial, excepción de 20 horas.

2.5.3 Label in Name (Level A)

Para los componentes de la interfaz de usuario con etiquetas que incluyen texto o imágenes de texto, el nombre contiene el texto que se presenta visualmente.

4.1.3 Status Messages (Level AA)

En el contenido implementado mediante lenguajes de marcado, los mensajes de estado se pueden determinar mediante programación a través de roles o propiedades, de modo que puedan presentarse al usuario mediante tecnologías de asistencia sin recibir el foco.

Navegación de pie de página