Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Bulma admite muchos tipos de tablas, como una tabla bordeada, una tabla despojada, una tabla flotante, una tabla desplazable, etc. Con solo agregar algunas clases de Bulma al HTML, podemos lograr tablas muy interactivas.
Ejemplo 1: Este ejemplo crea una tabla simple usando Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns {
margin-top: 50px;
}
h1 {
color: green !important;
margin-bottom: 20px;
}
.table td {
font-size: 17px
}
.table th {
font-size: 17px
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>User Information</h1>
<hr>
</div>
<table class='table'>
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Gender</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>vilod565</td>
<td>vilod565@gmail.com</td>
<td>Male</td>
<td>Kolkata, West Bengal</td>
<td>9856435632</td>
</tr>
<tr>
<td>deepak123</td>
<td>deepak123@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>6556456421</td>
</tr>
<tr>
<td>sneha345</td>
<td>sneha345@gmail.com</td>
<td>Female</td>
<td>Howrah, West Bengal</td>
<td>7674578634</td>
</tr>
<tr>
<td>saimi875</td>
<td>saimi875@gmail.com</td>
<td>Male</td>
<td>Birbhum, West Bengal</td>
<td>8767543452</td>
</tr>
<tr>
<td>santra765</td>
<td>santra765@gmail.com</td>
<td>Female</td>
<td>Maldah, West Bengal</td>
<td>9567345237</td>
</tr>
<tr>
<td>riya665</td>
<td>riya665@gmail.com</td>
<td>Female</td>
<td>Jalpaiguri, West Bengal</td>
<td>7656435634</td>
</tr>
<tr>
<td>raja222</td>
<td>raja222@gmail.com</td>
<td>Male</td>
<td>Maldah, West Bengal</td>
<td>8767543423</td>
</tr>
<tr>
<td>kunal456</td>
<td>kunal456@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>8654328974</td>
</tr>
<tr>
<td>diwakar686</td>
<td>diwakar686@gmail.com</td>
<td>Male</td>
<td>Howrah, West Bengal</td>
<td>6754345672</td>
</tr>
<tr>
<td>nupur898</td>
<td>nupur898@gmail.com</td>
<td>Female</td>
<td>Kolkata, West Bengal</td>
<td>6897654320</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo usa Bulma para crear una tabla bordeada.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns {
margin-top: 50px;
}
h1 {
color: green !important;
margin-bottom: 20px;
}
.table td {
font-size: 17px
}
.table th {
font-size: 17px
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>Users Information</h1>
<hr>
</div>
<table class='table is-bordered'>
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Gender</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>vilod565</td>
<td>vilod565@gmail.com</td>
<td>Male</td>
<td>Kolkata, West Bengal</td>
<td>9856435632</td>
</tr>
<tr>
<td>deepak123</td>
<td>deepak123@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>6556456421</td>
</tr>
<tr>
<td>sneha345</td>
<td>sneha345@gmail.com</td>
<td>Female</td>
<td>Howrah, West Bengal</td>
<td>7674578634</td>
</tr>
<tr>
<td>saimi875</td>
<td>saimi875@gmail.com</td>
<td>Male</td>
<td>Birbhum, West Bengal</td>
<td>8767543452</td>
</tr>
<tr>
<td>santra765</td>
<td>santra765@gmail.com</td>
<td>Female</td>
<td>Maldah, West Bengal</td>
<td>9567345237</td>
</tr>
<tr>
<td>riya665</td>
<td>riya665@gmail.com</td>
<td>Female</td>
<td>Jalpaiguri, West Bengal</td>
<td>7656435634</td>
</tr>
<tr>
<td>raja222</td>
<td>raja222@gmail.com</td>
<td>Male</td>
<td>Maldah, West Bengal</td>
<td>8767543423</td>
</tr>
<tr>
<td>kunal456</td>
<td>kunal456@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>8654328974</td>
</tr>
<tr>
<td>diwakar686</td>
<td>diwakar686@gmail.com</td>
<td>Male</td>
<td>Howrah, West Bengal</td>
<td>6754345672</td>
</tr>
<tr>
<td>nupur898</td>
<td>nupur898@gmail.com</td>
<td>Female</td>
<td>Kolkata, West Bengal</td>
<td>6897654320</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo usa a Bulma para crear una tabla sin borde.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns {
margin-top: 50px;
}
h1 {
color: green !important;
margin-bottom: 20px;
}
.table td {
font-size: 17px;
border: none
}
.table th {
font-size: 17px;
border: none
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>Users Information</h1>
<hr>
</div>
<table class='table'>
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Gender</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>vilod565</td>
<td>vilod565@gmail.com</td>
<td>Male</td>
<td>Kolkata, West Bengal</td>
<td>9856435632</td>
</tr>
<tr>
<td>deepak123</td>
<td>deepak123@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>6556456421</td>
</tr>
<tr>
<td>sneha345</td>
<td>sneha345@gmail.com</td>
<td>Female</td>
<td>Howrah, West Bengal</td>
<td>7674578634</td>
</tr>
<tr>
<td>saimi875</td>
<td>saimi875@gmail.com</td>
<td>Male</td>
<td>Birbhum, West Bengal</td>
<td>8767543452</td>
</tr>
<tr>
<td>santra765</td>
<td>santra765@gmail.com</td>
<td>Female</td>
<td>Maldah, West Bengal</td>
<td>9567345237</td>
</tr>
<tr>
<td>riya665</td>
<td>riya665@gmail.com</td>
<td>Female</td>
<td>Jalpaiguri, West Bengal</td>
<td>7656435634</td>
</tr>
<tr>
<td>raja222</td>
<td>raja222@gmail.com</td>
<td>Male</td>
<td>Maldah, West Bengal</td>
<td>8767543423</td>
</tr>
<tr>
<td>kunal456</td>
<td>kunal456@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>8654328974</td>
</tr>
<tr>
<td>diwakar686</td>
<td>diwakar686@gmail.com</td>
<td>Male</td>
<td>Howrah, West Bengal</td>
<td>6754345672</td>
</tr>
<tr>
<td>nupur898</td>
<td>nupur898@gmail.com</td>
<td>Female</td>
<td>Kolkata, West Bengal</td>
<td>6897654320</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo usa a Bulma para crear una tabla con bordes despojados.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns {
margin-top: 50px;
}
h1 {
color: green !important;
margin-bottom: 20px;
}
.table td {
font-size: 17px
}
.table th {
font-size: 17px
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>Users Information</h1>
<hr>
</div>
<table class='table is-stripped is-bordered'>
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Gender</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>vilod565</td>
<td>vilod565@gmail.com</td>
<td>Male</td>
<td>Kolkata, West Bengal</td>
<td>9856435632</td>
</tr>
<tr>
<td>deepak123</td>
<td>deepak123@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>6556456421</td>
</tr>
<tr>
<td>sneha345</td>
<td>sneha345@gmail.com</td>
<td>Female</td>
<td>Howrah, West Bengal</td>
<td>7674578634</td>
</tr>
<tr>
<td>saimi875</td>
<td>saimi875@gmail.com</td>
<td>Male</td>
<td>Birbhum, West Bengal</td>
<td>8767543452</td>
</tr>
<tr>
<td>santra765</td>
<td>santra765@gmail.com</td>
<td>Female</td>
<td>Maldah, West Bengal</td>
<td>9567345237</td>
</tr>
<tr>
<td>riya665</td>
<td>riya665@gmail.com</td>
<td>Female</td>
<td>Jalpaiguri, West Bengal</td>
<td>7656435634</td>
</tr>
<tr>
<td>raja222</td>
<td>raja222@gmail.com</td>
<td>Male</td>
<td>Maldah, West Bengal</td>
<td>8767543423</td>
</tr>
<tr>
<td>kunal456</td>
<td>kunal456@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>8654328974</td>
</tr>
<tr>
<td>diwakar686</td>
<td>diwakar686@gmail.com</td>
<td>Male</td>
<td>Howrah, West Bengal</td>
<td>6754345672</td>
</tr>
<tr>
<td>nupur898</td>
<td>nupur898@gmail.com</td>
<td>Female</td>
<td>Kolkata, West Bengal</td>
<td>6897654320</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: Este ejemplo usa a Bulma para crear una tabla flotante.
HTML
<html>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns {
margin-top: 50px;
}
h1 {
color: green !important;
margin-bottom: 20px;
}
.table td {
font-size: 17px
}
.table th {
font-size: 17px
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>Users Information</h1>
<hr>
</div>
<table class='table is-bordered is-hoverable'>
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Gender</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>vilod565</td>
<td>vilod565@gmail.com</td>
<td>Male</td>
<td>Kolkata, West Bengal</td>
<td>9856435632</td>
</tr>
<tr>
<td>deepak123</td>
<td>deepak123@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>6556456421</td>
</tr>
<tr>
<td>sneha345</td>
<td>sneha345@gmail.com</td>
<td>Female</td>
<td>Howrah, West Bengal</td>
<td>7674578634</td>
</tr>
<tr>
<td>saimi875</td>
<td>saimi875@gmail.com</td>
<td>Male</td>
<td>Birbhum, West Bengal</td>
<td>8767543452</td>
</tr>
<tr>
<td>santra765</td>
<td>santra765@gmail.com</td>
<td>Female</td>
<td>Maldah, West Bengal</td>
<td>9567345237</td>
</tr>
<tr>
<td>riya665</td>
<td>riya665@gmail.com</td>
<td>Female</td>
<td>Jalpaiguri, West Bengal</td>
<td>7656435634</td>
</tr>
<tr>
<td>raja222</td>
<td>raja222@gmail.com</td>
<td>Male</td>
<td>Maldah, West Bengal</td>
<td>8767543423</td>
</tr>
<tr>
<td>kunal456</td>
<td>kunal456@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>8654328974</td>
</tr>
<tr>
<td>diwakar686</td>
<td>diwakar686@gmail.com</td>
<td>Male</td>
<td>Howrah, West Bengal</td>
<td>6754345672</td>
</tr>
<tr>
<td>nupur898</td>
<td>nupur898@gmail.com</td>
<td>Female</td>
<td>Kolkata, West Bengal</td>
<td>6897654320</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 6: este ejemplo crea una tabla con un fondo de color.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns {
margin-top: 50px;
}
h1 {
color: green !important;
margin-bottom: 20px;
}
.table td {
font-size: 17px
}
.table th {
font-size: 17px
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>Users Information</h1>
<hr>
</div>
<table class='table is-bordered has-background-primary'>
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Gender</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>vilod565</td>
<td>vilod565@gmail.com</td>
<td>Male</td>
<td>Kolkata, West Bengal</td>
<td>9856435632</td>
</tr>
<tr>
<td>deepak123</td>
<td>deepak123@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>6556456421</td>
</tr>
<tr>
<td>sneha345</td>
<td>sneha345@gmail.com</td>
<td>Female</td>
<td>Howrah, West Bengal</td>
<td>7674578634</td>
</tr>
<tr>
<td>saimi875</td>
<td>saimi875@gmail.com</td>
<td>Male</td>
<td>Birbhum, West Bengal</td>
<td>8767543452</td>
</tr>
<tr>
<td>santra765</td>
<td>santra765@gmail.com</td>
<td>Female</td>
<td>Maldah, West Bengal</td>
<td>9567345237</td>
</tr>
<tr>
<td>riya665</td>
<td>riya665@gmail.com</td>
<td>Female</td>
<td>Jalpaiguri, West Bengal</td>
<td>7656435634</td>
</tr>
<tr>
<td>raja222</td>
<td>raja222@gmail.com</td>
<td>Male</td>
<td>Maldah, West Bengal</td>
<td>8767543423</td>
</tr>
<tr>
<td>kunal456</td>
<td>kunal456@gmail.com</td>
<td>Male</td>
<td>Hooghly, West Bengal</td>
<td>8654328974</td>
</tr>
<tr>
<td>diwakar686</td>
<td>diwakar686@gmail.com</td>
<td>Male</td>
<td>Howrah, West Bengal</td>
<td>6754345672</td>
</tr>
<tr>
<td>nupur898</td>
<td>nupur898@gmail.com</td>
<td>Female</td>
<td>Kolkata, West Bengal</td>
<td>6897654320</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Producción:
Nota: Aquí, en todos los ejemplos anteriores, usamos algunas clases adicionales de Bulma como contenedor, columna, título centrado en el texto, etc. para diseñar bien el contenido.
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA