TABLAS Y TARJETAS CARD CON CSS PURO RESPONSIVO CON API JSON PHP FETCH

 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Tabla Responsiva</title>

<style>

table {

border-collapse: collapse;

width: 100%;

max-width: 800px;

margin: 0 auto;

}

th, td {

padding: 8px;

text-align: left;

border-bottom: 1px solid #ddd;

}

tr:hover {

background-color: #f5f5f5;

}

@media screen and (max-width: 600px) {

table, thead, tbody, th, td, tr {

display: block;

}

th {

text-align: center;

height: 50px;

}

td {

height: 50px;

border-bottom: none;

}

td:before {

content: attr(data-label);

float: left;

font-weight: bold;

}

}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>#</th>

<th data-label="Nombre">Nombre</th>

<th data-label="Apellido">Apellido</th>

<th data-label="Edad">Edad</th>

<th data-label="Correo">Correo</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td data-label="Nombre">Juan</td>

<td data-label="Apellido">Pérez</td>

<td data-label="Edad">35</td>

<td data-label="Correo">juan.perez@gmail.com</td>

</tr>

<tr>

<td>2</td>

<td data-label="Nombre">María</td>

<td data-label="Apellido">González</td>

<td data-label="Edad">28</td>

<td data-label="Correo">maria.gonzalez@gmail.com</td>

</tr>

<tr>

<td>3</td>

<td data-label="Nombre">Pedro</td>

<td data-label="Apellido">Sánchez</td>

<td data-label="Edad">42</td>

<td data-label="Correo">pedro.sanchez@gmail.com</td>

</tr>

</tbody>

</table>

</body>

</html>


En este ejemplo, se crea una tabla con 5 columnas (número, nombre, apellido, edad y correo electrónico) y 3 filas con datos de ejemplo.

El estilo CSS de la tabla incluye reglas para que la tabla tenga un ancho máximo de 800 píxeles, se ajuste al ancho de la pantalla en dispositivos móviles (con una regla @media), tenga bordes colapsados, tenga un color de fondo diferente al pasar el cursor por encima y muestre los encabezados de columna en la vista móvil utilizando pseudo-elementos ":before" y el atributo "data-label".

Con este código fuente, se puede crear una tabla responsiva que se ajuste a diferentes tamaños de pantalla y dispositivos.


<div class="card-container">

  <div class="card">

    <img src="https://via.placeholder.com/150" alt="Card Image">

    <h2>Card Title</h2>

    <p>This is a sample card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non nibh eget odio tristique rutrum.</p>

    <a href="#">Read More</a>

  </div>

  

  <div class="card">

    <img src="https://via.placeholder.com/150" alt="Card Image">

    <h2>Card Title</h2>

    <p>This is a sample card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non nibh eget odio tristique rutrum.</p>

    <a href="#">Read More</a>

  </div>

  

  <div class="card">

    <img src="https://via.placeholder.com/150" alt="Card Image">

    <h2>Card Title</h2>

    <p>This is a sample card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non nibh eget odio tristique rutrum.</p>

    <a href="#">Read More</a>

  </div>

</div>


.card-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}


.card {

  width: calc(33.33% - 20px);

  margin-bottom: 20px;

  background-color: #fff;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  padding: 20px;

  text-align: center;

}


.card img {

  width: 100%;

  height: auto;

  margin-bottom: 10px;

}


.card h2 {

  margin-bottom: 10px;

}


.card p {

  font-size: 14px;

  line-height: 1.5;

  margin-bottom: 20px;

}


.card a {

  display: inline-block;

  background-color: #0077FF;

  color: #fff;

  padding: 8px 16px;

  border-radius: 5px;

  text-decoration: none;

}


En este ejemplo, creamos una estructura básica de HTML con tres cards. Usamos la propiedad display: flex en el contenedor de las cards para aplicar Flexbox. Luego, usamos la propiedad flex-wrap: wrap para hacer que las cards se envuelvan a medida que disminuye el tamaño de la pantalla. Utilizamos justify-content: space-between para agregar un espacio igual entre las cards.

En cuanto a los estilos, aplicamos algunos estilos básicos para cada card, como el tamaño y el sombreado de la caja, el tamaño de la imagen y el tamaño de fuente de los títulos y el texto. También agregamos un estilo para el botón de "Leer más".

Con esta estructura básica, puedes personalizar y agregar más elementos para crear tus propias cards responsivos utilizando Flexbox.



