I've been a big fan of Bulma ever since I first discovered it a few years ago. Bulma is a free, open source CSS framework based on Flexbox, created by Jeremy Thomas.
Here's a simple table using Bulma's table class:
<table class="table is-fullwidth"> <tr> <td>Hall of Fame</td> </tr> <tr> <td>Michael Jordan</td> </tr> <tr> <td>Magic Johnson</td> </tr> <tr> <td>Larry Bird</td> </tr> <tr> <td>Shaq</td> </tr> </tbody> </table>
Like most people, I don't enjoy writing HTML tables. It's a lot of markup.
But if you use Bulma's
.panel-block class, you can achieve the same table-like look with far less markup.
<p class="panel-block">Hall of Fame</p> <p class="panel-block">Michael Jordan</p> <p class="panel-block">Magic Johnson</p> <p class="panel-block">Larry Bird</p> <p class="panel-block">Shaq</p>
Here's the result. (Slightly bigger padding-top and padding-bottom makes it a bit more readable as well.)
Thanks for reading. More Bulma "hacks" and tips to come...