displaying beatiful tables with Bootstrap Tables
Using markdown to display tables is easy. Just use the following syntax:
| Left aligned | Center aligned | Right aligned |
| :----------- | :------------: | ------------: |
| Left 1 | center 1 | right 1 |
| Left 2 | center 2 | right 2 |
| Left 3 | center 3 | right 3 |
That will generate:
Loading, please wait
Left aligned | Center aligned | Right aligned |
---|---|---|
Left 1 | center 1 | right 1 |
Left 2 | center 2 | right 2 |
Left 3 | center 3 | right 3 |
It is also possible to use HTML to display tables. For example, the following HTML code will display a table with Bootstrap Table, loaded from a JSON file:
<table
id="table"
data-toggle="table"
data-url="{{ '/assets/json/table_data.json' | relative_url }}">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
Loading, please wait
ID | Item Name | Item Price |
---|---|---|
0 | Item 0 | $0 |
1 | Item 1 | $1 |
2 | Item 2 | $2 |
3 | Item 3 | $3 |
4 | Item 4 | $4 |
5 | Item 5 | $5 |
6 | Item 6 | $6 |
7 | Item 7 | $7 |
8 | Item 8 | $8 |
9 | Item 9 | $9 |
10 | Item 10 | $10 |
11 | Item 11 | $11 |
12 | Item 12 | $12 |
13 | Item 13 | $13 |
14 | Item 14 | $14 |
15 | Item 15 | $15 |
16 | Item 16 | $16 |
17 | Item 17 | $17 |
18 | Item 18 | $18 |
19 | Item 19 | $19 |
20 | Item 20 | $20 |
By using Bootstrap Table it is possible to create pretty complex tables, with pagination, search, and more. For example, the following HTML code will display a table, loaded from a JSON file, with pagination, search, checkboxes, and header/content alignment. For more information, check the documentation.
<table
data-click-to-select="true"
data-height="460"
data-pagination="true"
data-search="true"
data-toggle="table"
data-url="{{ '/assets/json/table_data.json' | relative_url }}">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-field="id" data-halign="left" data-align="center" data-sortable="true">ID</th>
<th data-field="name" data-halign="center" data-align="right" data-sortable="true">Item Name</th>
<th data-field="price" data-halign="right" data-align="left" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>