<div class="card-container">

  <div class="card">

    <img src="https://via.placeholder.com/150" alt="Card Image">

    <h2>Card Title</h2>

    <p>This is a sample card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non nibh eget odio tristique rutrum.</p>

    <a href="#">Read More</a>

  </div>

  

  <div class="card">

    <img src="https://via.placeholder.com/150" alt="Card Image">

    <h2>Card Title</h2>

    <p>This is a sample card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non nibh eget odio tristique rutrum.</p>

    <a href="#">Read More</a>

  </div>

  

  <div class="card">

    <img src="https://via.placeholder.com/150" alt="Card Image">

    <h2>Card Title</h2>

    <p>This is a sample card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non nibh eget odio tristique rutrum.</p>

    <a href="#">Read More</a>

  </div>

</div>


.card-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}


.card {

  width: calc(33.33% - 20px);

  margin-bottom: 20px;

  background-color: #fff;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  padding: 20px;

  text-align: center;

}


.card img {

  width: 100%;

  height: auto;

  margin-bottom: 10px;

}


.card h2 {

  margin-bottom: 10px;

}


.card p {

  font-size: 14px;

  line-height: 1.5;

  margin-bottom: 20px;

}


.card a {

  display: inline-block;

  background-color: #0077FF;

  color: #fff;

  padding: 8px 16px;

  border-radius: 5px;

  text-decoration: none;

}


@media screen and (max-width: 480px) {

  .card-container {

    flex-direction: column;

    align-items: center;

  }

  

  .card {

    width: 100%;

    margin-bottom: 10px;

  }

}


@media screen and (max-width: 380px) {

  .card p {

    font-size: 12px;

  }

  

  .card a {

    font-size: 12px;

  }

}

En este ejemplo, creamos una estructura básica de HTML con tres cards. Usamos la propiedad display: flex en el contenedor de las cards para aplicar Flexbox. Luego, usamos la propiedad flex-wrap: wrap para hacer que las cards se envuelvan a medida que disminuye el tamaño de la pantalla. Utilizamos justify-content: space-between para agregar un espacio igual entre las cards.

En cuanto a los estilos, aplicamos algunos estilos básicos para cada card, como el tamaño y el sombreado de la caja, el tamaño de la imagen y el tamaño de fuente de los títulos y el texto. También agregamos un estilo para


//////////////


[  {    "id": 1,    "name": "John",    "age": 30  },  {    "id": 2,    "name": "Jane",    "age": 25  },  {    "id": 3,    "name": "Bob",    "age": 40  }]

<table id="myTable">

  <thead>

    <tr>

      <th>ID</th>

      <th>Name</th>

      <th>Age</th>

    </tr>

  </thead>

  <tbody>

  </tbody>

</table>


fetch('data.json')

  .then(response => response.json())

  .then(data => {

    const table = document.getElementById('myTable');

    const tbody = table.getElementsByTagName('tbody')[0];

    data.forEach(item => {

      const tr = document.createElement('tr');

      tr.innerHTML = `

        <td>${item.id}</td>

        <td>${item.name}</td>

        <td>${item.age}</td>

      `;

      tbody.appendChild(tr);

    });

  });


@media screen and (max-width: 480px) {

  #myTable {

    font-size: 14px;

  }

  #myTable th,

  #myTable td {

    display: block;

    width: 100%;

    text-align: center;

  }

  #myTable th {

    text-align: center;

    border: none;

  }

  #myTable td {

    border: none;

  }

}


[  {    "id": 1,    "name": "Item 1"  },  {    "id": 2,    "name": "Item 2"  },  {    "id": 3,    "name": "Item 3"  }]


<ul id="myList">

</ul>


fetch('data.json')

  .then(response => response.json())

  .then(data => {

    const list = document.getElementById('myList');

    data.forEach(item => {

      const li = document.createElement('li');

      li.innerText = item.name;

      list.appendChild(li);

    });

  });


Comentarios

Publicar un comentario

Entradas populares de este blog

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario HTML: html Copy code <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

CONVERTIR IMÁGEN JPG O PNG A WEBP CON PHP DE FORMA SIMPLE

ChatGPT Puedes convertir imágenes de formato JPG o PNG a WebP utilizando la biblioteca GD en PHP. Aquí te muestro un ejemplo simple de cómo hacerlo: php Copy code <?php // Ruta de la imagen de entrada (puede ser JPG o PNG) $imagen_entrada = 'imagen.jpg'; // Ruta de la imagen de salida en formato WebP $imagen_salida = 'imagen.webp'; // Cargar la imagen de entrada $imagen = imagecreatefromstring(file_get_contents($imagen_entrada)); // Verificar si la carga de la imagen fue exitosa if ($imagen !== false) {     // Guardar la imagen en formato WebP     imagewebp($imagen, $imagen_salida);     // Liberar la memoria utilizada por la imagen cargada     imagedestroy($imagen);     echo 'La imagen se ha convertido a formato WebP correctamente.'; } else {     echo 'No se pudo cargar la imagen de entrada.'; } ?> Asegúrate de que la extensión PHP GD esté habilitada en tu servidor. Además, si necesitas ajustar la calidad de la imagen Web...
Leer más