CodeGym /Curso de Java /Frontend SELF ES /Tablas Responsivas

Tablas Responsivas

Frontend SELF ES

Nivel 26 , Lección 3

Disponible

9.1 Scroll

Las tablas a menudo se usan para mostrar datos estructurados, pero pueden ser complicadas de visualizar en dispositivos con pantallas pequeñas. Las tablas responsivas permiten mejorar la percepción e interacción con los datos en varios dispositivos, incluidos teléfonos móviles y tabletas. Vamos a ver algunas técnicas para crear tablas responsivas.

Uno de los métodos más simples para crear tablas responsivas es agregar desplazamiento horizontal. Este método mantiene la estructura de la tabla y permite a los usuarios desplazar los datos horizontalmente en pantallas estrechas.

Ejemplo:

CSS

    
      .table-container {
        overflow-x: auto;
        width: 100%;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tabla Responsiva con Scroll</title>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body>
      <div class="table-container">
        <table>
          <thead>
          <tr>
            <th>Columna 1</th>
            <th>Columna 2</th>
            <th>Columna 3</th>
            <th>Columna 4</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>Dato 1</td>
            <td>Dato 2</td>
            <td>Dato 3</td>
            <td>Dato 4</td>
          </tr>
          <!-- Otras filas -->
          </tbody>
        </table>
      </div>
      </body>
      </html>

Explicación del código:

.table-container: agrega desplazamiento horizontal si la tabla supera el ancho del contenedor
table: establece el ancho de la tabla al 100% y colapsa los bordes de las celdas

9.2 Ocultamiento de Columnas

Este método implica ocultar columnas menos importantes en pantallas estrechas para que los datos principales permanezcan visibles. Esto se puede hacer usando media queries.

Ejemplo:

CSS

    
      @media (max-width: 600px) {
        .hide {
          display: none;
        }
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Tabla Responsiva con Ocultamiento de Columnas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>Columna 1</th>
              <th>Columna 2</th>
              <th class="hide">Columna 3</th>
              <th class="hide">Columna 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Dato 1</td>
              <td>Dato 2</td>
              <td class="hide">Dato 3</td>
              <td class="hide">Dato 4</td>
            </tr>
            <!-- Otras filas -->
            </tbody>
          </table>
        </body>
      </html>

Explicación del código:

.hide: oculta ciertas columnas en pantallas de menos de 600px de ancho usando media queries
table: establece el ancho de la tabla al 100% y colapsa los bordes de las celdas

9.3. Apilamiento

El apilamiento convierte las filas de la tabla en bloques que se muestran uno debajo del otro en pantallas estrechas. Esto hace que la tabla sea más legible en dispositivos móviles.

Ejemplo:

CSS

    
      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

      @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
          display: block;
        }

        th {
          display: none;
        }

        td {
          display: flex;
          justify-content: space-between;
          padding: 10px;
          border-bottom: 1px solid #ccc;
        }

        td::before {
          content: attr(data-label);
          font-weight: bold;
        }
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Tabla Responsiva con Apilamiento</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>Columna 1</th>
              <th>Columna 2</th>
              <th>Columna 3</th>
              <th>Columna 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td data-label="Columna 1">Dato 1</td>
              <td data-label="Columna 2">Dato 2</td>
              <td data-label="Columna 3">Dato 3</td>
              <td data-label="Columna 4">Dato 4</td>
            </tr>
            <!-- Otras filas -->
            </tbody>
          </table>
        </body>
      </html>

Explicación del código:

Media queries: transforman la tabla en elementos en bloque en pantallas de menos de 600px de ancho
td::before: añade un pseudo-elemento con el nombre de la columna antes de cada valor de celda, para mantener el contexto de los datos

9.4. Transformación a Tarjetas

Este método transforma cada fila de la tabla en una tarjeta separada en pantallas estrechas. Esto ayuda a mejorar la legibilidad de los datos en dispositivos móviles.

Ejemplo:

CSS

    
      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

      @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
          display: block;
        }

        th {
          display: none;
        }

        tr {
          margin-bottom: 10px;
          border-bottom: 2px solid #ccc;
          padding-bottom: 10px;
        }

        td {
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          border: none;
        }

        td::before {
          content: attr(data-label);
          font-weight: bold;
          margin-right: 10px;
        }
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Tabla Responsiva con Tarjetas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <table>
            <thead>
            <tr>
              <th>Columna 1</th>
              <th>Columna 2</th>
              <th>Columna 3</th>
              <th>Columna 4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td data-label="Columna 1">Dato 1</td>
              <td data-label="Columna 2">Dato 2</td>
              <td data-label="Columna 3">Dato 3</td>
              <td data-label="Columna 4">Dato 4</td>
            </tr>
            <!-- Otras filas -->
            </tbody>
          </table>
        </body>
      </html>

Explicación del código:

Media queries: transforman la tabla en elementos en bloque y crean tarjetas en pantallas de menos de 600px de ancho
td::before: añade un pseudo-elemento con el nombre de la columna antes de cada valor de celda, para mantener el contexto de los datos

9.5 Uso de Frameworks de CSS

Muchos frameworks de CSS, como Bootstrap, ofrecen soluciones integradas para crear tablas responsivas. Usar estos frameworks simplifica el proceso y proporciona estilos y componentes listos para usar.

Ejemplo usando Bootstrap:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Tabla Responsiva con Bootstrap</title>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        </head>
        <body>
          <div class="container">
            <table class="table table-responsive">
              <thead>
              <tr>
                <th>Columna 1</th>
                <th>Columna 2</th>
                <th>Columna 3</th>
                <th>Columna 4</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>Dato 1</td>
                <td>Dato 2</td>
                <td>Dato 3</td>
                <td>Dato 4</td>
              </tr>
              <!-- Otras filas -->
              </tbody>
            </table>
          </div>
          <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        </body>
      </html>

Explicación del código:

table.table-responsive: clase de Bootstrap que añade desplazamiento horizontal a las tablas en pantallas estrechas
container: clase de Bootstrap para centrar y establecer un ancho máximo al contenedor

Anterior Lección anterior

Siguiente Siguiente lección

Comentarios

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION