Tablas en bootstrap 4
Se puede trabajar con tablas en bootsrap 4 de manera muy sencilla utilizando sus clases.
- table: se coloca en la etiqueta table, introduce los estilos básicos de la tabla en bootstrap, separando las columnas, introduciendo un borde debajo de cada fila… es la clase básica.
- table-striped: se coloca en la etiqueta table, marca las líneas de la tabla de forma atigrada.
- table-bordered: se coloca en la etiqueta table, hace que cada celda tenga su borde
- table-hover: se coloca en la etiqueta table, hace que se sombree la linea en la que se coloca el ratón
- table-[color]: se pueden utilizar los colores de boostrap para crear las tablas con los colores mucho mas personalizadas. Se puede utilizar en la etiqueta table o en cualquier otra parte dela tabla según donde queramos que afecte
- table-sm: se coloca en la etiqueta table y hace que la tabla este un poco mas cerrada, con menos espacios en blanco.
- table-responsive-[tamaño]: se coloca en la etiqueta table y hace que la tabla sea responsive (elástica) a partir de ese tamaño y antes esté estática
Aquí tenemos una tabla ya lista para que podáis hacer las pruebas y jugar con ella.
<table class="table table-responsive-md"> <tr> <td>colum1</td> <td>colum2</td> <td>colum3</td> <td>colum4</td> <td>colum5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table>