1d4ce5a313
Default, meaning `pretty_table: false` ## Sample code ```md | First Column | Second Column | Third Column | |------------------|-----------------|----------------| | Sed in. | Sed non. | Morbi egestas. | | Donec facilisis. | Suspendisse eu. | Nulla porta. | | Praesent a. | Interdum et. | Sed nec. | ``` ### Current result <img width="369" alt="current-default" src="https://github.com/user-attachments/assets/7dc74cfd-ed60-46eb-a1c1-bf3df74bac59"> ### Proposed result <img width="378" alt="updated-default" src="https://github.com/user-attachments/assets/2bf83fb5-f7b1-4d4b-88aa-e55d3420aeaf">
3.3 KiB
3.3 KiB
| layout | title | date | description | tags | categories | giscus_comments | related_posts | pretty_table |
|---|---|---|---|---|---|---|---|---|
| post | displaying beautiful tables with Bootstrap Tables | 2023-03-20 14:37:00-0400 | an example of how to use Bootstrap Tables | formatting tables | sample-posts | true | true | true |
Using markdown to display tables is easy.
Simple Example
First, add the following to the post's front matter
pretty_table: true
Then, 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 |
will generate
| Left aligned | Center aligned | Right aligned |
|---|---|---|
| Left 1 | center 1 | right 1 |
| Left 2 | center 2 | right 2 |
| Left 3 | center 3 | right 3 |
HTML Example
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:
{% raw %}
<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>
{% endraw %}
| ID | Item Name | Item Price |
|---|
More Complex Example
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.
{% raw %}
<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>
{% endraw %}
| ID | Item Name | Item Price |
|---|