mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
351 lines
7.8 KiB
HTML
351 lines
7.8 KiB
HTML
|
---
|
||
|
|
layout: documentation
|
||
|
|
doc-tab: elements
|
||
|
|
doc-subtab: table
|
||
|
|
---
|
||
|
|
|
||
|
|
{% include subnav-elements.html %}
|
||
|
|
|
||
|
|
<section class="section">
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="title">Tables</h1>
|
||
|
|
<h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<div class="example">
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th></th>
|
||
|
|
<th>Open source projects</th>
|
||
|
|
<th>Year started</th>
|
||
|
|
<th colspan="3">Links</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tfoot>
|
||
|
|
<tr>
|
||
|
|
<th></th>
|
||
|
|
<th>Open source projects</th>
|
||
|
|
<th>Year started</th>
|
||
|
|
<th colspan="3">Links</th>
|
||
|
|
</tr>
|
||
|
|
</tfoot>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="is-icon">
|
||
|
|
<i class="fa fa-android"></i>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<a href="#">Android</a>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
2003
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-github"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-twitter"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-globe"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="is-icon">
|
||
|
|
<i class="fa fa-firefox"></i>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<a href="#">Firefox</a>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
2003
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-github"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-twitter"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-globe"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="is-icon">
|
||
|
|
<i class="fa fa-linux"></i>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<a href="#">Linux</a>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
2003
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-github"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-twitter"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-globe"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="is-icon">
|
||
|
|
<i class="fa fa-wordpress"></i>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<a href="#">WordPress</a>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
2003
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-github"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-twitter"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-globe"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% highlight html %}
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Name</th>
|
||
|
|
<th>Instrument</th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tfoot>
|
||
|
|
<tr>
|
||
|
|
<th>Name</th>
|
||
|
|
<th>Instrument</th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
</tr>
|
||
|
|
</tfoot>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Misty Abbott</td>
|
||
|
|
<td>Bass Guitar</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-twitter"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-instagram"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>John Smith</td>
|
||
|
|
<td>Rhythm Guitar</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-twitter"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-instagram"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Robert Mikels</td>
|
||
|
|
<td>Lead Guitar</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-twitter"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-instagram"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Karyn Holmberg</td>
|
||
|
|
<td>Drums</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-twitter"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td class="is-icon">
|
||
|
|
<a href="#">
|
||
|
|
<i class="fa fa-instagram"></i>
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h3 class="title">Modifiers</h3>
|
||
|
|
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column">
|
||
|
|
<p>Add <strong>borders</strong> to all the cells.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<code>table is-bordered</code>
|
||
|
|
</div>
|
||
|
|
<div class="column is-half">
|
||
|
|
<table class="table is-bordered">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>One</th>
|
||
|
|
<th>Two</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Three</td>
|
||
|
|
<td>Four</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column">
|
||
|
|
<p>Add <strong>stripes</strong> to the table.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<code>table is-striped</code>
|
||
|
|
</div>
|
||
|
|
<div class="column is-half">
|
||
|
|
<table class="table is-striped">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>One</th>
|
||
|
|
<th>Two</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Three</td>
|
||
|
|
<td>Four</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Five</td>
|
||
|
|
<td>Six</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Seven</td>
|
||
|
|
<td>Eight</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column">
|
||
|
|
<p>Make the cells <strong>narrower</strong>.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<code>table is-narrow</code>
|
||
|
|
</div>
|
||
|
|
<div class="column is-half">
|
||
|
|
<table class="table is-narrow">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>One</th>
|
||
|
|
<th>Two</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Three</td>
|
||
|
|
<td>Four</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Five</td>
|
||
|
|
<td>Six</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Seven</td>
|
||
|
|
<td>Eight</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column">
|
||
|
|
<p>You can <strong>combine</strong> all three modifiers.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<code>table is-bordered is-striped is-narrow</code>
|
||
|
|
</div>
|
||
|
|
<div class="column is-half">
|
||
|
|
<table class="table is-bordered is-striped is-narrow">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>One</th>
|
||
|
|
<th>Two</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Three</td>
|
||
|
|
<td>Four</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Five</td>
|
||
|
|
<td>Six</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Seven</td>
|
||
|
|
<td>Eight</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|