Para crear una tabla responsiva, puedes utilizar un framework de diseño como Bootstrap o puedes acudir a Media Queries, JavaScript, Flexbox o Grid Layout. Estos métodos incluyen clases y elementos de HTML y CSS que te permiten crear tablas adaptables a diferentes tamaños de pantalla.
1. Con Bootstrap
Este ejemplo utiliza la clase “table-responsive” de Bootstrap, la cual hace que la tabla se adapte automáticamente al tamaño de pantalla del dispositivo:
<table class="table table-responsive">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
2. Con Media Queries
Puedes utilizar media queries para crear reglas específicas para diferentes tamaños de pantalla. Por ejemplo, puedes ocultar columnas en tablas muy pequeñas o agregar scroll horizontal en tablas muy grandes.
En este ejemplo, se utiliza una media query para ocultar la segunda columna en pantallas con un ancho de 600px o menos. También se utiliza otra media query para agregar un scroll horizontal en pantallas con un ancho de 800px o más. Esto permite que la tabla se adapte automáticamente al tamaño de pantalla del dispositivo, ocultando columnas en pantallas pequeñas y mostrando un scroll horizontal en pantallas grandes.
En este ejemplo se hace uso de media queries para adaptar la tabla al tamaño de pantalla, pero se podrían agregar más reglas para adaptarlo a diferentes tamaños o dispositivos.
También se pueden utilizar otras técnicas como el uso de flexbox o grid layout para crear una tabla adaptable, pero el uso de media queries es una forma simple de lograrlo.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}
/* Ocultar columnas en pantallas pequeñas */
@media only screen and (max-width: 600px) {
th:nth-child(2), td:nth-child(2) {
display: none;
}
}
/* Agregar scroll horizontal en pantallas grandes */
@media only screen and (min-width: 800px) {
table {
overflow-x: scroll;
}
}
</style>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
3. Con JavaScript
Puedes utilizar JavaScript para crear una tabla responsiva. Por ejemplo, puedes utilizar una biblioteca como DataTables para crear una tabla con paginación, búsqueda y ordenamiento automático:
En este primer ejemplo se utiliza la biblioteca DataTables para crear una tabla con características adicionales como paginación, búsqueda y ordenamiento automático. La biblioteca se encarga de adaptar la tabla automáticamente a diferentes tamaños de pantalla y dispositivos, haciendo un uso eficiente del espacio disponible. Para utilizar DataTables es necesario incluir la biblioteca y configurarla mediante JavaScript, esta biblioteca es muy flexible y se pueden agregar muchas características adicionales que facilitan la creación de tablas responsivas.
<table id="myTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>O puedes usar código genérico de JavaScript para lograr un resultado similar, así:
En este ejemplo se utiliza JavaScript para ocultar las filas de la tabla en pantallas con un ancho de 600px o menos, y se agrega un evento de redimensionamiento para que la tabla se adapte automáticamente al cambio de tamaño de pantalla.
<table id="myTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
<script>
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tr");
// Ocultar filas en pantallas pequeñas
if (window.innerWidth < 600) {
for (var i = 0; i < rows.length; i++) {
rows[i].style.display = "none";
}
}
// Agregar evento de redimensionamiento
window.addEventListener("resize", function() {
if (window.innerWidth < 600) {
for (var i = 0; i < rows.length; i++) {
rows[i].style.display = "none";
}
} else {
for (var i = 0; i < rows.length; i++) {
rows[i].style.display = "table-row";
}
}
});
</script>
4. Con Flexbox
Flexbox te permite organizar los elementos de forma flexible y adaptable al tamaño de pantalla:
En este ejemplo se utiliza Flexbox para organizar los elementos de la tabla en una estructura flexible. La propiedad “display: flex” indica que los elementos deben ser dispuestos en una línea flexible, y “flex-wrap: wrap” permite que los elementos se ajusten automáticamente al tamaño de pantalla, ajustando el tamaño de las celdas en función del ancho disponible. Además, se establece “flex: 1” para cada celda, lo que indica que deben ocupar el mismo ancho disponible, ocupando automáticamente el espacio disponible.
Con flexbox se puede lograr una tabla adaptable a diferentes tamaños de pantalla, ya que permite organizar los elementos de forma flexible y adaptable. Además, se puede utilizar en conjunto con media queries para adaptar el tamaño de las celdas según el tamaño de pantalla.
Es importante tener en cuenta que Flexbox es una técnica más moderna y no soportada en algunos navegadores antiguos, por lo que se recomienda verificar la compatibilidad con los navegadores objetivo antes de utilizarla.
<div style="display: flex; flex-wrap: wrap;">
<div style="flex: 1;">Header 1</div>
<div style="flex: 1;">Header 2</div>
<div style="flex: 1;">Header 3</div>
</div>
<div style="display: flex; flex-wrap: wrap;">
<div style="flex: 1;">Data 1</div>
<div style="flex: 1;">Data 2</div>
<div style="flex: 1;">Data 3</div>
</div>
<div style="display: flex; flex-wrap: wrap;">
<div style="flex: 1;">Data 4</div>
<div style="flex: 1;">Data 5</div>
<div style="flex: 1;">Data 6</div>
</div>5. Con Grid Layout
Esto te permite organizar los elementos en una cuadrícula y adaptar el tamaño de las celdas en función del tamaño de pantalla:
En este ejemplo se utiliza Grid Layout para organizar los elementos de la tabla en una cuadrícula. La propiedad “display: grid” indica que los elementos deben ser dispuestos en una cuadrícula, y “grid-template-columns: repeat(3, 1fr);” indica que se deben crear 3 columnas con un tamaño igual. La propiedad “fr” significa “fraction of available space” que significa que cada celda ocupa una fracción del espacio disponible.
Con Grid Layout se puede lograr una tabla adaptable a diferentes tamaños de pantalla, ya que permite organizar los elementos en una cuadrícula y adaptar el tamaño de las celdas en función del tamaño de pantalla. Al igual que con Flexbox, se puede utilizar en conjunto con media queries para adaptar el tamaño de las celdas según el tamaño de pantalla.
Es importante tener en cuenta que Grid Layout es una técnica más moderna y no soportada en algunos navegadores antiguos, por lo que se recomienda verificar la compatibilidad con los navegadores objetivo antes de utilizarla. Además, al contrario de tablas tradicionales, Grid Layout no proporciona funciones como búsqueda, ordenamiento y paginación, si estas son necesarias se debería utilizar alguna biblioteca especializada o implementarlo de forma personalizada.
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
<div>Header 1</div>
<div>Header 2</div>
<div>Header 3</div>
<div>Data 1</div>
<div>Data 2</div>
<div>Data 3</div>
<div>Data 4</div>
<div>Data 5</div>
<div>Data 6</div>
</div>Este tutorial forma parte de nuestros contenidos básicos de programación. También te puede interesar:
Cómo crear un botón con CSS, HTML y JavaScript
