Cómo hacer una tabla HTML con desplazamiento vertical

En este artículo, aprenderás cómo hacer una tabla HTML con desplazamiento vertical. A menudo, se necesita mostrar información tabular en una página web, pero si la tabla es larga, puede hacer que la página se vuelva demasiado larga y difícil de leer. Aquí es donde entra en juego la opción de hacer una tabla con desplazamiento vertical, lo que permite al usuario desplazarse por la tabla sin tener que desplazarse por la página completa.

Crear la estructura básica

Antes de comenzar a hacer la tabla con desplazamiento vertical, necesitas crear la estructura básica de la tabla. Estos son los elementos HTML que necesitarás utilizar:

<table> - define la tabla
<thead> - define la sección de encabezado de la tabla
<tbody> - define la sección principal de la tabla
<tr> - define una fila de la tabla
<th> - define una celda de encabezado de la tabla
<td> - define una celda de la tabla

Una vez que hayas creado la estructura básica de la tabla, puedes agregar los datos que deseas mostrar.

Agregar el desplazamiento vertical

Para hacer que la tabla sea verticalmente desplazable, necesitarás especificar la altura de la tabla y agregar una propiedad de desbordamiento. Estos son los pasos para agregar el desplazamiento vertical:

Paso 1: agregue una altura a la tabla

Debes agregar una altura a la tabla para que tenga un límite en su tamaño, esto también asegura que la tabla quepa en la zona definida para ésta. La altura debe ser menor al que mostrará en pantalla, para que pueda haber un espacio para el desplazamiento vertical. Agrega el siguiente código CSS:


table {
height: 200px; /* ajustar la altura de acuerdo con lo deseado */
}


Paso 2: agregue una propiedad de desbordamiento

Agrega la propiedad de desbordamiento para que la tabla tenga un desplazamiento vertical. Agrega el siguiente código CSS:


tbody {
display: block;
overflow-y: scroll; /* agrega el desplazamiento vertical */
}


Ejemplo de código completo

Este es el ejemplo completo de una tabla HTML con desplazamiento vertical:


<table>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
</tr>
<tr>
<td>Dato 4</td>
<td>Dato 5</td>
<td>Dato 6</td>
</tr>
<tr>
<td>Dato 7</td>
<td>Dato 8</td>
<td>Dato 9</td>
</tr>
</tbody>
</table>

tbody {
display: block;
overflow-y: scroll; /* agrega el desplazamiento vertical */
height: 150px;
}
</style>


Conclusión

Agregar desplazamiento vertical a una tabla HTML es una buena manera de evitar páginas web extremadamente largas. De esta manera, el usuario puede leer y navegar fácilmente por la tabla sin tener que desplazarse por la página completa. Asegúrate de ajustar la altura de la tabla para que se ajuste a la pantalla y usa la propiedad de desbordamiento para activar el desplazamiento vertical.

Preguntas frecuentes

¿Por qué agregar desplazamiento vertical a una tabla HTML?

Agregar desplazamiento vertical a una tabla HTML ayuda a mantener el diseño de una página web limpio, así como a facilitar la lectura de datos en una tabla, especialmente si la tabla es muy larga.

¿Cómo agrego desplazamiento vertical a mi tabla HTML?

Puedes agregar desplazamiento vertical a tu tabla HTML especificando una altura y utilizando la propiedad de desbordamiento CSS para agregar desplazamiento vertical al cuerpo de la tabla.

¿Puedo agregar también un desplazamiento horizontal?

Sí, también puedes agregar desplazamiento horizontal utilizando la propiedad de desbordamiento CSS y estableciendo la anchura de la tabla. Aunque, crea cuidadosamente el diseño para evitar que los usuarios deban mover muy lejos para ver todo el contenido.

¿Puedo aplicar estilos personalizados a las celdas de la tabla?

Sí, puedes aplicar estilos personalizados a las celdas de la tabla utilizando CSS. Puede cambiar el color de fondo, el tamaño de fuente, la alineación de texto y otras propiedades para personalizar la apariencia de la tabla según tus preferencias.
[nekopost slugs="como-obtener-multiples-valores-de-casilla-de-verificacion-del-formular,css-elimina-el-borde,haga-un-enlace-de-llamadas-de-clic-en-html-con-html,retire-completamente-los-bordes-de-la-tabla-html,use-la-paginacion-en-las-tablas-html-usando-javascript,cambiar-el-espacio-entre-los-parrafos-y-el-interior-de-los-parrafos,css-border-shadow,superscript-y-subindice-en-css,editar-archivo-html"]